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 fast-glob@3.2.11 -D

npm i vite-plugin-svg-icons@2.0.1 -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文件,内容如下：

<!--src/components/SvgIcon/index.vue-->
<template><svgaria-hidden="true"class="svg-icon":style="'width:' + size + ';height:' + size"><use :xlink:href="symbolId" :fill="color"/></svg>
</template><script setup lang="ts">
import {computed} from 'vue';const props = defineProps({prefix: {type: String,default: 'icon'},iconClass: {type: String,required: false},color: {type: String},size: {type: String,default: '1em'}
});const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script><style scoped>
.svg-icon {overflow: hidden;fill: currentColor;
}
</style>

七、使用

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue';
</script><template><svg-icon icon-class="wechat"/><svg-icon icon-class="menu"/>
</template>