使用 antd 自定义 svg 图标，如何将道具传递给 svg？

Question

本页末尾的示例不清楚： antd 自定义图标说明，如何在使用自定义 svg 时将“填充”属性传递给组件：

<Icon component={MessageSvg} />

这不起作用：

<Icon component={MessageSvg} fill="red"/>

因为它不会将 Icon 涂成红色，而是将其涂成标准灰色。 antd 不是应该把 props 传下来吗？

但是，如果我这样做：

<MessageSvg fill="red" />

那么它的工作原理。 所以理论上我可以包装 Icon 并做一个 HOC 来解决这个问题，但我确定我可能遗漏了一些东西。

我正在使用 webpack 扩展 @svgr/webpack

 {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            use: [
                {
                    loader: 'babel-loader',
                },
                {
                    loader: '@svgr/webpack',
                    options: {
                        icon: true,
                    },
                },
            ]
        }

Answer 1

最后我发现了。

<Icon component={() => <MessageSvg fill="green"/>}/>

Answer 2

以下组件允许使用 css 更改图标属性

import SVG from "react-inlinesvg";
import MessageSvg from "./Message.svg";

export const MessageIcon = (props) => (
    <Icon component={(iProps) => <SVG src={MessageSvg} {...iProps}/>} {...props}/>
)

用法示例

export const App = () => (
    <MessageIcon className="icon-primary"/>
)

然后我们可以更改我们需要的所有属性

.icon-primary {
   color: #32E0C4 !important;
   font-size: 1rem !important;
}

PS 此方法适用于从iconfont.cn下载的svg文件

Answer 3

是的，根据自定义图标演示，您必须像以前一样将填充样式作为道具传递

<MessageSvg fill="red">

将其更改为

<Icon component={MessageSvg} style={{color: "red", fill: "red"}}>

还要注意他们如何在实际的 svg 组件中使用 fill="currentColor" 。 希望能帮助到你！