基于vue3.0的ant-design图标按需引入

关于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中在引入下。