自定插件注册svg全局组件

效果图：

接下来介绍重要步骤

安装插件

pnpm install vite-plugin-svg-icons -D

在main.ts，引入

// svg插件需要配置代码
import 'virtual:svg-icons-register'

// 引入自定义插件对象：注册整个项目全局组件
import gloalComponent from '@/components'
// 安装自定义插件
app.use(gloalComponent)

在component创建一个svg文件

<template>
  <div>
    <svg-icon name="phone" color="pink" width="100px" height="100px">
    </svg-icon>
  </div>
</template>

<script lang="ts" setup>

</script>

component下新建一个index.ts,注册全局文件

// 引入项目中全部的全局组件
import SvgIcon from './Svgicon/index.vue'
import Pagination from './Pagination/index.vue'

// 全局对象
const allGloablComponent:any = {
    SvgIcon,
    Pagination
}

export default {
    // 务必叫做install方法
    install(app:any){
        // 注册为全局组件
        Object.keys(allGloablComponent).forEach(key=>{
            app.component(key,allGloablComponent[key])
        })        
    }
}