阿里图标库使用

时间：2021-01-02 16:23:05

阿里图标库使用

文档: https://www.iconfont.cn/help/detail?helptype=code

有几种使用方法。

单个文件使用 - 直接下载文件， 如 .ai .png .svg

使用方法:

  • 下载啊~

unicode - 写 html 字符编码

使用方法:

  • 下载包含你选择的图标的字体文件 .eot .woff .ttf .svg
  • 在 css 中引用字体及预设样式
  • 在 html 中使用， 如 <i class="iconfont">&#x33;</i>

font-class - 样式类名

使用方法:

  • 下载项目并引用样式 iconfont.css ， 也可以使用生成的 cdn 链接
  • 在 html 中使用 <i class="iconfont icon-图标名"></i>

symbol - svg 聚合

使用方法:

  • 下载项目并引用 iconfont.js ， 也可以使用生成的 cdn 链接
  • 预设样式 <style type="text/css"> .icon {...} </style>
  • 在 html 中使用 <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-图标名"></use> </svg>

在 ant 的 icon 组件中使用

文档: https://ant.design/components/icon-cn/

Icon 组件除了可以直接使用 ant 中自动的图标外， 还可以直接使用阿里图标库。

import { Icon } from 'antd';

const IconFont = Icon.createFromIconfontCN({
// 这个链接可以在线上生成， 或者下载并使用项目文件包中 iconfont.js
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

ReactDOM.render(
<div className="icons-list">
<IconFont type="icon-图标名" />
</div>,
mountNode
);

提示

在线生成的 cdn 并不支持更新。 生成之后，无论在项目中新添加和删除图标， cdn 中的内容都不会改变， 也不能重新生成。
所以还是直接下载后使用吧。

​
标签：

相关文章