Vue使用SVG图标

一、基本概念

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，可以在不失真的情况下放大缩小。图标也可以以 SVG 格式进行储存和传播，且在不同的设备上进行缩放仍可保持清晰度。

Vue.js 是一款渐进式的 JavaScript 框架，允许开发者使用 MVVM 模式开发单页面应用。

二、为什么使用SVG图标

使用SVG图标相比于传统的图标格式，具有如下优势：

1、SVG 可以随着视口的尺寸缩放，且不失真。

2、SVG 文本和图形元素可以通过Javascript DOM API 或 Vue 模板动态修改，无需重新生成图像文件。

3、集中精力设计一组 SVG 图标可简化设计师和开发者之间的沟通交流。

三、如何使用SVG图标

在 Vue.js 中使用 SVG 图标的步骤如下：

1. 把 SVG 图标拷贝到 Vue 项目中

把 SVG 图标文件拷贝到 Vue 项目中的某个文件夹。例如，我将它们保存在 src/icons 文件夹中:

  ├─src/
  │  ├─assets/
  │  ├─components/
  │  ├─icons/
  │  │  ├─add.svg
  │  │  └─delete.svg
  │  └─views/
  └─public/

2. 用 vue-svg-icon-loader 对 SVG 进行处理

运行命令 npm install vue-svg-icon-loader -D

  // webpack.config.js
  module.exports = {
    module: {
      rules: [
        {
          test: /\.svg$/,
          loader: 'vue-svg-icon-loader'
        }
      ]
    }
  }

3. 创建一个全局图标注册组件

在 Vue 应用程序中，使用全局图标组件可以轻松包含 SVG 图标：

  // globalSvgIcon.js
  import Vue from 'vue'
  // require.context() 是 webpack 的 API，动态载入符合规则的文件。
  const requireAll = requireContext => requireContext.keys().map(requireContext)
  const req = require.context('@/icons', false, /\.svg$/)
  requireAll(req)
  // 创建全局组件
  Vue.component('svg-icon', {
    template: '
  ',
    props: {
      iconClass: {
        type: String,
        required: true
      },
      className: {
        type: String,
        default: ''
      },
      styleObj: {
        type: Object,
        default: () => ({})
      }
    },
    computed: {
      iconName() {
        return \`#\${this.iconClass}\`
      },
      svgClass() {
        if (this.className) {
          return \`svg-icon \${this.className}\`
        } else {
          return 'svg-icon'
        }
      },
      svgStyle() {
        return this.styleObj
      }
    }
  })

并把这个注册组件在主入口main.js中导入：

  import Vue from 'vue'
  import App from './App.vue'
  import './globalSvgIcon.js' // 引入全局svg-icon组件
  Vue.config.productionTip = false

  new Vue({
    render: h => h(App)
  }).$mount('#app')

4. 在模板中使用图标组件

现在，你就可以在模板文件中使用自定义的 svg-icon 组件进行图标的使用：

其中 icon-class 属性的值是 SVG 图标的文件名（不包含后缀名）。

四、SVG图标的优化

在使用SVG图标时，可能会遇到以下情况：

1、SVG 图标文件较大，影响网页加载速度；

2、SVG 图标产生了不必要的 path 数量。

1. 减小SVG文件大小

对于 SVG 图标体积较大的问题，可使用 SVG 压缩工具进行压缩。

SVGO (SVG Optimizer) 是一款能够自动清理优化 SVG 文件的工具，可以根据不同的优化规则我们可以压缩 SVG 文件的大小。

2. SVG sprite

SVG Sprite 技术将一组 SVG 图标文件合并成单个 SVG 文件，访问时直接通过 id 获取相应的图标，大幅减小了HTTP请求数量。

vue-cli3（及以上）中有预设的 webpack 插件可以处理 SVG Sprite 。

五、小结

Vue.js与SVG结合使用可以使网站更容易管理和维护，大大提高了编码效率和开发质量。