Question

此页面末尾的示例不清楚： antd custom icon instructions，使用自定义svg时如何将“ fill”属性传递给组件：

<Icon component={MessageSvg} />

这不起作用：

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

，因为它不会将图标涂成红色，而是标准的灰色。难道不应该把道具传下来吗？

但是，如果我这样做：

<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

是的，根据the custom-icon demo，您必须像您一样通过填充样式作为道具

<MessageSvg fill="red">

将其更改为

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

还要注意它们如何在实际的svg组件中使用fill =“ currentColor”。希望对您有帮助！

Answer 3

import SVG from "react-inlinesvg";

<Icon component={(props) => <SVG src={MessageSvg} {...props} />} />

借助antd自定义svg图标，如何将道具传递到svg？

3 个答案: