树枝模板中的SVG图标

Posted 2021-04-14

我正在与svg图标挣扎。我正在创建菜单，为此我必须使用几个svg图标。我已经知道，如果我想用CSS帮助操作颜色（例如当图标处于活动状态/悬停状态时）我必须使用html <svg>标签而不是<img src="path-to-icon.svg"/>。如何以一种很好的方式解决这个问题？

我不想在我的HTML文件中使用svg的完整路径，因为有时候它有一百行d="..."属性。我尽量避免使用<use xlink:href="path-to-icon.svg" />，因为IE或Edge浏览器不支持。

我可以补充一点，我使用.twig模板，所以也许有一种'php'方式来添加图标。

HTML：

  <label id="menuIcon" for="menu" onclick="openNav()">
          {# svg icon #}
  </label>

CSS

.icon:hover path {
    fill: green;
}

答案

我会生成我自己的字体文件，其中包含应用程序中使用的所有图标...就像fontawesome或ionicons一样。