找不到合适的图标，如何使用其他的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>