duankui3838
2018-03-02 10:18 阅读 102
已采纳

树枝模板中的SVG图标

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;
}
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    duanbi3385 duanbi3385 2018-03-02 10:37

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

    点赞 评论 复制链接分享

相关推荐