Question

有人可以举一个使用AntD框架使用get Awesome的示例吗？他们提到您可以将SVG与外部图标一起使用。

谢谢

塔班

Answer 1

只需导入SVG，例如从真棒字体下载图标，然后在component的{{1}}属性中使用它即可：

Icon

请参阅custom SVG icon in docs。

Answer 2

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

步骤

使用IcoMoon之类的工具创建图标文件。
创建您的IconFont组件。
根据需要使用组件（支持字符串道具）。

IconMoon使用情况

打开https://icomoon.io/app/#/projects
创建您的项目。（注意：它已保存在本地，供普通用户使用）。单击右侧的“加载项目”。
上传您的svg文件并命名（此名称将在您的react组件中使用）。
选择页面底部的下载面板并下载文件。
然后您将获得一个压缩文件。

parcel

创建IconFont组件

将字体折叠后的未压缩文件添加到项目的资产中。也许|-demo-files |-some demo files. |-fonts |-iconfont.eot |-iconfont.svg |-iconfont.ttf |-iconfont.woff |-demo.html |-style.css |-something not important
创建组件

$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";
        }
    }

在Antd中使用awsome字体

2 个答案:

步骤

IconMoon使用情况

创建IconFont组件

用法