一套提取自 Ant Design 的优质图标

2018-06-11 1,712 阅读1分钟

ant-design-icons 是一套提取自 Ant Design 的高质量图标，你可以自由地在 React、Vue 或其他框架中使用它。

特性

提取自优秀的 Ant Design 并保持同步。
支持 WEB Font 使用。
支持 SVG Sprite 使用。
包含 Ant Design Mobile Icons。

WEB Font 方式使用

首先，通过包管理器安装 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'

最后，使用 ai-${图标ID} 展现图标：

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

SVG Sprite 方式使用

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

# yarn
yarn add ant-design-icons

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

如果你使用了 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'
  ]]
}

更详细的文档：fjc0k/ant-design-icons