这篇文章主要介绍了vue怎么封装自己的Svg图标组件库的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么封装自己的Svg图标组件库文章都会有所收获,下面我们一起来看看吧。
vue封装自己的Svg图标组件库
安装及配置方法
一、安装组件svg-sprite-loader
npm install svg-sprite-loader --save-dev || yarn add svg-sprite-loader
二、在src/components下新建文件夹及文件SvgIcon/index.vue,index.vue添加如下内容:
<template> <div v-if="isExternal" : class="svg-external-icon svg-icon" v-on="$listeners" /> <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="https://www.maopiaopiao.com">
在src下新建utils/validate.js,定义公共的方法,用于校验传入的iconClass是否为外部链接,内容如下:
//匹配http或者 https export function isExternal(path) { return /^(https?:|mailto:|tel:)/.test(path) }
三、在src下新建icons文件夹,及icons文件夹下svg文件夹、index.js文件,将svg图片放入svg文件夹中,在 index.js文件中添加如下内容
import Vue from 'vue' import SvgIcon from '@/components/SvgIcon'// svg 组件 // 全局注册svg组件 Vue.component('svg-icon', SvgIcon) // 工程化导入svg图片 const req = require.context('./svg', false, /.svg$/) const requireAll = requireContext => requireContext.keys().map(requireContext) requireAll(req)
四、在main.js中引入svg
import '@/icons' // icon
五、配置 vue.config.js(主要为打包进行设置)
const path = require('path') // 将传入的相对路径转换成绝对路径 function resolve (dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack (config) { // set svg-sprite-loader config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() } }
六、在组件中使用
<div> <svg-icon icon-class="user" />//传入svg文件名称 <svg-icon icon-class="password" /> </div>
vue使用svg封装图标组件,代替img图片提高性能
可行性分析
如何在vue中使用svg封装图标组件,代替img图片提高性能。
1: 配置:svg-sprite-loader
2:自定义 svg-icon组件
3:导出
.svg模块
目录介绍
|-src |-main.js |-icons |-svg |-user.svg |-psd.svg |-index.js |-SvgIcon.vue |-vue.config.js
说明
为了让字体图标模块成为,独立于组件,独立于项目的模块
1:优点:在任意的项目中都可以引用。需要什么图标下载独赢svg就可以了
2:未完成:整个常见图标,发布npm 提供给更多的开发者使用
3: 注意:如果在组件库中,不能使用vue.config.js 使用打包工具配置文件
1. 使用说明
<svg-icon iconClass="user" className="use" /> <style> .use{ font-size:100px; } </style>
属性 | 类型是否必填 | 作用 |
---|---|---|
iconClass | string|必填 | 设置使用哪个图片,值为.svg文件名 |
className | string|非必填 | 自定义图标样式 |
实践方案
封装SvgIcon组件
<template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <!-- xlink:href="https://www.maopiaopiao.com">
1. 准备好对应的svg文件
去阿里图标库下载需要的svg文件,一个图标一个svg文件并放在
src/icon/svg目录下
2. 配置.svg模块
2.1 安装:svg-sprite-loader
npm i svg-sprite-loader -D
2.2 vue.config.js中配置svg-sprite-loader
//vue.config.js const path = require('path'); // 在vue.config.js中没有配置 resolve 方法, 需要自定义一个 function resolve(dir) { return path.join(__dirname, dir); } module.exports = { chainWebpack: (config) => { config.module.rules.delete('svg'); // 重点:删除默认配置中处理svg config.module .rule('svg-sprite-loader') // rule 匹配规则 .test(/.svg$/) // 用正则匹配 文件 .include // 包含 包括 .add(resolve('src/icon')) // 处理svg目录 .end() .use('svg-sprite-loader') // 配置loader use() 使用哪个loader .loader('svg-sprite-loader')// 加载loader .options({ // [name] 变量。一般表示匹配到的文件名 xxx.svg // 注意: symbolId 在 <use xlink:href="https://www.maopiaopiao.com">
3. 导出所有.svg 注册组件
// index.js // 引入vue import Vue from 'vue'; // 引入svgIcon组件 import SvgIcon from './SvgIcon.vue'; // 注册为全局组件 Vue.component('svg-icon', SvgIcon); // 引入当前svg目录下的文件、不遍历子目录、匹配以'.svg'为结尾的文件 /** * webpack 是模块化打包工具 * require.context() 返回上下文构造函数webpackContext。存放了所有匹配到的模块信息 * 参一:设置配置模块目录 * 参二:表示是否匹配子目录 true 匹配 false 不匹配 * 参三:正则, 匹配文件的正则表达式。 * * webpackContext.keys() 返回所有匹配到模块的文件地址 【集合】 */ const webpackContext = require.context('./svg', false, /.svg$/); // // 相当于 req.keys().forEach(key => req(key)), req.keys()是匹配到的svg文件的路径数组 const requireAll = (requireContext) => { // requireContext.keys() 匹配的 文件路径数组 return requireContext.keys().map(requireContext) }; // // 得到一个完整解析的module数组 requireAll(webpackContext); // 实现:webpackApi方式自动化导入模块,代替 import...from方式```
运行icon/index.js
// msin.js import '@/icon/inde.js'
接下来就可以使用 svg-icon图标组件了