配置svg-icon

用法

<el-input type="text" auto-complete="off" placeholder="账号">
    <svg-icon slot="prefix" icon-class="user"/>
</el-input>

配置

1.开发依赖安装svg-sprite-loader

2.components中引入SvgIcon

3.增加src/icons/index.js

4.修改 vue.config.js（没有就增加这个文件）

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

5.main.js中

import '@/assets/icons' // icon