使用iconfont彩色图标(附在vue3以及react中动态使用svg图标)

三年模拟五年烧烤

已于 2022-03-03 14:54:27 修改

阅读量1k

点赞数

文章标签： css3 javascript css

于 2022-02-10 15:52:02 首次发布

本文链接：https://blog.csdn.net/weixin_54000091/article/details/122862506

版权

本文详细介绍了如何在Vue3和React中引入并动态使用SVG图标，包括代码引入、SVG标签的使用、组件参数传递方法，并特别提到跨框架的href属性调整。

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

使用步骤如下：

第一步：点击生成得图标代码链接进去复制图标 js 代码引入到html中(注意这是js代码需要通过script方式引入)：
在这里插入图片描述

2.利用svg标签写入对应图标得class生成对应图标

<svg  aria-hidden="true" >
		    <use xlink:href="#icon-caidan1"></use>  //xlink:href="#图标名" 注意使用svg图标一定要使用svg标签
		</svg>

3.完整代码示例
在这里插入图片描述

4.在vue3中动态使用svg图标
由于svg标签的href属性的特殊性，我们不能直接使用v-bind动态绑定其链接。可以通过组件传参，利用setup()方法可以直接返回一个jsx模板

在这里插入图片描述
然后按一般组件使用的方式引入注册使用就好了

5.react中不允许标签得属性出现xxx-xxx或xxx:xxx，所以use标签上的xlink:href改成xlinkHref就好了