Svg使用和注册components文件夹内部全部为全局组件

1.安装SVG依赖插件

pnpm install vite-plugin-svg-icons -D

2. 封装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,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>

Vue2中使用

Vue3+Ts中使用

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

index.ts

// 引入项目中全部的全局组件 一个一个引入，然后加载全局对象中
// 这里的index.vue就是封装好的scgicon组件
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]);})}
}

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

import gloablComponent from './components/index';
app.use(gloablComponent);