如何使用Ant Design定制IconFont的颜色

Question

我想在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>
    </>
  )
}

请告诉我为这件商品定制颜色的方法。

谢谢

Answer 1

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

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

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

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

所有图标都将渲染到。你仍然可以设置图标的大小和颜色的样式和className。

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