本文目的:用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的模式进行编译