In my React application, I'm attempting to build an Icon Component FontIcon which should create a svg component dynamically right now. The SVGs are imported here as well.

The ideal scenario is for the svg to be displayed when a prop is used to choose an svg.

The dynamic component (FontIcon) has a list of SVGs and checks to verify if the selected SVG is present. If not, a default SVG is used. Unfortunately, and I don't know why, I receive this error. The SVG component is somehow not built.

 <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 (I am using that Component)

import FontIcon from "./FontIcon"

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

p.s That is not working as well. Even if we forget the prop logic

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

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