1

В 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

1 ответ 1

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" />

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.