vue使用icon圖標：svg-sprite-loader

每次在項目中使用icon的圖標時，老是以爲引入很長的路徑很麻煩，或許須要將它們寫成一個個僞元素。最近發現了svg-sprite-loader能夠解決你的煩惱。

工做原理

svg-sprite-loader其實是把全部的svg打包成一張雪碧圖，相似下圖。每個symbol裝置對應的icon，
再經過<use xlink:href="#xxx"/>來顯示你所需的icon。

symbolzhuan

---

1.安裝依賴及修改配置

1.1 npm i svg-sprite-loader
1.2 在bulid/webpack.base.conf.js配置文件中增長一條rules

{
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      }

注意在vue-cli構建的項目中會默認有一條包含有svg格式的圖片轉成base64的rules，因此須要再稍做修改

修改前，若是同時使用這兩條規則會使項目啓動失敗。
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  }

若是一個項目中有須要.svg用做圖片也有用做icon的能夠這樣修改

用做圖片的

{
  test: /\.svg$/,
  loader: 'url-loader',
  outputPath: path.resolve(__dirname, ./assets/images/svg)//存放icon的路徑
}

用做icon的.
include:存放icon的路徑

{
  test: /\.svg$/,
  loader: 'svg-sprite-loader',
  include: [resolve('src/icons')],
  options: {
      symbolId: 'icon-[name]'
    }
}

---

2.在components/svgIcon 建立組件svgIcon

<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>

---

3.保存svg圖片和全局註冊svgIcon

3.1 icons/svg 用來保存圖片
3.2 index.js 動態引入svg。做用在於雖然全局組冊了svg可是在當前組件調用某個svg仍是須要import這個文件，
咱們能夠經過webpack的context.require()來解決這個問題
require.context('./svg', false, /.svg$/),第一個參數是引入文件所在的文件夾，第二個是否引入子文件夾，第三個是匹配規則，
經過這個方法就能夠動態的引入svg文件了。
.keys()返回svg數組
.map()再獲取和上下文匹配的svg文件

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg組件
// register globally
Vue.component('svg-icon', SvgIcon)

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

---

4.在入口文件引入 @/icons

---

5.引用組件

<svg-icon icon-class="name"/> name爲svg文件名

閱讀這篇文章後再試着寫demo,可讓你的理解更加透徹
懶人神器：svg-sprite-loader實現本身的Icon組件