Vue实战034：使用SVG图标详解

我们在开发项目的时候经常会用到一些图标，前面我们用的基本都是图标字体，如Font Awesome字体图标 、iconFont图标等，他们都提供了非常丰富的字体图标库，基本可以满足我们项目开发的需求，即然都能满足需求为什么还要用SVG呢，因为SVG有绝对的优势。

Vue实战开发008:引入Font Awesome字体图标

Vue实战开发016:引入iconfont图标库图标,

iconfont和SVG的区别

1，iconFont采用字体渲染，放大容易失真，会出现明细的锯齿；SVG采用图形渲染，不管怎么放大都不会失真。

2，iconFont图标色调单一，只支持单色；SVG可以做出生动又复杂的图标。

3，iconFont载入需附带很多其他资源，且文件较大影响加载速度；SVG文件小且单个引用，灵活快捷，可以减少HTTP请求。

SVG是什么

SVG是一种可缩放的矢量图形（全称Scalable Vector Graphics），基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式，支持交互的和动态可以在SVG文件中嵌入动画元素或通过脚本来定义动画。

如何使用SVG

在Vue中，使用SVG我们可以通过svg-sprite-loader插件来实现，所以这里我们先来安装svg-sprite-loader插件，执行命令：npm install svg-sprite-loader --save即可将svg-sprite-loader插件安装到项目中（当前版本4.1.6）。

定义SvgIcon组件

在定义一个SvgIcon组件，在components目录中创建一个SvgIcon.vue文件，定义svg标签，通过use在SVG文档内取得目标节点,并在别的地方复制它们，然后将其粘贴到use元素的位置，通过xlink:href属性定义读取和显示被链接的资源。

<template>
 <svg :class="svgClass" aria-hidden="true">
 <use :xlink:href="iconName"/>
 </svg>
</template>
<script>
export default {
 name: 'SvgIcon',
 props: {
 iconClass: {
 type: String,
 required: true
 },
 className: {
 type: String,
 default: ''
 }
 },
 computed: {
 iconName() {
 return `#icon-${this.iconClass}`
 },
 svgClass() {
 if (this.className) {
 return 'svg-icon ' + this.className
 } else {
 return 'svg-icon'
 }
 }
 },
}
</script>
<style scoped>
.svg-icon {
 width:100%;
 height:100%;
 vertical-align: middle;
 fill: currentColor;
 overflow: hidden;
}
</style>

注册组件

定义好组件之后我们就要将该组件进行全局注册，在存放svg位置定义即可，这里我在assets目录下定义了icons目录，svg目录用来存放对应的svg文件，再icons目录中创建一个index.js文件来配置全局使用以及名字处理。

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// 引入组件
// 全局注册组件
Vue.component('svg-icon', SvgIcon)
// 使用require.context自动导入文件
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

全局引入

刚才我们注册了组件，你可以在想要使用的地方单独引入该文件即可 使用SvgIcon组件，当然你也可以将其全局注册，这样就不用在组建中引入了，我们只要在main.js中引入刚才的js文件即可：import '@/assets/icons/index.js'

更新webpack配置（重点）

Vue中默认情况下会使用 url-loader 对svg进行处理，所以在安装svg-sprite-loader之后我们要对配置进行修改（先清除默认的处理方案，在自定义新的处理方案），在Vue2.0中可以直接在webpack.base.conf.js文件中进行配置，现在我们用的是Vue3.0，所以我们在跟目录下新建一个vue.config.js文件来配置，配置如下图所示：

const path = require('path')
function resolve (dir) {
 return path.join(__dirname, dir)
}
module.exports = {
 chainWebpack: config => {
 config.module
 .rule('svg') //找到svg
 .uses.clear() //清除svg
 config.module
 .rule('svg') //定义新的svg
 .test(/\.svg$/)
 .use('svg-sprite')
 .loader('svg-sprite-loader') //定义loader为svg-sprite-loader
 .include.add(resolve('src/assets/icons')) //指定处理文件夹下的文件
 .options({
 symbolId: 'icon-[name]'
 })
 .end()
 }
}

SvgIcon组件使用

到目前为止我们已经全局注册好了组件，现在我们只要在需要使用到svg图标的地方引入改组件即可，通过svg-icon标签来引入标签，icon-class传入制定的图标名称即可，如引入用户头像（<svg-icon icon-class="user"/>即可）。

<template>
 <div class="home">
 <div class="svg-container">
 <svg-icon icon-class="user"/>
 </div>
 </div>
</template>

默认情况下，显示的是svg的原图大小，所以我在svg-icon外面定义了一个div，用来控制图案的大小，当然你也可以直接在组件中定义图标的大小，看项目需求吧。