vue中使用svg

在使用vue開發項目時，會遇到很多使用圖標的場景。以使用阿里圖標為例，假如你的項目中圖標很固定，以后都不會變了，那么隨便選擇哪種方式的圖標都可以。但是如果項目中圖標會變，時不時的變個圖標或者新增、減少一個圖標，比較靈活的場景下使用svg會比較方便一些。

1、安裝包

npm install svg-sprite-loader --save-dev

2、項目中使用的是vue-cli2手腳架的話，配置如下：

在build文件夾下找到webpack.bae.conf.js，

module: {
    rules: [
         test: '/\.svg$/',
         include: [reslove('src/icon')],
         loader: ''svg-sprite-loader,
         options: {
              symboId: 'icon-[name]'       
        }          
    ]

然后在找到如下代碼，加上這一行 'exclude: [resolve('src/icons')],'

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

使用cli3配置如下：

在新建的vue.config.js中，添加以下代碼

const path = require('path')
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    chainWebpack(config){
        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、在src目錄下新建文件夾icons，把所有svg文件放進去，然后再新建index.js文件，獲取icons目錄下的所有svg文件

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

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

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

4、在3步驟，引入了SvgIcon組件，這個需要自己手寫代碼如下

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
      <use :href="iconName" />
  </svg>
</template>

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

5、在main.js引入

//全局使用svg
import './icons'

6、使用

<svg-icon :iconName='location' />