Ant Design Icons

使用指南

使用 WEB Font

WEB Font 是一个传统的使用方式，它通过类名去引用图标。优势是你只需引入一个 CSS 文件，不足是你必须全量引入 CSS 文件及其配套的字体文件，体积略大。

安装

Webpack

首先，通过包管理器安装 ant-design-icons：

# yarn
yarn add ant-design-icons

# npm
npm install ant-design-icons --save

然后，在你的项目入口文件处引入 CSS：

import 'ant-design-icons/dist/anticons.min.css'

提示

你可能需要安装 css-loader 去处理 CSS 文件，安装 url-loader 去处理字体文件。

CDN

复制下面的代码放到 HTML 文档的 <head> 标签内：

<link href="https://cdn.jsdelivr.net/npm/ant-design-icons/dist/anticons.min.css" rel="stylesheet">

使用

WEB Font 使用类名去展现图标，ant-design-icons 的类名规则是 ai-${图标ID}，如：

<i class="ai-smile-o"></i>
<i class="ai-loading"></i>

效果是这样的：

样式

你可以直接使用 CSS 去更改图标大小、颜色等：

<i class="ai-smile-o" style="color:red;"></i>
<i class="ai-loading" style="color:blue;font-size:20px;"></i>

效果是这样的：

使用 SVG Sprite

SVG Sprite 类似 CSS Sprite，就是说将 SVG 图标整合在一起，然后通过图标 ID 去调用它们。可以看看这篇文章做个大致了解：未来必热：SVG Sprite技术介绍

注意

SVG Sprite 仅支持通过 Webpack 等前端构建工具使用。

安装

# yarn
yarn add ant-design-icons

# npm
npm install ant-design-icons --save

按需引入 SVG 图标

如果你使用了 Webpack 4，下面的代码将按需加载对应的 SVG 文件：

import { smileO, loading } from 'ant-design-icons'

如果你使用了 Babel，你可使用 babel-plugin-import 实现按需加载：

// .babelrc.js
module.exports = {
  plugins: [[
    'import',
    {
      libraryName: "ant-design-icons",
      customName: name => `ant-design-icons/dist/svg/${name}.svg`
    },
    'ant-design-icons'
  ]]
}

生成 SVG Sprite

上一步，我们按需引入了项目中使用的 SVG 图标。这一步，我们需要把它们生成 SVG Sprite。对此，你可能有两种需求：

由 Webpack 自动生成并插入 SVG Sprite

svg-sprite-loader 了解一下。

自行生成并插入 SVG Sprite

svg-to-symbol-loader 了解一下。

使用

如下：

<svg>
  <use xlink:href="#smile-o" />
</svg>

效果如此：

使用 Ant Design Mobile Icons

Ant Design Icons 包含 Ant Design Mobile 的图标，但不支持 WEB Font 方式调用，仅支持 直接调用 SVG 源图标，或 配合 SVG Sprite 使用。

安装

# yarn
yarn add ant-design-icons

# npm
npm install ant-design-icons --save

调用 SVG 源文件

import loading from 'ant-design-icons/dist/mobile/svg/loading.svg'
import checkCircle from 'ant-design-icons/dist/mobile/svg/check-circle.svg'

// 或
import { loading, checkCircle } from 'ant-design-icons/dist/mobile'