antd - 在 antd 中使用 Font Awesome

Question

有人可以举例说明如何使用 get Font Awesome 与 AntD 框架一起工作吗？他们提到您可以将 SVG 与外部图标一起使用。

谢谢，

塔类

Answer 1

不直接，但您可以自己制作 IconFont 组件。

脚步

使用 IcoMoon 等工具创建图标文件.

创建您的 IconFont 组件。

随心所欲地使用组件(支持字符串 Prop )。

IconMoon 使用

开通 https://icomoon.io/app/#/projects

创建您的项目。(注意:它为普通用户保存在本地)。单击右侧的“加载项目”。

上传您的 svg 文件并为其命名(此名称将用于您的 react 组件)。

选择页面底部的下载面板并下载文件。

然后你会得到一个压缩文件。

|-demo-files  
  |-some demo files.
|-fonts
  |-iconfont.eot
  |-iconfont.svg
  |-iconfont.ttf
  |-iconfont.woff
|-demo.html  
|-style.css
|-something not important

创建 IconFont 组件

将字体折叠下的解压缩文件添加到您的项目 Assets 中。也许$PROJECT_ROOT/src/assets/icons/fonts/

创建组件

// src/components/IconFont/IconFont.jsx
import React from 'react';
import classNames from 'classnames';
import './icon.less';

const IconFont = ({ type, active, className, size = 16, style, ...rest }) => (
    <i
        {...rest}
        style={{ fontSize: size, ...style }}
        className={classNames(
            'icon',
            {
                'icon_active': active,
                [`icon-${type}`]: type,
            },
            className
        )}
    />
);

export default IconFont;

// src/components/IconFont/icon.less
@font-face {
    font-family: 'your-iconfont-name';
    src: url('../../assets/icons/fonts/iconfont.eot');
    src: url('../../assets/icons/fonts/iconfont.eot#iefix') format('embedded-opentype'), url('../../assets/icons/fonts/iconfont.ttf') format('truetype'), url('../../assets/icons/fonts/iconfont.svg#live') format('svg');
}
.icon {
        font-family: 'your-iconfont-name' !important; // font-size: 16px;
        font-style: normal;
        transition: 0.3s;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        vertical-align: middle;
        // things under refer to style.css in unzipped files.
        &.icon-female:before {
            content: "\e901";
        }
        &.icon-male:before {
            content: "\e902";
        }
        &.icon-close:before {
            content: "\e900";
        }
    }

用法

现在您可以使用该组件了。

// src/components/Foo/Foo.jsx
import IconFont from '../IconFont/IconFont';
...
render(){
  return <IconFont type="male" />
}
...