Vue3项目中配置SVG图标

安装SVG依赖插件

npm install vite-plugin-svg-icons -D

在vite.config.ts中配置插件

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

export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
        // 指定symbolId格式，icon为固定字段
        symbolId: 'icon-[dir]-[name]',

        /**
         * 自定义插入位置
         * @default: body-last
         */
        inject?: 'body-last' | 'body-first'

        /**
         * custom dom id
         * @default: __svg__icons__dom__
         */
        customDomId: '__svg__icons__dom__',
      }),
    ],
  }
}

入口文件导入

import 'virtual:svg-icons-register'

在组件使用

示例：封装svg为全局组件

1. 在src/components目录下创建一个SvgIcon组件:

<template>
  <div>
    <svg :style="{ width: width, height: height }">
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
defineProps({
  //xlink:href属性值的前缀
  prefix: {
    type: String,
    // 固定为'#icon-
    default: '#icon-'
  },
  //svg矢量图的名字
  name: String,
  //svg图标的颜色
  color: {
    type: String,
    default: ""
  },
  //svg宽度
  width: {
    type: String,
    default: '16px'
  },
  //svg高度
  height: {
    type: String,
    default: '16px'
  }

})
</script>
<style scoped></style>

2. 在src/components文件夹目录下创建一个index.ts文件：用于注册components文件夹内部全部全局组件！

import SvgIcon from './SvgIcon/index.vue';
import type { App, Component } from 'vue';
const components: { [name: string]: Component } = { SvgIcon };
export default {
    install(app: App) {
        Object.keys(components).forEach((key: string) => {
            app.component(key, components[key]);
        })
    }
}

3. 在入口文件引入src/components/index.ts文件,通过app.use方法安装自定义插件

//引入自定义插件对象:注册整个项目全局组件
import gloalComponent from '@/components'

//安装自定义插件
app.use(gloalComponent)

4. 在组件中使用：name 为svg图片文件名

<template>
    <div>
      <SvgIcon name="phone"></SvgIcon>
    </div>
  </div>
</template>