Vue2 中使用 Ant Design 自定义图标 - 详细教程

要在 Vue2 中使用 Ant Design 的自定义图标，可以按照以下步骤进行：

1. 首先，确保已经安装了 Ant Design 的依赖包。可以使用命令npm install ant-design-vue --save来安装。

2. 在 main.js 文件中导入 Ant Design 的样式和组件：

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);

3. 在项目中创建一个 icons 目录，用于存放自定义图标的 SVG 文件。

4. 在 icons 目录中创建一个 index.js 文件，用于导出自定义图标：

import { createFromIconfontCN } from '@ant-design/icons-vue';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_xxxxxxx.js', // 替换成自己的图标链接
});

export default IconFont;

5. 在需要使用自定义图标的组件中，引入并使用 IconFont 组件：

<template>
  <div>
    <icon-font type='icon-custom' />
  </div>
</template>

<script>
import IconFont from '@/icons';

export default {
  components: {
    IconFont,
  },
};
</script>

这样，就可以在 Vue 组件中使用自定义图标了。在 IconFont 组件中，type 属性用于指定图标的名称，这里的'icon-custom' 就是自定义图标的名称。