1.npm install vite-plugin-svg-icons -D
2.main.js引入并使用
// 本地SVG图标
import 'virtual:svg-icons-register'
import svgIcon from "@/components/svg-icon/index.vue";
app.component("svg-icon", svgIcon);
3.创建index.vue文件
<template>
<svg aria-hidden="true" class="svg-icon" :style="{ height: size, width: size }">
<use :xlink:href="symbolId" :fill="color"></use>
</svg>
</template>
<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps({
//图标大小
size: {
type: [Number, String],
default: '16px'
},
//图标颜色
color: {
type: String,
default: "#606266"
},
//图标前缀,默认icon
prefix: {
type: String,
default: 'icon'
},
//图标名称
name: {
type: String,
default: ""
}
});
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>
<style scoped lang="scss"></style>
3.vite.config.js里面配置
export default defineConfig({
plugins: [vue(),
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
})],
})
4.创建存放svg目录
5.使用
<svg-icon name="location" size="20px" color="#000066" />
6.效果