不能从SVG文件创建自定义ant设计图标组件

Question

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

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

然后当我想用它作为后缀或前缀时，我用它作为:

<Icon component={calendarIcon} />

我得到一个typescript错误:"MYFILE".tsx(27,27)中的typescript错误:")的预期。TS1005

Answer 1

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

1. 将SVG图标转换为函数。使用此网站将SVG转换为功能。假设函数是Abc
2. 现在在图标<Icon component={Abc} />中使用该功能。您的图标已准备好使用。如果您仍然遇到任何问题，请评论。