效果图:
接下来介绍重要步骤
安装插件
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])
})
}
}