【VUE中使用彩icon色图标】

最新推荐文章于 2024-01-08 17:40:44 发布

原创最新推荐文章于 2024-01-08 17:40:44 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了如何在网页中使用Iconfont图标库，特别是通过SVG标签结合`<use>`元素来引入和显示彩色图标。关键步骤包括设置SVG class，使用`xlink:href`属性，并确保添加正确的图标前缀。

当视觉设计师把图标导入到 iconfont 后，自己用<i>标签去引入图标时，发现不是彩色的，查阅资料后，发现需要如下使用：

<svg class="icon" 
     aria-hidden="true">
     <use class="icon-box" 
          :xlink:href="cardData.icon" /> 
</svg>
<!-- 注意要在icon font 图标名前加：#icon-前缀，例如有个 test图标，应当如下使用 -->
<svg class="icon" 
     aria-hidden="true">
     <use class="icon-box" 
          xlink:href="#icon-test" /> <!-- 这里没有数据绑定，所以xlink:href前没有冒号 -->
</svg>