在开发项目的时候经常会用到svg矢量图,使用SVG以后,页面上加载的不再是图片资源,这对页面性能来说是个很大的提升,我们SVG文件比img要小的很多,放在项目中几乎不占用资源。

1.安装和配置svg插件

安装SVG依赖插件:

npm 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]',}),],}
}

在main.ts入口文件导入：

//这是虚拟模块的引入方式，用于给脚手架插件在打包和开发时做相应的处理。
//Vite 和 Rollup 中都约定以 virtual: 作为虚拟模块的前缀：
import 'virtual:svg-icons-register'

2.解决引入虚拟模块失败的问题

如上引入了虚拟模块,可能会报错-----无法找到模块 ‘virtual:svg-icons-register’ 或其相应的类型声明。
在类型声明文件中追加配置:

declare module "virtual:svg-icons-register";

具体界面如下:

这时候文件就不爆红了。但这时候直接运行项目，可能会出现以下界面:

需要安装一下fast-glob插件:

 npm i fast-glob -D  

3.使用svg

进入阿里矢量图官网,随便选择一个矢量图,复制其代码:

新建phone.svg文件(路径必须与vite.config.ts中保持一致):

在phone.svg中粘贴刚才的svg代码:

然后去vue文件中测试一下:

<script setup lang="ts"></script><template><div><h1>svg测试</h1><!-- svg是图标外层容器节点,内部需要结合use标签使用 --><svg><!-- xlink:href指定用哪一个图标,属性值必须是以"#icon-图标名字"的格式 --><!-- fill可以设置图标的颜色 --><use xlink:href="#icon-phone" fill="green"></use></svg></div>
</template>
<style scoped></style>

运行项目:

发现颜色未改变,这时候需要把phone.svg中的fill去掉:

刷新之后，颜色就改变了:

4.封装svg组件

新建svg组件文件:

components/SvgIcon/index.vue:

<template><!-- svg:图标外层容器节点,内部需要与use标签结合使用 --><svg :style="{ width, height }"><!-- xlink:href执行用哪一个图标,属性值务必#icon-图标名字 --><!-- use标签fill属性可以设置图标的颜色 --><use :xlink:href="prefix + name" :fill="color"></use></svg>
</template><script setup lang="ts">
//接受父组件传递过来的参数
defineProps({//xlink:href属性值前缀prefix: {type: String,default: '#icon-'},//提供使用的图标名字name: String,//接受父组件传递颜色color: {type: String,default: ''},//接受父组件传递过来的图标的宽度width: {type: String,default: '16px'},//接受父组件传递过来的图标的高度height: {type: String,default: '16px'}
})
</script>
<style scoped></style>

使用一下svg组件:

<script setup lang="ts">
import SvgIcon from "./components/SvgIcon/index.vue";
</script><template><div><h3>svg测试</h3><SvgIcon name="phone" color="pink" width="60" height="60"></SvgIcon></div>
</template>
<style scoped></style>

运行项目发现组件生效:

5.自定义插件注册svg全局组件

svg在很多地方都会用到，直接把svg组件定义为全局组件更好。

上面components文件夹里面全部要注册为全局组件。需要在index.ts写以下代码:

//引入项目中全部的全局组件
import SvgIcon from './SvgIcon/index.vue'
import Pagination from './Pagination/index.vue'
import Category from './Category/index.vue'
//引入element-plus提供全部图标组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
//全局对象
const allGloablComponent: any = { SvgIcon, Pagination, Category }
//对外暴露插件对象
export default {//务必叫做install方法install(app: any) {//注册项目全部的全局组件Object.keys(allGloablComponent).forEach((key) => {//注册为全局组件app.component(key, allGloablComponent[key])})//将element-plus提供图标注册为全局组件for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}},
}

然后再main.ts中挂载使用:

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

这样子一个自定义插件就完成了。