我正在与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一样。