Vue3后台管理系统（四）SVG图标

目录

一、安装 vite-plugin-svg-icons

二、创建图标文件夹

三、main.ts 引入注册脚本

四、vite.config.ts 插件配置

五、TypeScript支持

六、组件封装

七、使用

---

Element Plus 图标库往往满足不了实际开发需求，可以引用和使用第三方例如 iconfont 的图标，本节通过整合 vite-plugin-svg-icons 插件使用第三方图标库。

一、安装 vite-plugin-svg-icons

npm i [email protected] -D

npm i [email protected] -D

二、创建图标文件夹

在src/assets文件夹下新建icons文件夹，用于存放下载的 SVG 图标

三、main.ts 引入注册脚本

// main.ts
import 'virtual:svg-icons-register';

四、vite.config.ts 插件配置

// vite.config.ts
import {UserConfig, ConfigEnv, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

export default ({command, mode}: ConfigEnv): UserConfig => {
    // 获取 .env 环境配置文件
    const env = loadEnv(mode, process.cwd())

    return (
        {
            plugins: [
                vue(),
                createSvgIconsPlugin({
                    // 指定需要缓存的图标文件夹
                    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
                    // 指定symbolId格式
                    symbolId: 'icon-[dir]-[name]',
                })
            ]
        }
    )
}

五、TypeScript支持

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vite-plugin-svg-icons/client"]
  }
}

六、组件封装

在src/components文件夹下新建SvgIcon文件夹，然后在SvgIcon文件夹下index.ts文件,内容如下：

七、使用