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 代码如下
参考文档依赖管理 | webpack 中文文档
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图标啦。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
