【VUE中使用彩icon色图标】

StevenAC

于 2022-06-01 15:39:28 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/StevenAC/article/details/125084375

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当视觉设计师把图标导入到 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>