在antd项目中以Symbol方式引用IconFont图标

前言：IconFont官方有三种引入方式供你选择：SVG Symbol、Unicode 及 Font class。我们推荐在现代浏览器下使用 SVG Symbol 方式引入。SVG 符号引入是现代浏览器未来主流的图标引入方式。其方法是预先加载符号，在合适的地方引入并渲染为矢量图形。有如下特点：

1. 支持多色图标，不再受到单色图标的限制

2. 通过一些技巧，支持像字体那样，通过 font-size、color 来调整样式

3. 支持IE 9+ 及现代浏览器

一、生成图标库代码

首先，搜索并找到你需要的图标，将它采集到购物车里，在购物车里，你可以将选中的图标添加到项目中（没有的话，新建一个），后续生成的资源/代码都是以项目为维度的。

二、使用SVG Symbol

使用步骤如下：

1.切换到 Symbol 页签，点击在线代码处，复制项目生成的地址代码：

 

2.加入图标样式代码，如果没有特殊的要求，你可以直接复用 Ant Design 图标的样式

3.挑选相应图标并获取类名，应用于页面

你也可以通过使用 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-ali-pay" style={{ fontSize: '16px', color: 'lightblue' }} />

三、注意点

• 如果你在非白色背景使用图标，请记得批量去色，不然你的图标会被同颜色的背景同化

• 每次都项目中的图标有进行了修改操作，请重新生成Symbol代码路由