Getting undefined when importing svg as ReactComponent in create-react-app project

Question

I\'m getting following error when trying to load svg as ReactComponent.

Element type is invalid: expected a string (for built-in components) or a class/fu

Answer 1

Another example of how to do SVG's with Typescript:-

export interface ISVG {
    viewBox?: string;
    width?: string;
    height?: string;
    fill?: string;
    className?: string;
}

export const SVG = ({
    viewBox = '0 0 200 200',
    fill = '#FA4D56',
    width,
}: ISVG): JSX.Element => {
    return (
        
    );
};

You can also export the SVG as follows: -

export {SVG as Shape}; or w/e naming you choose to export it as.

Things such as margin or padding should be applied afterward, I would assume since you want them to be as generic as possible and be able to re-use them in different locations.