Как реализовать svg компонент в react + typescript

Question

В React на JS я подключал svg в качестве компонента вот таким путем

import { ReactLogoComponent } from "./churros.svg";

И использовал в компонентах вот так

<ReactLogoComponent
      width={50}
      height={50}
      className={s.logo__img}
    />

То есть из файла получался реакт компонент Пробую перевести этот код на react с typescrypt. Обычные import не работает использую require Подключаю:

const ReactLogoComponent: FC<SVGAttributes<SVGElement>> = require("./churros.svg");

Использую так:

<ReactLogoComponent
          width={"50"}
          height={"50"}
          className={s.logo__img}
 />

в консоле при сборке ошибок нет, но в браузере ошибка:

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/churros.88138d03.svg') is not a valid name.

Подскажите пожалуйста, как можно реализовать правильно этот момент? Проект на CRA, перевожу с JS на TS

Answer 1

Нашел, что модуль *.svg описан в react-scripts(node_modules/react-scripts/lib/react-app.d) и по именованному экспорту возвращает ReactComponent, по этому:

import { ReactComponent as ReactLogoComponent } from "./churros.svg";

Но в моем случае это не полностью решило проблему, потому что TS начал ругаться на то, что он не может найти модуль churros.svg или объявление соответствующего типа - это решилось добавлением в src/ файла react-app-env.d.ts с содержимым

/// <reference types="react-scripts" />

БЛОГ НА HUSL

Как реализовать svg компонент в react + typescript

Ответы (1 шт):