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

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

特性

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

关注下面的标签,发现更多相似文章
评论
说说你的看法