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