Vue3 + TS项目中全局封装svg组件

1、安装svg依赖插件

npm i vite-plugin-svg-icons -D
# or
pnpm i vite-plugin-svg-icons -D

2、配置插件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3、在main.ts中导入

import 'virtual:svg-icons-register'

4、封装svg-icon组件

<script setup lang="ts">
// 提供 name 属性即可
defineProps<{
  name: string
}>()
</script>

<template>
  <svg aria-hidden="true" class="cp-icon">
    <use :href="`#icon-${name}`" />
  </svg>
</template>

<style lang="scss" scoped>
.cp-icon {
  // 和 font-size 一样大
  width: 1em;
  height: 1em;
}
</style>

5、全局注册

5.1、安装自动全局注册插件

pnpm i unplugin-vue-components -D
# or
npm i unplugin-vue-components

5.2、配置插件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 自动导入组件插件
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 自动导入的插件
    Components({
      // 默认 true，开启自动生成组件的类型定义文件
      dts: false,
      // 自动导入组件
      resolvers: [VantResolver({ importStyle: false })]
    }),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

6、在需要用到的vue文件中使用即可

<svg-icon name="login-eye-of"></svg-icon>