安装svg依赖插件

pnpm install vite-plugin-svg-icons -D

在vite.config.ts中配置插件

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';export default defineConfig({plugins: [vue(),createSvgIconsPlugin({// 指定图标文件夹路径iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// 指定symbolId格式symbolId: 'icon-[name]',}),],resolve: {alias: {'@': path.resolve(__dirname, 'src'),},},
});

在src/assets/icons下创建是svg文件

<svg t="1730877353979" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2629" width="200" height="200"><path d="M493.789998 1023.53089C254.799718 1023.53089 85.536259 856.015932 85.536259 625.384341c0-122.523033 72.584129-254.513561 75.782607-259.92965a32.11272 32.11272 0 0 1 31.728902-16.162976c12.879205 1.705855 23.156981 11.088057 26.69663 23.540799 0.255878 0.682342 19.87321 74.887033 45.631621 115.955491 17.271782 27.720143 34.970027 47.16689 54.80059 60.81373-13.433608-58.724057-23.626091-147.129991-6.951359-237.668243C358.771578 63.305131 552.514055 3.642853 560.787452 1.21201a31.814195 31.814195 0 0 1 39.831713 36.93176c-0.213232 1.705855-32.325952 175.95894 35.481784 324.410968 6.183724 13.518901 14.712999 29.084827 23.967262 44.906632a422.199104 422.199104 0 0 1 13.135083-66.698929c24.990775-88.022116 89.344154-118.130456 92.116168-119.281909a31.64361 31.64361 0 0 1 32.496537 4.008759c9.382202 7.249884 13.732132 19.276161 11.64246 31.046561-0.341171 2.217611-9.382202 62.178413 41.196398 147.12999 45.674267 76.678181 58.681411 126.403853 58.68141 221.931731C909.123036 856.143872 734.614073 1023.53089 493.789998 1023.53089zM187.247861 475.269104a407.699336 407.699336 0 0 0-28.10396 147.129991c0 187.814632 138.43013 324.069797 334.774036 324.069797 197.879176 0 341.469517-136.255165 341.469518-324.112443 0-81.198696-9.936605-118.684859-48.275696-183.294116-25.587824-43.072838-38.381737-81.795746-44.181643-112.714367a144.272684 144.272684 0 0 0-15.864451 36.803821c-18.721758 66.10188-13.902718 143.718281-13.902718 144.571208a31.259792 31.259792 0 0 1-20.47026 31.259792 30.278926 30.278926 0 0 1-35.225905-11.301289c-2.430843-3.241124-56.975556-81.454575-81.028111-134.336078-49.896258-109.217364-49.213916-227.475759-44.181643-295.539373-50.5786 29.767169-128.408232 96.423452-153.526947 231.868336-24.308433 131.990528 22.943749 269.951548 23.412859 271.23094a31.430378 31.430378 0 0 1-5.586675 31.728902 30.278926 30.278926 0 0 1-30.278925 9.723373c-3.752881-0.93822-96.551391-23.668738-152.460788-112.970245a376.951301 376.951301 0 0 1-26.568691-54.118249z" fill="#3D3D3D" p-id="2630"></path></svg>

入口文件引入

import 'virtual:svg-icons-register'

使用

      <svg><use xlink:href="#icon-hot"></use></svg>import SvgIcon from './SvgIcon.vue'

components 文件夹中创建 SvgIcon.vue组件

<template><div><svg :style="{ width: width, height: height }"><use :xlink:href="prefix + name" :fill="color"></use></svg></div>
</template><script setup lang="ts">
defineProps({//xlink:href属性值的前缀prefix: {type: String,default: '#icon-',},//svg矢量图的名字name: String,//svg图标的颜色color: {type: String,default: '',},//svg宽度width: {type: String,default: '2rem',},//svg高度height: {type: String,default: '2rem',},
})
</script>
<style scoped></style>

使用

   <SvgIcon name="hot" />import SvgIcon from './SvgIcon.vue'

创建全局注册组件的插件

// components/index.ts
// 引入 SvgIcon 组件
import SvgIcon from './SvgIcon.vue';// 引入 Vue 3 的 App 和 Component 类型，用于类型检查
import type { App, Component } from 'vue';// 定义一个对象，用于存储组件映射关系，键为组件名称，值为组件对象
const components: { [name: string]: Component } = { SvgIcon };// 导出默认的插件对象
export default {// install 方法在插件安装时被调用，参数为 Vue 应用实例install(app: App) {// 遍历 components 对象中的所有组件Object.keys(components).forEach((key: string) => {// 以 key 的名字在全局注册每个组件app.component(key, components[key]);});},
}

入口文件引入全局注册组件的插件

import globalComponent from '@/components'
app.use(globalComponent)

使用

# 无需引入组件，已经被全局注册插件注册成全局组件
<SvgIcon name="hot" width="1rem" height="1rem" color="red" />