文章目录
- 一、为什么要使用svg图标
- 二、安装SVG依赖插件
- 三、在vite.config.ts中配置插件
- 四、入口文件导入
- 五、svg封装为全局组件
一、为什么要使用svg图标
在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源,
这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多，放在项目中几乎不占用资源。
二、安装SVG依赖插件
pnpm install vite-plugin-svg-icons -D
三、在vite.config.ts中配置插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {return {plugins: [createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// Specify symbolId formatsymbolId: 'icon-[dir]-[name]',}),],}
}
四、入口文件导入
import 'virtual:svg-icons-register'
五、svg封装为全局组件
因为项目很多模块需要使用图标,因此把它封装为全局组件！！！
在src/components目录下创建一个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>
在src文件夹目录下创建一个index.ts文件：用于注册components文件夹内部全部全局组件！！！
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]);})}
}
在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件
import gloablComponent from './components/index';
app.use(gloablComponent);
