树枝模板中的SVG图标

Question

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;
}

Answer 1

I would generate my own font file with all the icons used in the application... just like fontawesome or ionicons.