• 一、svg的加载和压缩处理方案
  • 1. svg-sprite-loader安装和使用
  • 2. svgo-loader 压缩优化

一、svg的加载和压缩处理方案

1. svg-sprite-loader安装和使用

• 下载安装 loader

  npm i svg-sprite-loader@6.0.9 -D

• 创建 vue.config.js 文件，新增如下配置

    const path = require('path');
    const resolve = (dir) => path.join(__dirname, dir)
    module.exports = {
      chainWebpack(config) {
        // 设置 svg-sprite-loader
        config.module.rule('svg').exclude.add(resolve('src/assets/icon')).end()
        // 添加svg-sprite-loader
        config.module
          .rule('icons')
          .test(/\.svg$/)
          .include.add(resolve('src/assets/icon'))
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]'
          })
          .end()
      }
    }

• 注意：

  • 图标的位置，icons 下有个 svg 的文件夹，里面才是存放 svg 的真实路径
  • vue3 设置 svg-sprite-loader 需要请清除原来的配置
  • options 里的 symbolId，如果你打算存的svg文件是 icon-name 格式的，symbolId 就写成"[name]" 如果 svg 文件起名是 name，symbolId 就写成"icon-[name]"

• webpack配置参考

• npm链接

• 参考案例链接

2. svgo-loader 压缩优化

svg 通常会有一些冗余信息导致影响体积，可以使用 svgo-loader 进行优化

• 下载安装

  npm i svgo-loader -D 或者 yarn add svgo-loader -D

• vue.config.js配置

      module.exports = {
        chainWebpack(config) {
        // 设置 svg-sprite-loader
        config.module.rule('svg').exclude.add(resolve('src/assets/icon')).end()
        // 添加svg-sprite-loader
        config.module
          .rule('icons')
          .test(/\.svg$/)
          .include.add(resolve('src/assets/icon'))
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]'
          })
          .end()
          // 接在上面的配置后面添加
          .use('svg-loader')
          .loader('svgo-loader')
          .end()
      }
    }