Vue3统一导入Svg图标

在项目中需要导入非常的图标，一个一个的引用非常麻烦，这个时候我们就需要一个组件统一去管理svg图标。

1.安装vite-plugin-svg-icons

npm i vite-plugin-svg-icons

2.导入依赖

在vite.config.ts文件下使用

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

//在plugins中添加
createSvgIconsPlugin({
      // 指定要缓存icon的文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icon')],
      // 指定symbolId格式
      symbolId: 'icon-[name]',
}),

3.创建组件

可以根据项目需求适当修改

<script lang="ts" setup>
  import { computed } from 'vue'
  const props = defineProps({
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '',
    },
  })
  const iconName = computed(() => `#icon-${props.name}`)
  const svgClass = computed(() => {
    if (props.name) return `svg-icon icon-${props.name}`
    return 'svg-icon'
  })
</script>
<template>
  <svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<style scoped>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
    font-size: 18px;
    margin-right: 10px;
  }
</style>

4.全局导入

在main.ts文件下导入

import 'virtual:svg-icons-register'
import svgIcon from './components/SvgIcon/index.vue'
const app = createApp(App).component('svg-icon', svgIcon)

5.使用

参数name 只要填写icon的文件名称即可

<svg-icon name="???"></svg-icon>