I’m struggling with svg icons. I’m creating menu and to do this I have to use several of svg icons. I already know, that if I want to manipulate colour with help CSS (for example when icon is active/hover) I have to use in HTML <svg>
tag not <img src="path-to-icon.svg"/>
.
How can I solve this problem in a nice way?
I don’t want use full path of svg in my HTML file, because sometimes it is has a hundred of lines d="..."
attribute. I try to avoid use <use xlink:href="path-to-icon.svg" />
as well, because is not supported by IE or Edge browsers.
I can add that I use .twig
template, so maybe there is a ‘PHP’ way to add icon.
HTML:
<label id="menuIcon" for="menu" onclick="openNav()"> {# svg icon #} </label>
CSS
.icon:hover path { fill: green; }
Advertisement
Answer
I would generate my own font file with all the icons used in the application… just like fontawesome or ionicons.