在原有项目添加一个新的icon图标

第一步 找到原有图标所在的位置

如:
在这里插入图片描述

第二步 在阿里巴巴矢量图标库中下载

图标库地址:https://www.iconfont.cn/

在矢量图标库找到自己要新增加的图标,添加到购物车之后,选择添加至项目
如:
![在这里插入图片描述](https://img-blog.csdnimg.cn/b7b9dc0643214393925a32f7201d007a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbXVyb25neXV5YW8=,size_9,color_FFFFFF,t_70,g_se,x_16

第三步 到我的项目中点击下载至本地

在这里插入图片描述
下载之后解压,解压完成的目录是这样的:
在这里插入图片描述

第四步 将先下载的代码复制到项目中

1.解压下载下来的压缩包,然后找到iconfont.css这个文件,将@font-face这一段复制到原来的iconfont.css文件中
在这里插入图片描述
还有
在这里插入图片描述

2 然后就是在下面将新图标的类复制过来,也是从新图标的iconfont.svg复制到原来的iconfont.svg中,注意如果新的图标的命名与原来的有冲突的话,自行修改一下,不然就覆盖掉原来的了
将下面的复制到项目icon中的iconfont.svg

<glyph glyph-name="xinxiguanli" unicode="&#59013;" d="M268.8 678.1h401.1V631H268.8v47.1m0-170.6h401.1v-47.2H268.8v47.2m0-169.2h229.3v-47.1H268.8v47.1m712.5-164.7C946.4 231.9 947 233 947 233s-120.6-33.8-143.1 81.8H734S714.7 199 591.5 233.3c-35.6-59.4-36.8-61.2-36.9-61.3 0.1 0 96.5-67.4 0-158.9l37.4-61.5s106.5 45.9 141.4-79.6h70.7s22.2 115.3 141.9 81.2c34.1 58.2 34.7 58.8 34.7 58.8s-90.3 78 0.6 161.6zM767.4-33.1c-69.8 0-126.5 56.6-126.5 126.5s56.6 126.5 126.5 126.5S894 163.3 894 93.4s-56.7-126.5-126.6-126.5zM165.9-77.8c-37.8 0-68.4 30.6-68.4 68.4V774.1c0 37.8 30.6 68.4 68.4 68.4H776c37.8 0 68.4-30.6 68.4-68.4v-411.4H896v448C896 857.8 857.8 896 810.7 896H128C80.9 896 42.7 857.8 42.7 810.7v-853.3c0-47.1 38.2-85.3 85.3-85.3h392.5v50.2H195.9"  horiz-adv-x="1024" />

![在这里插入图片描述](https://img-blog.csdnimg.cn/fb214ee9cc054e209d9a0e8365d8d635.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbXVyb25neXV5YW8=,size_20,color_FFFFFF,t_70,g_se,x_16

3 上面几步都做完之后,就可以跟其他图标一样,在项目中使用啦。

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
如果您想要保留原有的箭头图标,并且在点击箭头图标时触发 `node-click` 事件,您可以使用以下方法来解决冲突: 首先,将箭头图标包裹在一个容器中,并在容器上添加 `@click` 事件监听。然后,通过事件冒泡机制,判断点击的是箭头图标还是容器本身,从而触发相应的事件。 以下是修改后的代码示例: ```html <el-tree :data="treeData" :expand-on-click-node="false" @node-click="handleNodeClick" > <span slot-scope="{ node, data }"> <span class="el-tree-node__expand-icon-container" @click="handleExpandIconClick(node, data)"> <i class="el-icon-arrow-right"></i> </span> </span> </el-tree> ``` ```javascript methods: { handleExpandIconClick(node, data) { // 判断点击的是箭头图标还是容器本身 if (event.target.classList.contains('el-icon-arrow-right')) { // 处理箭头图标的点击事件 console.log('Arrow icon clicked:', node, data); } else { // 处理容器的点击事件 console.log('Container clicked:', node, data); // 触发 node-click 事件 this.$emit('node-click', node, data); } }, handleNodeClick(nodeData) { // 处理节点点击事件的逻辑 console.log('Node clicked:', nodeData); } } ``` 在上面的代码中,我们将箭头图标包裹在一个容器 `<span class="el-tree-node__expand-icon-container">` 中,并在容器上添加了 `@click` 事件监听。在 `handleExpandIconClick` 方法中,我们通过判断 `event.target` 的类名来确定点击的是箭头图标还是容器本身,并分别处理相应的逻辑。如果点击的是容器本身,则触发 `node-click` 事件,否则只处理箭头图标的点击事件。 这样,您就可以在保留原有箭头图标的同时,通过点击箭头图标触发 `node-click` 事件,并执行相应的处理逻辑。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值