Vue.js通过组件处理Icon图标 Vue.js通过组件处理Icon图标

Icon图标处理方案记录一次对于想使用element-plus之外的图标，如何封装成一个组件，是本次记录的目标，希望在工作时能帮助自己处理图标问题。
分析，对于element-plus的图标可以通过el-icon来进行显示，而自定义图标需要自定义一个图标组件，用来显示自定义svg图标。
组件能力

显示外部svg图标(外链)
显示项目内的svg图标

图标组件封装思路用于展示的图标组件
创建 components/SvgIcon/index.vue：

??.svg-icon {width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }?.svg-external-icon {background-color: currentColor; mask-size: cover !important; display: inline-block; }?

判断资源是否是外部资源创建 utils/validate.js：

/** * 判断是否为外部资源 */export function isExternal(path) {return /^(https?:|mailto:|tel:)/.test(path)}

外部svg图标显示通过引入组件svg-icon，icon传递图标外链。

处理项目内svg图标

项目内src目录下创建 icons 文件夹,并导入svg图标文件
在 icons 下创建 index.js 文件

文件完成两件事

导入所有的svg图标
完成SvgIcon的全局注册

index.js 代码如下
参考文档依赖管理 | webpack 中文文档

import SvgIcon from '@/components/SvgIcon'?// 通过 require.context() 函数来创建自己的 contextconst svgRequire = require.context('./svg', false, /\.svg$/)// 此时返回一个 require 的函数，可以接受一个 request 的参数，用于 require 的导入。// 该函数提供了三个属性，可以通过 require.keys() 获取到所有的 svg 图标// 遍历图标，把图标作为 request 传入到 require 导入函数中，完成本地 svg 图标的导入svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon))?export default app => { app.component('svg-icon', SvgIcon)}

全局注册项目内图标 main.js 中引入该文件

...// 导入 svgIconimport installIcons from '@/icons'...installIcons(app)...

使用内部图标

// 用户名// 密码

使用 svg-sprite-loader 处理 svg 图标
svg-sprite-loader是webpack中专门处理svg图标的一个loader
安装： npm i --save-dev svg-sprite-loader@6.0.9
【Vue.js通过组件处理Icon图标】在vue.config.js 文件中配置loader

const path = require('path')function resolve(dir) { return path.join(__dirname, dir)}?module.exports = { chainWebpack(config) {// 设置 svg-sprite-loaderconfig.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() }}

这样即可处理内部的svg图标啦。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。