话不多说,直接上封装步骤:
1. 首先,安装依赖(本次封装的 svg-icon 组件需要此依赖的配合 )
npm i [email protected]
2. 配置 vue.config.js
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
// 这个配置 是为了给 src 文件起别名 @,方便后面文件的导入
configureWebpack: {
// name: name,
resolve: {
alias: {
'@': resolve('src')
}
}
},
// 这个是 webpack 配置在 vue.config 里面的一个判断
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({
// 1.关键, [name][ext][hash]=>中括号前面表示文件名,后面表示 hash 名
symbolId: 'icon-[name]'
})
.end()
}
}
3. 创建文件 (下面就纯纯体力活了)
本次创建的文件都在 src 里面
3.1 src/icons
src/icons
- /svg # 保存图标
- /index.js # 注册全局组件
(1) icons 文件下的 svg 文件 就是 svg 图标,这个需自行去下载(如 iconfont 官网)
(2)index.js 文件配置
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
// register globally
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
3.2 utils/validate.js
/**
* @param {string} path
* @returns {Boolean}
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
3.3 componets/SvgIcon/index.vue 组件
(1)index.vue 配置
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<!-- svg 就是原生的 dom 标签 -->
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
import { isExternal } from '@/utils/validate'
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
isExternal() {
return isExternal(this.iconClass)
},
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
}
}
}
}
</script>
<style 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>
4. 在main.js中引入
import '@/icons'
5.使用
使用格式<svg-icon icon-class="文件名"/>
。这里的文件名就是在src/icons/svg下的文件名
到这就大功告成啦~~~
最后,如果在运行项目时出现错误 “Error: Cannot find module ‘webpack/lib/RuleSet”,可以参考下面这篇文章,可能有所帮助
关于 Error: Cannot find module ‘webpack/lib/RuleSet‘ 的详细解决方法(亲测有效)- 以及删除脚手架的方法_zzuli 山之涯海之角的博客-CSDN博客