Connecting with the previous article, this article continues to write about my optimization in that project. I introduced the large SVG through IMG SRC, but there are still many small SVG ICONS that need to be introduced. If too many network requests are introduced in IMG, it will not be unnecessary waste, so I started to die again

svg-sprite-loader

Since I built webpack by myself and used VUE framework for this project, I naturally thought of SVG-Sprite-loader, a magic device for SVG processing, with super simple configuration and basic Baidu standard writing method. What? Still let me go to Baidu, that I see you why. All right guys, just look at the code, we just need to add this configuration to rules

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

Now let me explain to you what each of these means

path.resolve('src/asset/svgSprite'// The directory in which SVG is stored is separate from that in my image. ~ symbolId:'icon-[name]'This is the ID name of our merged SVG file subclassCopy the code

Here is a screenshot of the project RUN

Pay attention to 

{
    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'}}}}Copy the code

So the webpack configuration file has been modified and I’m going to create a folder inside components for example my file name is svgIcon and I’m going to create two files index.ts and svgicon. vue and I’m going to put the code for vue+ TS, If it doesn’t work, don’t be discouraged, I’ll put up a regular version

Ts edition

<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>Copy the code

Normal version

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>Copy the code

Finally, the contents of the index file

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)
Copy the code

Context is a webpack import file and can only be used in webpack projects. At the end of the vue project entry file add a sentence ok

import './components/svgIcon'
Copy the code

And then I’ll give you an example of how to use it because we’re globally registered so when you use it you just have to do something like this

<svg-icon class="lls" icon-class="jingjingyeye" :width="4.46" :height="2.05"></svg-icon>
Copy the code

Why is that ok? I asked myself, since we started configuring webpack to inject all of our SVG into the body of our index.html. After reading with the left hand, you have a question on the message. I’ll get back to you when I see it.

The tail

There are obvious benefits to using this approach, the only thing worth noting is the size of SVG. If the file is too large, don’t use it. After all, this is injecting SVG directly into index.html