一、注册使用 iconfont 图标库
阿里妈妈MUX倾力打造的矢量图标管理、交流平台。
设计师将图标上传到 iconfont 平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。
iconfont 平台提供海量的图标供开发者使用,在这里可以找到更多不同类型的图标,方便使用。
注册登录后,搜索栏处搜索关键字,找到适合的图标后添加至购物车。
点开购物车添加至项目。
点击生成链接。
二、antd design中引入 iconfont 图标
在 utils 目录下创建 iconfontUrl.js 文件保存图标链接,供全局使用。
export default {
scriptUrl: '//at.alicdn.com/t/c/font_xxxxxxxxxx_xxxxxxxxxxxxx.js',
}
在组件中使用iconfont:
/* eslint-disable no-tabs */
import React from 'react';
import { Icon } from 'antd';
import IconfontUrl from '@/utils/iconfontUrl';
const { Component } = React;
class Weather extends Component {
constructor(props) {
super(props);
this.state = {
...props,
}
render() {
const IconFont = Icon.createFromIconfontCN({
scriptUrl: IconfontUrl.scriptUrl,
});
return (
<div>
<IconFont type="icon-diliweizhi" style={{ fontSize: '32px' }} />
</div>
)
}
}
export default Weather;