antdv 引入 svg

本文目的：用antdv 的a-icon 標籤顯示svg圖標，這樣引入的好處是svg樣式與a-icon圖標樣式一致，統一管理

antdv 組件官網icon說明：鏈接

引入第三方下載的svg圖標：Iconfont

vue.config.js中需要配置 vue-svg-icon-loader，這個loader的作用是將svg圖標轉換成可直接引入(import)的vue組件，配置內容：

chainWebpack: config => {
    config.resolve.alias.set('@$', resolve('src'))

    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .oneOf('inline')
      .resourceQuery(/inline/)
      .use('vue-svg-icon-loader')
      .loader('vue-svg-icon-loader')
      .end()
      .end()
      .oneOf('external')
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'assets/[name].[hash:8].[ext]'
      })
}

vue文件中代碼：

import TreeIcon from '@/assets/icons/tree-right.svg?inline'

export default {
  name: 'Hello',
  data () {
    return {
      TreeIcon
    }
  },
  render () {
    return (
       <a-icon component={TreeIcon} />   
    )
  }
}

需要注意的是末尾一定要加上?inline，這樣編譯器才能按照inline的模式進行編譯