如何使用 Ant Design 为 IconFont 自定义颜色

【问题标题】：How to customize color for IconFont with Ant Design如何使用 Ant Design 为 IconFont 自定义颜色
【发布时间】：2020-10-26 03:17:48
【问题描述】：

我想在 Ant Design 中将 IconFont 组件的颜色改为白色，但是没有效果。
这是我的代码：

import React from "react"
import Icon, { createFromIconfontCN } from '@ant-design/icons'

const IconFont = createFromIconfontCN({
  scriptUrl: [
    '//at.alicdn.com/t/font_1920998_alrdzny2zo.js'
  ],
});

export default function Front() {
  return (
    <>
      <IconFont type="iconcart-add" style={{ color: '#fff', fill: '#fff'}}></IconFont>
    </>
  )
}

请告诉我为这个项目定制颜色的方法。
谢谢

【问题讨论】：

标签： reactjs antd ant-design-pro

【解决方案1】：

来自https://ant.design/components/icon/的文档

在 3.9.0 中添加了主题、组件和 twoToneColor 属性。最佳做法是将属性主题传递给每个组件。

import { MessageOutlined } from '@ant-design/icons';

<MessageOutlined style={{ fontSize: '16px', color: '#08c' }} />;

所有图标都将呈现为 .您仍然可以为图标的大小和颜色设置样式和类名。

<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />

【讨论】：

如何改变IconFont 组件的颜色？能不能说的更清楚一点？