Vue3+Ts+Element-plus项目，svg图标组件封装、使用（阿里图标库）。

一、安装svg依赖插件

npm i vite-plugin-svg-icons -D

---

二、在项目中的 vite.config.ts 文件中添加 svg 配置项

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'   // 引入svg插件
import path from 'path'   //引入path

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',

    }),

  ],
  
})

---

三、在 main.ts 中添加 svg 配置代码

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'virtual:svg-icons-register'   // 导入svg需要的配置代码

// console.log(import.meta.env);   // 环境
import gloalComponent from './components/index'  // 引入自定义插件对象：注册整个项目全局组件

createApp(App)
.use(gloalComponent)   //安装自定义插件
.use(ElementPlus)
.mount('#app')

---

四、下载 svg 图标并保存在项目中。

这里我使用的是阿里图标库：iconfont-阿里巴巴矢量图标库

找到需要的图标点击下载

 点击复制代码

在项目中的src/assets/icons 文件夹下创建文件，将svg代码粘贴，并进行调整。

---

五、图标统一存放在 src/assets/icons 文件夹中管理。

---

六、在 components 文件夹中创建 .vue 文件，封装 svg 组件。

<!-- 
  封装svg组件
    参数1：name（必传）
    参数2：color（默认为svg原本颜色）
    参数3：width（默认16px）
    参数4：height（默认16px）
 -->
 <template>
  <svg :style="{ width,height }">
   <use :href="prefix+name" :fill="color" ></use>
  </svg>
</template>

<script setup lang="ts">

// 接收父组件传递过来的参数
defineProps({
prefix:{
  type:String,
  default:'#icon-'
},
name:String,
color:{
  type:String,
  default:''
},
width:{
  type:String,
  default:'16px'
},
height:{
  type:String,
  default:'16px'
}
})

</script>

<style scoped>

</style>

---

七、将封装好的svg组件引入到之前封装的全局组件统一管理的文件中（ 统一管理全局组件的封装方法见文章《Vue3+Ts+Element-plus项目，将自定义组件注册为全局组件并统一管理》）。

---

八、即可在其他组件中直接使用（不需要在其他组件中重新调用）