IconFont圖標引用

前端開發會常常用到一些圖標。當ui妹子給你提供的圖標不能知足你的需求時，能夠在 iconfont.cn 上採集並生成本身的業務圖標庫，再進行使用。

1、生成圖標庫代碼

首先，搜索並找到你須要的圖標，將它採集到你的購物車裏，在購物車裏，你能夠將選中的圖標添加到項目中（沒有的話，新建一個），後續生成

的資源/代碼都是以項目爲維度的。

來到剛纔選中的項目頁，點擊『生成代碼』的連接，會在下方生成不一樣引入方式的代碼，下面會分別介紹。

2、引入

有三種引入方式供你選擇：SVG Symbol、Unicode 及 Font class。咱們推薦在現代瀏覽器下使用 SVG Symbol 方式引入。

SVG Symbol

SVG 符號引入是現代瀏覽器將來主流的圖標引入方式。其方法是預先加載符號，在合適的地方引入並渲染爲矢量圖形。有以下特色：

1. 支持多色圖標，再也不受到單色圖標的限制
2. 經過一些技巧，支持像字體那樣，經過 font-size、color 來調整樣式
3. 支持IE 9+ 及現代瀏覽器

使用步驟以下：

• 切換到 Symbol 頁籤，複製項目生成的地址代碼：

//at.alicdn.com/t/font_835630_0rudypqb4a.js

• 加入圖標樣式代碼，若是沒有特殊的要求，你能夠直接複用 Ant Design 圖標的樣式

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -.125em;
}

• 挑選相應圖標並獲取類名，應用於頁面

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-ali-pay"></use>
</svg>

你也能夠經過使用 Ant Design 圖標組件提供的 Icon.createFromIconfontCN({...}) 方法來更加方便地使用圖標，使用方式以下：

• 配置項目地址，建立圖標組件

import { Icon } from 'antd';

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.js'
});

export default IconFont;

• 以後能夠像使用 <Icon /> 組件同樣方便地使用，支持配置樣式

<IconFont type="icon-ali-pay" style={{ fontSize: '16px', color: 'lightblue' }} />

Unicode

這是最原始的方式，須要三步來完成引入：

• 拷貝項目生成的字體庫代碼，你能夠新建一個樣式文件來放置圖標相關的樣式。

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot');
  src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.woff') format('woff'),
  url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.svg#iconfont') format('svg');
}

• 加入圖標樣式代碼，若是沒有特殊的要求，你能夠直接複用 Ant Design 圖標的樣式。

.iconfont {
  display: inline-block;
  font-style: normal;
  vertical-align: baseline;
  text-align: center;
  text-transform: none;
  line-height: 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &:before {
    display: block;
    font-family: "iconfont" !important;  /* 注意與 font-face 中的匹配 */
  }
}

• 在項目中鼠標移動到要用的圖標上，點擊『複製代碼』，就獲得了圖標對應的字體編碼，如今能夠直接引入了：

<i class="iconfont">&#xe66b;</i>

Font Class

• 切換到 Font class 頁籤，在頁面頭部引入下面生成的 css 代碼：

//at.alicdn.com/t/font_835630_0rudypqb4a.css

若是不喜歡標籤引入的方式，也能夠直接拷貝上面連接中的代碼到你的樣式文件中。若是不喜歡網站默認生成的類名，本身重寫這部分代碼便可，好比：

- .icon-ali-pay:before { content: "\e66b"; }              // 修改前
 - .monitor-icon-alipay:before { content: "\e66b"; }       // 修改後

• 這時你能夠選擇拷貝圖標對應代碼（就是類名，若是類名被重寫過，這裏記得用修改後的），直接使用：

<i class="iconfont icon-ali-pay"></i>

不過咱們更推薦將它封裝一下：

import React from 'react';

const BizIcon = (props) => {
  const { type } = props;
  return <i className={`iconfont icon-${type}`} />;
};
export default BizIcon;

如今能夠更加方便地使用：

<BizIcon type="ali-pay" />

Unicode 和 Font Class 本質上就是字體，你能夠經過一些字體的樣式屬性去控制這種圖標的展示，同時瀏覽器兼容性很好，但不支持多色圖標。