How to correctly insert and style svg in this case?

Question

css

Good afternoon. The situation is as follows - we are making a site on wordpress, where there will be a list of links to accounts in social networks. With the icons of these very social networks. The customer's requirement is to be able to upload icons in the form of svg files in the admin panel. This list is displayed on the page in several places, and by design these icons are white in one place and black in another. Moreover, they should change color on hover.
Since they are loaded from the admin panel, in separate files, we are not talking about any sprite. Also, since they are loaded once in one place, we are not talking about several documents with different fills either. Roughly speaking, we have, for example, a Facebook icon, which, depending on the location on the site, should be black or white, and also change color when hovered - well, let's say, to red. And the icon file should be the only one.

In order to be able to manipulate fill, stroke, etc., the icon must be inserted exactly as an svg document. But I don’t know in advance which document I will have to deal with, so the maximum that I could think of was to display a link to the loaded svg document in php in the data-icon attribute of the block, and then write code in js that loops through these blocks, pulls out a line from data-icon and forms svg in this way:

$(this).append('<object type="image/svg+xml" data="' + $(this).attr("data-icon") + '" class="icon"></object>');

And everything would be fine, but since embedding the data attribute element is something like an iframe, it is impossible to refer to svg in styles. The method of styling through javascript described here in the section svg as an object does not work either (the article was written in 2015 and, perhaps, the browsers again changed some kind of security policy, the devil only knows).

Pasting via svg use doesn't work either. you can't just access the file directly, you need to write the id of a specific element inside the file. And God only knows what files the customer will upload in the future.

In general, he described the problem and attempts to solve it. Maybe there is some other solution?

Answer 1

You can insert svg using jQuery load method:
$('.your-svg-container').load('your-svg-file.svg');