vue3中封装svg组件，并且全局注册

1.下载插件

cnpm i vite-plugin-svg-icons -D

2.在vite.config.ts中配置svg

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

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import vueJsx from '@vitejs/plugin-vue-jsx'

import path from 'path'

//引入svg此插件 cnpm i vite-plugin-svg-icons -D

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

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [

    vue(),

    vueJsx(),

    createSvgIconsPlugin({

      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], //取svg的文件路径

      symbolId: 'icon-[dir]-[name]',

    }),

  ],

  resolve: {

    alias: {

      '@': fileURLToPath(new URL('./src', import.meta.url)),

    },

  },

})

3.封装svg组件

<template>

  <!-- svg 结合use 使用 -->

  <svg :style="{ width, height }">

    <use :xlink:href="prefix + name" :fill="color"></use>

  </svg>

</template>

<script setup lang="ts">

//接收父组件传递过来的参数

defineProps({

  // xlink:href 属性值前缀

  prefix: {

    type: String,

    default: '#icon-',

  },

  // //接收父组件传递的名字

  name: {

    type: String,

    default: '',

  },

  //接收父组件传递的颜色

  color: {

    type: String,

    default: '',

  },

  //接收父组件传递的图标的宽度

  width: {

    type: String,

    default: '16px',

  },

  //接收父组件传递的图标的高度

  height: {

    type: String,

    default: '16px',

  },

})

</script>

4.全局注册组件 （在components下新建文件index.ts）

//引入全局组件

import SvgIcon from './SvgIcon/index.vue'

//我这里使用的ui 框架时arco-vue //根据实际取使用

//全局映入aroc-vue icon 

import ArcoVueIcon from '@arco-design/web-vue/es/icon'

//全局对象

const allGloabComponent = { SvgIcon }

// 暴露全局组件

export default {

  install(app: any) {

    //循环注入

    Object.keys(allGloabComponent).forEach((item) => {

      app.component(item, allGloabComponent[item])

    })

    //将element icon 注册全局

    for (const [key, component] of Object.entries(ArcoVueIcon)) {

      app.component(key, component)

    }

  },

}

5.在main.ts中引入

//引入自定义全局组件

import globalComponents from '@/components'

app.use(globalComponents)

6.使用

    <SvgIcon name="phone" color="red" width="50px" height="50px" />

//name 是你svg的名称