vue3配置svgIcon图标

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.效果