前端頁面svg優化webpack+svg-sprite-loader+vue（二）

銜接上一篇文章，這一篇繼續寫我在那個項目的優化，大圖的svg我經過了img src引入了項目，但是還有不少小的svg圖標須要引入，若是在用img 引入 過多的網絡請求形成不沒必要要的浪費，因而我有又開始做死了

svg-sprite-loader

由於我這個項目是 本身搭建的 webpack 使用的是vue框架，因此我很天然的想到 svg-sprite-loader 這個svg處理的神器，配置超級簡單，基本度娘都有標準的寫法，什麼？還讓我去百度，那我看你幹嗎。 好吧兄弟們，好很少說看代碼,咱們只須要在 rules 中加入這個配置

{
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include:[path.resolve('src/asset/svgSprite')],
        options:{
            symbolId:'icon-[name]'
        }
}
複製代碼

如今我給你們解釋下每一個的意思

path.resolve('src/asset/svgSprite') // 須要處理svg存放的目錄，這個目錄和我大圖svg是分開的哦~
symbolId:'icon-[name]' 就是咱們合併以後svg文件子類的id名稱
複製代碼

下面給你們看下項目run 以後的截圖就瞭解了

紅色箭頭所指就是我svg文件名 icon 是後來追加上去的 等等先別走，還有一點就完事了，你要關掉了後面的內容咋看。 注意若是項目中還用了 url-loader 那麼還須要加一段代碼

{
    test: /\.(png|jpg|gif|webp|woff|eot|ttf|svg)$/,
    use:{
        loader:'url-loader',
        options:{
            name:'img/[name].[ext]',
            limit:3000
        }
    },
    exclude:[path.resolve('src/asset/svgSprite')] // 這裏是須要加的，意思是不處理這個文件
   
},
複製代碼

這樣webpack的配置文件就修改完成了 接下來在 components 裏面建立一個文件夾 例如個人文件名稱是 svgIcon 裏面建立兩個文件 index.ts 和 svgIcon.vue 下面我放的是 vue+ts版的代碼，若是你們項目沒有用呢也不要灰心，我還會放一個普通版的

ts版

<template>
  <svg  :class="svgClass" 
        :style="{ 'width':`${width}rem`, 'height':`${height}rem` }" 
        aria-hidden="true" >
    <use :xlink:href="iconName" ref="svgRefs"></use>
  </svg>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop} from 'vue-property-decorator'; 
@Component
export default class svgIcon extends Vue { 
    name:string =  'svg-icon'
    @Prop(String) iconClass ;
    @Prop(String) className ;
    @Prop(Number) width ;
    @Prop(Number) height ;
    get iconName():string {
        return `#icon-${this.iconClass}`
    }
    get svgClass(): string{
        if (this.className) {
            return 'svg-icon ' + this.className
        } else {
            return 'svg-icon'
        }
    }  
}
</script>

<style scoped>
.svg-icon {  
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
複製代碼

普通版

svgIcon.vue

<template>
  <svg  :class="svgClass" 
        :style="{ 'width':`${width}rem`, 'height':`${height}rem` }" 
        aria-hidden="true" >
    <use :xlink:href="iconName" ref="svgRefs"></use>
  </svg>
</template>
<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    },
    width:{
        type:Number
    },
    height:{
        type:Number
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  },
  mounted(){      
  } 
}
</script>

<style scoped>
.svg-icon {  
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
複製代碼

最後是 index文件的內容

index.js
import Vue from 'vue'
import SvgIcon from './svgIcon.vue'
Vue.component('svg-icon',SvgIcon);

const requireAll = requireContext => 
{
    requireContext.keys().map(requireContext)
}

const req = require.context('./../../asset/svgSprite', false, /\.svg$/)
requireAll(req)
複製代碼

關於 require.context 是webpack導入文件的一種寫法，只能在webpack項目中用 最後在 vue項目的入口文件中加一句話就ok啦

import './components/svgIcon'
複製代碼

最後給你們舉個使用例子 由於咱們是全局註冊了因此用的時候只要像下面這樣就能夠啦

<svg-icon class="lls" icon-class="jingjingyeye" :width="4.46" :height="2.05"></svg-icon>
複製代碼

爲啥這就能夠了呢？我自問自答下，由於咱們開始在webpack中的配置他把咱們的svg所有注入到了咱們index.html 的 body 中了。看完隨手左側小手下，有問題你們就留言。看到我會回覆的。

尾

使用這種方式的好處不言而喻，惟一值得注意的問題就是咱們要注意svg的大小，若是文件太大就不要用了，畢竟這是把svg直接注入到index.html中的