关于ant-design图标的按需引入，网上也很多文章，不过看起来都不太全。而且具体的使用也没有说明清楚，官方的文档也写的很模糊。如果全局引用的话，包又会特别大，基于如上原因，写了如下文章。
安装ant-design的图标包
图标的包和ant-design的包是不一样的，需要单独引入。
npm install @ant-design/icons-vue
yarn add @ant-design/icons-vue
package.json
配置vue.config.js文件
在根目录下，创建
vue.config.js文件。配置如下，大致意思是将@ant-design/icons/lib/dist$的目录映射到src/util/icon.js项目的目录下
module.exports = {
configureWebpack: {
resolve: {
alias:{
'@ant-design/icons/lib/dist$': resolve('./src/util/icon.js')
}
}
},
}
config配置
export {
default as SearchOutline
} from '@ant-design/icons/lib/outline/SearchOutline';
export {
default as RightOutline
} from '@ant-design/icons/lib/outline/RightOutline';
export {
default as DownOutline
} from '@ant-design/icons/lib/outline/DownOutline';
export {
default as CloseOutline
} from '@ant-design/icons/lib/outline/CloseOutline';
export {
default as UpOutline
} from '@ant-design/icons/lib/outline/UpOutline';
export {
default as MenuOutline
} from '@ant-design/icons/lib/outline/MenuOutline';
export {
default as GlobalOutline
} from '@ant-design/icons/lib/outline/GlobalOutline';
export {
default as VerticalAlignTopOutline
} from '@ant-design/icons/lib/outline/VerticalAlignTopOutline';
export {
default as CheckOutline
} from '@ant-design/icons/lib/outline/CheckOutline';
export {
default as CheckCircleOutline
} from '@ant-design/icons/lib/outline/CheckCircleOutline';
icon配置
使用方法
在官网上，先把版本切换到
2.0.1的版本。然后选icon的选项，复制一个想要的图标出来。比如此处拷贝了search的图标
2.0.1
复制图标
在我们创建的
icon.js文件中，写入如下。此时要注意，从官网拷贝下的是<SearchOutlined />这边的名字是SearchOutline，结尾没有d。
export {
default as SearchOutline
} from '@ant-design/icons/lib/outline/SearchOutline';
接下来回到官网，切换到低版本。找到
search的图标。此时拷贝下来的是这样的<a-icon type="search" />
低版本
找到低版本的图标
在main.js中，按需引入icon的组件。注意这边是ant-design-vue的icon组件。我们用这个组件来加载图标。
按需引入icon组件
在页面中可以直接使用图标组件。
<a-icon type="search" :style="{ fontSize: '20px', color: '#000' }"/>
image.png
最终页面显示的效果如下
最终效果
总结
1、安装@ant-design/icons-vue图标的包。
2、配置vue.config.js，讲包的内容指向到本地的icon目录。
3、从官网的2.0版本，拷贝出想要按需引入的图标代码，放入icon.js里面，注意从官网拷贝下来的名字需要去除结尾最后一个d
4、从官网1.0的版本。拷贝图标的代码，放入vue的文件里面。
5、如果没有引入ant-design-vue的icon组件，需要在main.js中在引入下。
