vue3实战-----封装和使用svg图标
- 1.安装和配置svg插件
- 2.解决引入虚拟模块失败的问题
- 3.使用svg
- 4.封装svg组件
- 5.自定义插件注册svg全局组件
在开发项目的时候经常会用到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);
这样子一个自定义插件就完成了。
（2）)
