目录结构
背景:
在我们的项目中所使用的 icon 图标,一共分为两类:
1、element-ui等第三方组件库icon
2、自定义的 svg 图标
对于element-plus的图标我们可以直接通过 el-icon 来显示,但是自定义图标的话,我们暂时还缺少新显示的方式,所以说我们需要一个自定义的组件,来显示我们自定义的 svg 图标
那么这种自定义组件处理 自定义 svg 图标的形式,就是我们在面临这种问题时的通用解决方案
那么对于这个组件的话,他就需要拥有两种能力
1、显示外部的svg图标(http外链)
2、显示项目内的svg图标
基于以上概念,我们可以创建出以下对应代码:
封装通用组件
- 1、创建 components/SvgIcon/index.vue:
<template>
<!-- 展示外部图标 -->
<div
v-if="isExternal"
:style="styleExternalIcon"
class="svg-external-icon svg-icon"
:class="className"
></div>
<!-- 展示内部图标 -->
<svg v-else class="svg-icon" :class="className" aria-hidden="true">
<use :xlink:href="iconName" />
</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-repat 50% 50%`,
'-webkit-mask': `url(${props.icon}) no-repat 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>
- 2、创建utils/validdate.js:
/**
* 判断是否为外部资源
* @param {*} path
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
- 3、使用(这里还需要单独局部引入,看下面写完就不需要单独引入,直接可以使用了)
<sapn class="svg-container">
<svg-icon icon="https://xxxx.svg"></svg-icon>
</span>
处理内部图标(本地svg)
- 1、在src根目录下创建icons文件夹,在icons下创建index.js文件,该文件中需要完成两件事:
* 1-1、导入所有的svg图标
* 2-2、完成SvgIcon的全局注册 - 2、index.js中
// 1.导入所有的svg 图标
// 2.完成SvgIcon 的全局注册
import SvgIcon from '@/components/SvgIcon'
const svgRequire = require.context('./svg', false, /\.svg$/)
// 此时返回了一个 require函数(svgRequire),可以接收一个 request的参数,用于require的导入
// 该函数提供了三个属性,可以通过 svgRequire.keys() 获得所有的 svg 图标
// 遍历图标,把图标作为 request 参数传入到 svgRequire 导入函数中,完成本地svg 图标的导入
svgRequire.keys().forEach((svgIcon) => svgRequire(svgIcon))
export default (app) => {
app.component('svg-icon', SvgIcon)
}
- 3、main.js中完成全局注册
// 导入 svgIcon
import installIcons from '@/icons'
const app = createApp(App)
installIcons(app)
- 4、使用本地图标,直接传icon名称
<sapn class="svg-container">
<svg-icon icon="password"></svg-icon>
</span>
使用svg-sprite-loader处理svg图标
做到上面你会发现本地图标还无法展示,这是因为我们还需要处理一下
svg-sprite-loader 是 webpack 中专门用来处理 svg 图标的一个loader
- 1、下载该loader
npm i --save-dev svg-sprite-loader@6.0.9
- 2、在vue.config.js文件,新增如下配置:
const { defineConfig } = require('@vue/cli-service')
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = defineConfig({
chainWebpack(config) {
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()
}
})
效果