使用CreateElement创建动态SVG React组件不起作用

Question

在我的React应用程序中，我正在尝试构建一个图标组件Fonticon，该应该立即动态创建SVG组件。 SVG也在这里导入。

方案是在使用道具选择SVG时显示SVG。

理想的 存在选定的SVG。如果没有，则使用默认的SVG。不幸的是，我不知道为什么会收到此错误。 SVG组件是某种程度上没有构建的。

 <data:image/svg.... /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

fonticon.tsx

import React from "react";
import FasExclamationCircle from "./exclamation-circle.svg";
import FarClock from "./clock.svg";

export const iconTypes: { [key: string]: string } = {
    FarClock: FarClock,
    FasExclamationCircle: FasExclamationCircle,
};

type Props = {
    icon: string;
};

export const FontIcon: React.FC<Props> = ({ icon }) => {
    const SvgIcon = iconTypes[icon] == undefined ? FasExclamationCircle : iconTypes[icon];

    return React.createElement(SvgIcon, {
        className: "some class name",
    });
};

app.tsx（我正在使用该组件）

import FontIcon from "./FontIcon"

<div><FontIcon icon="FarClock"/></div>

PS也无法正常工作。即使我们忘记了道具逻辑

import React from "react";
import FarClock from "./clock.svg";
      

export const FontIcon: React.FC = () => {
    return React.createElement(FarClock, {
        className: "some class name",
    });
};