vue-cli svg-sprite-loader

在vue-cli中使用svg-sprite-loader

新手上路，有什么不对的地方请不吝赐教

svg-sprite-loader是干啥的？

当你有很多的svg图片的时候，你可以使用svg-sprite-loader来把图片打包成雪碧图（不是心飞扬哪个雪碧），然后使用时每个svg对应一个name标识。

svg-sprite-loader安装

npm install svg-sprite-loader --save-dev

当然你也可以直接package.json文件里面加"svg-sprite-loader": “^4.1.6”（目前最新版本4.1），然后在终端 npm install

  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-eslint": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "less-loader": "^5.0.0",
    "lint-staged": "^9.4.2",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "svg-sprite-loader": "^4.1.6"
  },

配置vue-config.js

module.exports = {
  publicPath: '/', // 基本路径
  outputDir: 'dist', // 输出文件目录
  lintOnSave: true, // eslint-loader 是否在保存的时候检查
  productionSourceMap: true, // 生产环境是否生成 sourceMap 文件
  chainWebpack: config => {
    // 配置路劲别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('_c', resolve('src/components'))
    config.module.rules.delete('svg')
    config.module
      .rule('svg-smart')
      .test(/\.svg$/)
      .include
      .add(resolve('src/assets/svgs'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  }
}

include.add(resolve(‘src/assets/svgs’))这个就是你要检测svg的那个路径，如果还有别的路径接着add就好，下图就是我的svg路径，还有一个index.js文件后面会讲的

symbolId: 'icon-[name]'这个就是最后使用的时候，每个图片的引用名称，icon-是前缀，name是文件名

创建一个svg的组件

接收两个参数：

• iconClass （svg文件的名字，会给你拼接成icon-文件名，应用于svg use ）
• className （你需要另外加的样式名，然后把样式写在下面style里）

在组件里面使用svg组件

在svg文件包外创建index.js文件

没错就是上面那个图里面的那个index.js（写到这，不行回去重新排版）
下面就是里面内容

import Vue from 'vue'
import SvgIcon from '_c/svg/iconSvg'// svg组件，就是刚刚创建的哪个

Vue.component('svg-icon', SvgIcon)  // 全局注册组件
// const requireAll = requireContext => requireContext.keys().map(requireContext)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

require.context就是一个一次全部引入，那么多svg图标不可能一个个都require
它有三个参数：

• 第一个是引入模块的路径，我的是./svg路径，就是上面图片的svg目录
• 第二个是bool类型，是否遍历子目录
• 第三个就是一个正则表达式来匹配文件，匹配.svg也就是文件后缀

最最最重要的事情

完成了上面一堆事情之后，我们还需要在main.js里面引用这个index.js文件