一、下载图标库到本地

例如阿里图标库：iconfont-阿里巴巴矢量图标库

1. 选所需图标收藏入库

2.自己的图标库下载入库的图标

3.下载的压缩包解压到本地，并将解压的图标文件拖拽进新创建的svg文件夹中

二、安装插件

1.安装svg图标引用所需插件

//命令行 npm install fast-glob -D npm install vite-plugin-svg-icons -D

main.js或者main.ts引入注册脚本

// 引入注册脚本 import 'virtual:svg-icons-register';

在vite.config.js文件中配置插件：

方式一：

*** import path from 'path'; import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'; const pathSrc = path.resolve(__dirname, "src"); export default defineConfig({   plugins: [    	***     // SvgIcon插件配置（本地图标）     createSvgIconsPlugin({       // 指定图标文件夹（文件夹路径根据实际情况更改）         iconDirs:[path.resolve(pathSrc,'assets/icons/svg'),path.resolve(pathSrc,'assets/error')],   		resolve('src/assets/error')],       // 指定symbolId格式       symbolId:'icon-[dir]-[name]',     }),   ], });

方式二：

*** import path from 'path'; import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'; const resolve = (dir) => path.resolve(process.cwd(), dir);  // https://vitejs.dev/config/ export default defineConfig({   plugins: [    	***     // svgIcon导入（本地图标）     createSvgIconsPlugin({       // 指定图标文件夹（文件夹路径根据实际情况更改）       iconDirs:[resolve('src/assets/icons/svg'), resolve('src/assets/error')],       // 指定symbolId格式       symbolId:'icon-[dir]-[name]',     }),   ], });

三、vue项目中配置图标

1.将存有图标的svg文件夹拷贝到vue项目src/assets/icons目录下

注意：icons目录需要自己创建

2.在 src /components文件夹目录下，创建一个svg组件

内容如下：

3.在main.js或者main.ts中配置全局

import { createApp } from 'vue' import App from './App.vue' // 本地图标 import svgIcon from '@/components/SvgIcon/index.vue';  const app = createApp(App);  ***  app.component('svg-icon',svgIcon);  app.mount('#app');

四、使用

示例：

代码：