SVG图标使用指南

可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。

SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。

SVG的优势：

和传统的点阵图像模式，像JPEG和PNG不同，SVG格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容。

VUE项目中使用SVG图标：

一、引入项目中的svg文件（打包到项目中）：

1、这里要使用到 svg-sprite-loader 这个插件， 它是一个webpack loader ，可以将多个svg打包成 svg-sprite 。

npm install svg-sprite-loader

2、安装svg-sprite-loader后，vue.config.js中添加以下配置：

//vue.config.js
module.exports = {
  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({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

3、创建SvgIcon组件

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg >
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  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: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

4、在src目录下创建icons目录，把需要用到的svg资源文件放到icons/svg文件夹中（对应上述svg-sprite-loader配置）,创建index.js文件，自动引入svg资源（使用到webpack的一个API：require.context）

//src/icons/index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件
import generateIconsView from './generateIconsView.js'
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
const iconMap = requireAll(req)

generateIconsView.generate(iconMap) // just for @/views/icons , you can delete it

5、在src/main.js中引入src/icons/index.jssrc/icons/index.js，就可以正常使用本地svg资源

// src/main.js中引入src/icons/index.js 
import './icons' // svg-icon

6、引入后所有用到的svg资源都会以symbol标签的形式内联到body内，使用时只需设置SvgIcon组件的iconClass属性跟svg资源文件名相同即可正常显示

参考：

Svg Icon 图标 | vue-element-admin

手摸手，带你优雅的使用 icon - 掘金

 

二、引入在线的svg文件：

使用 <object> 标签

<object type="image/svg+xml" data="sample.svg"></object>

// 在这种情况下，SVG 在图像搜索中将不可用。要解决此问题，您可以使用 <img> 标记作为后备：

<object type="image/svg+xml" data="sample.svg">

<img src="sample.svg" />

</object>

参考：How to Add Animated SVG to Your Website | SVGator Help

三、将动画 SVG 添加到 Vue.js：

将svg文件内的html代码和动画javascript代码分别复制到vue组件的template和script中，此方法比较麻烦，而使用 <object> 标签引入在线svg，动画也可正常显示，

故通常情况推荐使用<object> 标签引入，如遇特殊情况，可考虑此方案。

参考：How to Add Animated SVG to Vue.js? | SVGator Help