阿里图标库使用
阿里图标库使用
文档: https://www.iconfont.cn/help/detail?helptype=code
有几种使用方法。
单个文件使用 – 直接下载文件， 如 .ai .png .svg
使用方法:
- 下载啊~
unicode – 写 html 字符编码
使用方法:
- 下载包含你选择的图标的字体文件 .eot .woff .ttf .svg
- 在 css 中引用字体及预设样式
- 在 html 中使用， 如
<i class="iconfont">3</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 中的内容都不会改变， 也不能重新生成。
所以还是直接下载后使用吧。
版权声明：本文为daysme原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。