从0到1：通用后台管理系统 安装vite-plugin-svg-icons

找不到合适的图标，如何使用其他的svg图标？
安装vite-plugin-svg-icons
使用svg-icon，即可使用iconfont等svg图标库

一、安装依赖

npm i vite-plugin-svg-icons

npm i fast-glob

二、在src/assets新建svg目录

三、vite.config.js中进行配置

import {
    
    
	createSvgIconsPlugin
} from 'vite-plugin-svg-icons'

// 在plugins中添加
		createSvgIconsPlugin({
    
    
			iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
			symbolId: 'icon-[dir]-[name]',
		}),

四、在main.js中导入文件

// 导入svg图标
import 'virtual:svg-icons-register'

五、在components文件中创建SvgIcon.vue文件封装svg组件

<template>
    <svg aria-hidden="true" :style="{ width: size + 'px', height: size + 'px' }">
        <use :xlink:href="symbolId" :fill="color" />
    </svg>
</template>
<script setup lang="ts">
import {
      
       computed } from 'vue';

const props = defineProps({
      
      
    iconName: {
      
      
        type: String,
        required: true
    },
    color: {
      
      
        type: String,
        default: ''
    },
    size: {
      
      
        type: [Number, String],
        default: 18
    }
})
const symbolId = computed(() => `#icon-${ 
        props.iconName}`);

</script>


<style scoped>
.svg-icon {
      
      
    fill: currentColor;
    vertical-align: middle;
}
</style>

六、最后在需要的文件中使用图标
示例在面包屑组件中引用

<template>
	<div class="bread-crumb">
		<SvgIcon icon-name="location" class="bread-crumb-icon"></SvgIcon>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item>{
   
   {props.item.first}}</el-breadcrumb-item>
			<el-breadcrumb-item v-if="props.item.second">{
   
   {props.item.second}}</el-breadcrumb-item>
		</el-breadcrumb>
	</div>
</template>

<script setup>
	import SvgIcon from '@/components/SvgIcon.vue'
	const props = defineProps(["item"])
</script>