如何在 Element Plus 中使用自定义 icon 组件 (非组件库内置icon)

先说原理就是将 svg 文件以 vue 组件文件的方式使用

需求：我想要在 Element Plus 得评分组件中使用自定义得图标。

el-rate v-model="value1" /> 组件本身是支持自定义图标的，但是教程中只说明了如何使用 @element-plus/icons-vue 图标库内置图标。如何使用自己的图标呢。

先看下 el-rate 如何使用内置的自定义图标，

<template>
  <el-rate
    v-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 属性