vue3+vite实现svg自定义icon组件

 把svg图片统一存放在一个文件夹

安装 npm i vite-plugin-svg-icons -D    或者pnpm和yarn都行

在vite.config.ts中配置

import { defineConfig } from 'vite'

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig(() => {
    return {
        plugins: [
            createSvgIconsPlugin({
                // 指定要缓存的图标文件夹
                iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
                // 执行icon name的格式
                symbolId: 'icon-[name]'
            })
        ]
    }
})

main.ts 导入

import 'virtual:svg-icons-register'

自定义组件 c-icon

<script setup lang="ts">
interface Props {
  name: string
  color?: string
  size?: string
}
const props = withDefaults(defineProps<Props>(), {
  name: '',
  color: '#000',
  size: '16px'
})
const iconName = computed(() => `#icon-${props.name}`)
</script>

<template>
  <svg class="c-icon" aria-hidden="true">
    <use :xlink:href="iconName" :fill="color" />
  </svg>
</template>

<style scoped lang="scss">
$width: v-bind(size);
$height: v-bind(size);
.c-icon {
  width: $width;
  height: $height;
  position: relative;
  fill: currentColor;
}
</style>