无法从 svg 文件创建自定义 ant 设计图标组件

Question

我将要使用的 svg 格式的图标存储在 assets 文件夹中。我正在导入该文件，然后为自定义图标创建一个组件，如下所示：

import dateIcon from "../../../assets/images/icons/calendar_blue.svg";
const calendarIcon = () => <img src={dateIcon} />;

然后当我想将其用作后缀或前缀时，我将其用作：

<Icon component={calendarIcon} />

我收到一个打字稿错误：““MYFILE”.tsx(27,27) 中的打字稿错误： '）' 预期的。 TS1005

Answer 1

您不能直接在 Icon 中使用 SVG。你必须把它转换成jsx。

1. 将SVG图标转换为函数。使用this网站将SVG转换为函数。 假设函数是 Abc
2. 现在在 Icon <Icon component={Abc} /> 中使用该函数。 您的图标可以使用了。如果您仍然遇到任何问题，请发表评论。