阿里圖標庫使用

文檔: 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 中的內容都不會改變， 也不能重新生成。
所以還是直接下載后使用吧。

​