@baizy/svgicon v0.0.2

use SvgIcon

• 安装 @baizy/svgicon && 安装 svg-sprite-loader 处理 svg 文件

$ npm install @baizy/svgicon -S
$ npm install svg-sprite-loader -D

• step 1 创建存放 svg 的文件夹

|- src
  |- icons
    |- svg // store svg
|- package.json
|- vue.config.js

• step 2 在 vue.config.js 创建一个新的 alias '@svg' 指向项目内 svg 的目录 && 修改对 svg 的解析

// vue.config.js

const path = require('path')
const resolve = dir => {
  return path.join(__dirname, dir)
}

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@svg': resolve('src/icons/svg')
      }
    }
  },
  chainWebpack: config => {
    config.module.rule('svg').uses.clear()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .use('svg-sprite')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
      .include.add(resolve('src/icons'))
      .end()
  }
}

• step 3 在 mian.js 中使用

// main.js

import SvgIcon from '@baizy/svgicon'
Vue.use(SvgIcon)

• step 4 把 svg 文件放入 src/icons/src

• step 5 使用

<svg-icon icon-class="dashboard" class-name='custom-class'></svg-icon>
icon-class // svg 文件的文件名
class-name // 自定义 class