preface

  • Sprite picture: If a new icon is added, the original picture needs to be changed. It may also affect the previously positioned picture by mistake, which makes maintenance difficult
  • Iconfont: Addresses the above pain points

Iconfont is used in three ways

unicode

  • advantage
    • Best compatibility, support IE6 +
    • Support to dynamically adjust icon size, color and so on according to the font
  • disadvantage
    • Multicolor ICONS are not supported
    • Fonts are rendered slightly differently on different devices, text is rendered differently on different browsers and systems, and the position and size of the display can be affected by CSS attributes such as font-size, line-height, word-spacing, and so on, which can be difficult to adjust
    • Writing is not intuitive and semantic is not clear. Just look at  unicode and you have no idea what it stands for
  • use 
    <i class="iconfont">&#xe604;</i>
Copy the code

font-class

  • advantage
    • It is compatible with Internet Explorer 8+
    • It is more intuitive to write than Unicode. It’s easy to tell what the icon is
  • use 
    <i class="iconfont icon-xxx"></i>
Copy the code
  • For example, using small ICONS in icon Ali icon library in Vue project – by Liao Ke

Symbol: SVG-icon Use form

  • advantage
    • Support for multi-color ICONS, no longer limited by monochrome
    • Support for font-size and color adjustments like fonts
    • Support ie 9 +
    • Animations can be implemented using CSS
    • Reducing HTTP requests
    • Vector, zoom without distortion
    • You can finely control every part of an SVG icon
  • use 
    <svg class="svg-icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>
Copy the code
  • Such as vue- CLI through symbol reference ali iconfont icon – the author does not want to do design of the front end is not a good siege lion (need to introduce more iconfont.js)

Create the icon-Component

Icon component: Components /SvgIcon

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

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

<style>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15 em;
    fill: currentColor;
    overflow: hidden;
  }
</style>
Copy the code

Using this component

import IconSvg from '@/components/SvgIcon'

// Register SvgIcon globally
Vue.component('svg-icon', SvgIcon)
Copy the code
// used in code<svg-icon icon-class="password" />
Copy the code
  • disadvantages
    1. It is a section of JAVASCRIPT to generate SVG code, all ICONS are not intuitive
    2. Can’t load on demand, can’t dynamically generate SVG-Sprite based on which SVGS we use
    3. It is not very customizable, and typically exported SVG contains a lot of useless information, such as editor source information, comments, and so on
    4. To add unfriendly, custom SVG ICONS, you can only upload them to iconFont and put the original ICONS in a project library, and then download them again, which is tedious

To optimize the

svg-sprite

  • Use SVG-Sprite to solve the above problems: SVG-Sprite-loader splashes the loaded SVG images into Sprite images and places them on the page. Other places use

    reuse

    • svg-sprite-loader
    • NPM install svG-sprite-loader -d

  • Problem: VuE-CLI by default uses urL-loader for SVG processing. The introduction of SVG-sprite-loader may cause some conflicts

  • Solution: Place the file in the specified folder and use include and exclude to solve the problem

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

  • Use the ICONS

    // Single import
import '@/src/icons/qq.svg;
Copy the code
    // Batch import
const requireAll = requireContext= > requireContext.keys().map(requireContext)
const req = require.context('./svg'.false./\.svg$/)
requireAll(req)
Copy the code
    // symbolId was prefixed with 'icon-' to be consistent with the Ali icon name<svg><use xlink:href="#icon-qq" /></svg>
Copy the code

Optimization in VUE (SVG-Sprite)

NPM install svG-sprite-loader -d

  • Vue. Config. js: After modification, restart the project

    const { resolve } = require('path');

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()
  },
};
Copy the code

  • src/icons/index.js

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

// Register the icon component globally
Vue.component('svg-icon', SvgIcon)

// Import all the. SVG files in the SRC/ICONS/SVG directory in batches
const req = require.context('./svg'.false./\.svg$/)
const requireAll = requireContext= > requireContext.keys().map(requireContext)
requireAll(req)
Copy the code

  • Using the component

    <svg-icon icon-class="qq" />
Copy the code

  • Reference: SVG – Sprite -loader tutorial by Zhao Yongsheng

SVG compression tool: Svgo

  • The problem: While iconfont’s exported SVG content is pretty minimal, you’ll find it’s still loaded with useless information, creating unnecessary redundancy. Even the SVG exported by iconfont is like this, let alone those exported by designers
  • The SVG sprite-loader will only fetch the content of path in SVG, and will not fetch any other information: Redundant information generated in the PATH, such as comments, will not be processed by the SVG-Sprite-loader
  • Further solutions:svgo
    • Install NPM install -g svgo
    • use
      • Single file compression: svGO before compression svG-o after compression SVG
      • Multi-file compression: Svgo -f folder (before compression) -O folder (after compression)

reference

  • Flower Shorts: Hand to hand, with your elegant use of icon
  • Liao Ke: Use small ICONS from Icon Ali’s icon library in vUE project
  • Don’t want to do the design of the front end is not a good siege lion: vue-CLI references the Ali iconfont icon through symbol
  • Zhao Yongsheng: How to use SVG – Sprite -loader