Typescript не может загрузить SVG как реагирующие компоненты

Question

Я пытаюсь импортировать в Typescript некоторые значки SVG, но я сталкиваюсь с некоторыми проблемами.

В первый раз, когда я пытался импортировать их, Typescript не смог распознать расширение файла. Я решил эту проблему, создав, как это было предложено в других темах Stack Overflow и Github, файл custom.d.ts с этим правилом внутри:

declare module "*.svg" {
  const content: React.StatelessComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

Но проблемы здесь, похоже, не заканчиваются sh, даже если Компиляция выглядит нормально.

Текущий проект, над которым я работаю, структурирован следующим образом:

• Пакет Typescript + React (с файлами значков SVG) (SDK)
• Реагировать на внутреннем образце страницы (пакета) для использования SDK
• других внутренних пакетов ...

Для нашей фазы разработки мы собираем все пакеты через Webpack через разные загрузчиков и просмотрите результат на странице Образец.

Но конечный поток продуктов для производства совершенно другой: я экспортирую SDK как Общий JS во внутренний Реестр NPM, чтобы другая компания могла использовать его в проект React (эквивалент страницы примера, но для производства) и pu sh для производства окончательных пакетов Webpack с обоими проектами внутри.

Итак, чтобы загрузить в образец Прикладываю значки SVG, я использую @svgr/webpack загрузчик, который конвертирует файлы.

Но когда мне нужно экспортировать SDK через npx tsc, я вижу, что экспортированная папка не содержит папок с svg файлами.

Я пытался включить их в tsconfig.json/files, но получил эту ошибку:

TS6054: File '<path>/*.svg' has an unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.

Итак, чтобы попытаться экспортировать их, я преобразовал свой скрипт экспорта в используйте @svgr/cli для экспорта файлов в файлы React из SVG перед компиляцией в машинописный текст:

// package.json
scripts: {
    "build-ts": "rm -rf ./lib; yarn convert-svg-to-react; npx tsc",
    "convert-svg-to-react": "npx @svgr/cli -d src src --typescript",
}

Таким образом, я получаю новые файлы Typescript, смешанные с SVG внутри пакета (так что я буду иметь чтобы удалить их позже), и я вижу их в экспортированной папке lib. Но, наблюдая внутри экспортированного кода Typescript, я вижу следующую строку (для каждого импорта svg):

var close_svg_1 = __importDefault(require("./icons/close.svg"));

Оставляя функцию Typescript для Babel __importDefault, вы можете видеть, что для нее по-прежнему требуется файл svg, но на данный момент у меня есть компоненты React, которые заменяют эти файлы.

Во время разработки он работает нормально, поскольку загрузчик @svgr/webpack разрешает файлы svg. Но требуя svg-файлов, которые не существуют, должно сделать приложение выше него cra sh.

Итак, я застрял и мне нужно несколько подсказок, чтобы выйти из этой ситуации.

Вот некоторые подсказки, которые я получил (но не смог найти, как это сделать):

• [Наилучший] Узнайте, как я могу экспортировать необработанные SVG-файлы такими, какие они есть во время компиляции Typescript, не делая этого. вручную, так как они не все в одной папке, а разделены по областям компонентов в дереве пакетов. Делая это, я бы сказал другой компании добавить @svgr/webpack в свой собственный процесс сборки.
• Узнайте, как я могу сказать Typescript импортировать файлы SVG без указания расширения (в настоящее время удаление .svg, вероятно, делает его откат к .ts/tsx и, следовательно, он не может найти файл с таким именем). Таким образом, require будет требовать одно и то же имя файла, но я мог бы конвертировать SVG в React Components без проблем. Но для этого также потребуется Typescript для экспорта файла

В противном случае мне следует преобразовать все SVG в компонентах React и использовать их напрямую, а не компилировать их с помощью @svgr/webpack, но я не уверен, что это будет иметь некоторые другие побочные эффекты.

Любые другие подсказки или какой-либо способ реализации идей, которые я получил? Спасибо всем.