先说原理就是将
svg文件以vue组件文件的方式使用
需求：我想要在 Element Plus 得评分组件中使用自定义得图标。
el-rate v-model="value1" /> 组件本身是支持自定义图标的，但是教程中只说明了如何使用 @element-plus/icons-vue 图标库内置图标。如何使用自己的图标呢。
先看下 el-rate 如何使用内置的自定义图标，
<template><el-ratev-model="value":icons="icons":void-icon="ChatRound":colors="['#409eff', '#67c23a', '#FF9900']"/>
</template><script lang="ts" setup>
import { ref } from 'vue'
import { ChatDotRound, ChatLineRound, ChatRound } from '@element-plus/icons-vue'const value = ref()
const icons = [ChatRound, ChatLineRound, ChatDotRound] // same as { 2: ChatRound, 4: { value: ChatLineRound, excluded: true }, 5: ChatDotRound }
</script>
这里从 @element-plus/icons-vue 导出的图标组件本质上就是一个 svg 组件，这个仓库在打包的时候将 svg 文件转换成了 vue 组件文件。所以我们只需要将 svg 文件包装成一个 vue 组件文件就可以使用自定义图标。
两种方法
这里最简单的方法就是第一种
1. 创建 .vue 文件将 svg 代码粘贴进去
创建一个 RateAct.vue 文件, 将 svg 文件的代码复制进去。记得查看是否 <?xml version="1.0" encoding="UTF-8"?> 标签, 要注释掉。
<script setup lang="ts">
</script><template>//<?xml version="1.0" encoding="UTF-8"?><svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>关闭_close-one (2)@2x</title><g id="数据中心" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round"><g id="0数据中心_布局+列表" transform="translate(-375.000000, -85.000000)" stroke="#196FFF"><g id="快速页签" transform="translate(180.000000, 64.000000)"><g id="编组-2备份" transform="translate(120.000000, 12.000000)"><g id="关闭_close-one-(2)" transform="translate(76.000000, 10.000000)"><path id="路径" d="M6,12 C9.31371,12 12,9.31371 12,6 C12,2.68629 9.31371,0 6,0 C2.68629,0 0,2.68629 0,6 C0,9.31371 2.68629,12 6,12 Z" /><line id="路径" x1="7.69701" y1="4.30296" x2="4.3029" y2="7.69707" stroke-linecap="round" /><line id="路径" x1="4.30299" y1="4.30296" x2="7.6971" y2="7.69707" stroke-linecap="round" /></g></g></g></g></g></svg>
</template><style lang="scss"></style>2. 使用 vite-plugin-svg-icons vite插件
这里默认你会使用 vite-plugin-svg-icons 插件, 一切配置你都已经配好了。 创建一个 RateAct.vue 文件, 代码如下
<script setup lang="ts">
</script><template><svg-icon icon-class="sl-rate-act" />
</template><style lang="scss"></style>
最后，按照上面处理好之后。然后按照 Element Plus 的自定义 icon 就可以正常使用
评分组件的文档 。
当然你也可以以一举三, 把这种方式复用在别的组件上，例如：按钮组件的 icon 属性
