安装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>