npm i vite-plugin-svg-icons npm i fast-glob// 在plugins中添加
createSvgIconsPlugin({
iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
symbolId: 'icon-[dir]-[name]',
}),
3、在man.js导入
// 导入svg图标
import 'virtual:svg-icons-register'
4、
<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>
5、导入组件并使用