Element Plus 自定义 SVG 图标实战：从零封装到组件复用

1. 为什么我们需要自定义SVG图标？

在Vue 3和Element Plus的项目里，图标系统是UI交互的灵魂。Element Plus自带的@element-plus/icons-vue图标库虽然丰富，但总有那么些时候，设计师会递给你一个风格独特的SVG文件，或者产品经理要求用上自家的品牌Logo作为图标。这时候，你发现像el-rate评分组件、el-button按钮组件的icon属性，官方文档只教了怎么用内置图标，对于怎么塞进去自己的图标，却说得有点含糊。

我刚开始也踩过坑，以为要把SVG转成字体或者用<img>标签，结果不是颜色控制不灵活，就是尺寸渲染有问题。后来才明白，Element Plus的图标生态，核心是把SVG变成Vue组件。你看它内置的那些图标，比如ChatRound，本质上就是一个导出了SVG代码的.vue单文件组件。所以，我们的自定义图标，只要最终能“变身”成一个Vue组件，就能无缝接入Element Plus的各个角落。这不仅仅是解决一个评分组件星星图标的问题，更是一套打通所有组件图标自定义能力的通用方案。接下来，我就带你从零开始，手把手封装，让你彻底掌握这门手艺。

2. 两种核心方法：手动封装与自动化插件

面对一个SVG文件，我们有两种主流的路径把它变成Vue组件。你可以把它们想象成“手工打造”和“自动化流水线”。两种方法没有绝对的好坏，主要看你的项目规模和个人偏好。

2.1 方法一：手动创建Vue组件文件（简单直接）

这是最直观、依赖最少的方法，特别适合图标数量不多、或者图标需要高度定制化修改的场景。它的核心思想就是“复制粘贴”。

第一步，准备你的SVG源码。 从设计师那里拿到SVG文件后，用任何文本编辑器（比如VSCode）打开它。你会看到一堆XML格式的代码。这里有个关键细节：很多从设计软件（如Sketch、Figma）直接导出的SVG，第一行会有一个XML声明：<?xml version="1.0" encoding="UTF-8"?>。这行东西在Vue的模板里是会报错的，我们必须把它删掉或者注释掉。

第二步，创建Vue组件文件。 在你的项目组件目录（比如src/components/icons/）下，新建一个MyCustomIcon.vue文件。然后，把清理过的SVG代码，完整地粘贴到<template>标签内部。

<!-- src/components/icons/RateActive.vue -->
<script setup lang="ts">
// 这里可以定义组件需要的Props，比如颜色、大小
defineProps<{
  color?: string
  size?: string | number
}>()
</script>

<template>
  <!-- 注意：已移除XML声明行 -->
  <svg
    :width="size || '14px'"
    :height="size || '14px'"
    viewBox="0 0 14 14"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    :fill="color"
  >
    <title>我的自定义激活图标</title>
    <g id="图层1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <!-- 这里是你的SVG具体路径(path)、圆形(circle)等图形元素 -->
      <path
        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"
        :stroke="color"
      />
      <!-- 更多图形元素... -->
    </g>
  </svg>
</tem