前置步骤:添加依赖
yarn add svg-sprite-loader -D
[可选] yarn add svgo svgo-loader -D
依赖说明:
sprites 会被自动渲染和注入页面,您只需通过 <svg><use xlink:href="#id"></use></svg>
工作原理是: 利用svg的
symbol
元素,将每个icon包括在symbol
中,通过use
元素使用该symbol
.
用于精简 svg 代码
第一步:创建图标库文件夹
第二步:配置 vue.config.js
const { resolve } = require('path')
module.exports = {
chainWebpack: config => {
// 在 svg 规则中排除我们的图标库文件夹目录
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
// 创建 icons 规则,设置文件夹包含我们的图标库文件夹目录
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()
.use('svgo-loader')
.loader('svgo-loader')
.options({
plugins: [{ removeXMLNS: true }]
})
.end()
}
}
第三步: 编写 SvgIcon 组件
<template>
<svg class="svg-icon"
aria-hidden="true"
v-on="$listeners"
:style="svgStyles">
<use :xlink:href="iconName" />
</svg>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component
export default class SVGIcon extends Vue {
@Prop({ required: true })
readonly name!: string
@Prop({ default: 20 })
readonly size!: number
@Prop(String)
readonly color!: string
get iconName() {
return `#icon-${this.name}`
}
get svgStyles() {
return {
width: this.size + 'px',
height: this.size + 'px',
fill: this.color
}
}
}
</script>
第四部: 在入口文件 main.js 批量引入图标,并注册全局组件
/**
* 注册SVG图标库和图标组件
* @param Vue
*/
function registerMZIcon(Vue: VueConstructor) {
const svgs = require.context('@/icons', false, /\.svg$/)
const requireAll = (requireContext: __WebpackModuleApi.RequireContext) =>
requireContext.keys().map(requireContext)
requireAll(svgs)
Vue.component('mz-icon', SvgIcon)
}
效果:
你会在 body 的第一个子 dom 看到下图效果
使用 svg 图标组件的地方
总结
这种方法有点像 css 的 class, 先声明了样式(图标),在挂载的这个 class(use[xlink:href]) 的 dom 上就会有同样的样式(图标)。