Vue.js通过组件处理Icon图标
Icon图标处理方案
记录一次对于想使用element-plus之外的图标,如何封装成一个组件,是本次记录的目标,希望在工作时能帮助自己处理图标问题。
分析,对于element-plus的图标可以通过el-icon来进行显示,而自定义图标需要自定义一个图标组件,用来显示自定义svg图标。
组件能力
- 显示外部svg图标(外链)
- 显示项目内的svg图标
图标组件封装思路
用于展示的图标组件
创建 components/SvgIcon/index.vue
:
<template> <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" :class="className" /> <svg v-else class="svg-icon" :class="className" aria-hidden="true"> <use :xlink:href="iconName" rel="external nofollow" /> </svg> </template> <script setup> import { isExternal as external } from '@/utils/validate' import { defineProps, computed } from 'vue' const props = defineProps({ // icon图标 icon: { type: String, required: true }, // 图标类名 className: { type: String, default: '' } }) /** * 判断是否为外部图标 */ const isExternal = computed(() => external(props.icon)) /** * 外部图标样式 */ const styleExternalIcon = computed(() => ({ mask: `url(${props.icon}) no-repeat 50% 50%`, '-webkit-mask': `url(${props.icon}) no-repeat 50% 50%` })) /** * 项目内图标 */ const iconName = computed(() => `#icon-${props.icon}`) </script> <style lang='scss' scoped> .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; } </style>
判断资源是否是外部资源
创建 utils/validate.js
:
/** * 判断是否为外部资源 */ export function isExternal(path) { return /^(https?:|mailto:|tel:)/.test(path) }
外部svg图标显示
通过引入组件svg-icon,icon传递图标外链。
<span class="svg-container"> <svg-icon icon="https://xxx.svg"></svg-icon> </span>
处理项目内svg图标
- 项目内src目录下创建 icons 文件夹,并导入svg图标文件
- 在 icons 下创建 index.js 文件
文件完成两件事
- 导入所有的svg图标
- 完成SvgIcon的全局注册
index.js 代码如下
import SvgIcon from '@/components/SvgIcon' // 通过 require.context() 函数来创建自己的 context const 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 中引入该文件
... // 导入 svgIcon import installIcons from '@/icons' ... installIcons(app) ...
使用内部图标
// 用户名 <svg-icon icon="user" /> // 密码 <svg-icon icon="password" />
使用 svg-sprite-loader
处理 svg 图标
svg-sprite-loader
是webpack
中专门处理svg图标的一个loader
安装: npm i --save-dev svg-sprite-loader@6.0.9
在vue.config.js
文件中配置loader
const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack(config) { // 设置 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() } }
这样即可处理内部的svg图标啦。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)