前端页面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中的