Vue中優雅的使用 icon字體圖標

一，components路徑下創建一個IconSvg.vue組件，內容如下：

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

<script>
  export default {
    name: 'icon-svg',
    props: {
      iconClass: {
        type: String,
        required: true
      }
    },
    computed: {
      iconName() {
        return `#icon-${this.iconClass}`
      }
    }
  }
</script>

<style>
  .svg-icon {
    width: 6em;
    height: 6em;
    vertical-align: -0.15em;
    fill: blue;
    overflow: hidden;
  }
</style>

二，在assets路徑下創建icons文件夾，裏面創建svg文件夾和index.js，把svg文件導入svg文件夾下

index.js裏面的內容：

import Vue from 'vue'
import IconSvg from '@/components/IconSvg'

Vue.component('icon-svg',IconSvg)


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

三，在入口文件main.js中導入index.js

import '../src/assets/icons/index'

四，安裝svg-sprite-loader

npm install svg-sprite-loader -D

配置：webpack.base.conf.js，內容如下；

{
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/assets/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/assets/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

五，在組件中使用，

<icon-svg icon-class="book"></icon-svg>

更多的配置可以參考：https://juejin.im/post/59bb864b5188257e7a427c09#heading-10