vue svg sprite loader_frontend(一)vue cli3使用svg-sprite-loader

iconfont symbol对比svg-sprite-loader

iconfont symbol在SVG使用上简单，但是对于后期修改不方便。
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关
目前symbol方式的iconfont:

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
• 兼容性较差，支持 ie9+,及现代浏览器。
• 浏览器渲染svg的性能一般，还不如png。

具体操作步骤

1. 首先在iconfont官网批量下载svg图片，可以操作

image.png

image.png

image.png

1. 将下载好的SVG放在目录src/icons/svg
2. 安装svg-sprite-loader

yarn add svg-sprite-loader --dev

1. 配置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]'
            })
    }
}

5.在compoents下新建SvgIcon组件index.vue

image.png

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"/>
  </svg>
</template>
 
<script>
  export default {
    name: 'SvgIcon',
    props: {
      iconClass: {
        type: String,
        required: 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>

1. 在src/icons下新建index.js

image.png

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

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

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

1. 在main.ts下添加import '@/icons'

image.png

OK,完成以上配置即可添加svg

<svg-icon icon-class="zhuye" />