Ошибка машинописного текста для svg в функциональном компоненте React - PullRequest
Новая
       39

Ошибка машинописного текста для svg в функциональном компоненте React

0 голосов
/ 06 августа 2020

У меня есть такой компонент значка: 

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.

Как я могу объявить типы этих элементов или исправить тип компонента ?

...