反应功能组件中svg的打字稿错误

Question

我有一个像这样的图标组件：

import React from 'react';

type IconProps = {
    width?: number;
    height?: number;
    color?: string;
    styleName?:string;
};

const MyIcon: React.FC<IconProps> = ({
    width = 32,
    height = 32,
    color = 'black',
    styleName = ''
}) => (
    <svg className={styleName} width={width} height={height} viewBox="0 0 448 512">
        <g>
            <path
                fill={color}
                d="M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"
            />
        </g>
    </svg>
);

export default MyIcon;

在<svg>上，出现以下打字错误：

TS2322: Type '{ children: Element; className: string; width: number; height: number; viewBox: string; }' is not assignable to type 'SVGProps<SVGSVGElement>'.

在：

TS2322: Type '{ children: Element; }' is not assignable to type 'SVGProps<SVGGElement>'

在svg的所有部分上都是如此。

如何声明这些元素的类型或更正组件的类型？