Значки SVG не отображаются в компоненте TypeScript React, связанном как модуль узла

Question

Я написал модуль узла, содержащий компонент Typescript React, который я хочу включить в несколько других проектов.Компонент проекта основан на создании-реагировать-приложение.Компонент включает в себя некоторые SVG, которые отображаются как компоненты с использованием синтаксиса import { ReactComponent as Icon } from 'path/to/my/component.svg'; , описанного в документации .Компонент отображается на тестовой странице как часть проекта модуля, где значки SVG отображаются нормально.

Однако, когда я связываю модуль и включаю его в другой проект, компонент визуализируется, но без всехиконки.Консоль сообщает мне, что все импортированные компоненты значков undefined.Я думаю, что проблема может быть связана с веб-пакетом, но я не знаю, как это исправить.Кроме того, я бы не стал извлекать проект create-реагировать-приложение по причинам, не связанным с проблемой.

Результаты моего исследования

• Я уверен, что распределенный пакет содержит всеправильные значки и относительные пути
• Компонент компилируется в JS с использованием tsc.При копировании папки дистрибутива с кодом JS в другой проект и импорте компонента оттуда значки отображаются нормально
• При использовании yarn pack для создания пакета и установки в качестве зависимости в другом проекте,значки пропали

Состояние

• Я бы предпочел не извлекать проект компонента для редактирования пакета webpack.config

.json проекта модуля

{
  "name": "MyFancyComponent",
  "version": "1.0.1",
  "main": "dist/index.js",
  "license": "UNLICENSED",
  "dependencies": {
    "axios": "^0.19.0",
    "husky": "^2.4.1",
    "i18next": "^17.0.4",
    "node-sass": "^4.12.0",
    "test-name": "./test-name-v1.0.0.tgz",
    "test-name2": "./test-name2-v1.0.1.tgz",
    "typescript": "3.5.2"
  },
  "devDependencies": {
    "@types/i18next": "^12.1.0",
    "@types/jest": "24.0.15",
    "@types/node": "12.0.8",
    "@types/react": "^16.8.22",
    "@types/react-dom": "16.8.4",
    "@types/react-i18next": "^8.1.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "peerDependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "files": [
    "/dist",
    "/style",
    "index.d.ts"
  ],
  "scripts": {
    "start": "react-scripts start",
    "dist": "tsc && cp -r src/lib/style/* dist/style && cp -r src/lib/tenants/* dist/tenants"
  }
}

tsconfig проекта модуля

{
  "compilerOptions": {
    "allowJs": false,
    "declaration": true,
    "noEmit": false,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "outDir": "./dist",
    "rootDir": "./src/lib",
    "suppressImplicitAnyIndexErrors": true,
    "removeComments": true,
    "types": ["node"],
    "jsx": "react",
    "typeRoots": ["./src/@types", "./node_modules/@types"]
  },
  "include": ["src/@types", "src/lib"],
  "exclude": ["src/**/*.test.*"]
}

Определение типа для файлов .svg также включено и определено следующим образом:

declare module '*.svg' {
    import * as React from 'react';

    export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;

    const src: string;
    export default src;
}

Как SVG включены в мои компоненты

Оболочка компонента

import React from 'react';
import { ReactComponent as Icon } from 'pat/to/component.svg';

export default (props: any) => (
    <i>
        <Icon />
    </i>
);

Использование значка

import React from 'react';
import IconComponent from './icons/icon-component';

const MyComponent: React.FunctionComponent<{}> = () => (
    <div>
         <IconComponent />
    </div>
);

Есть идеи, как решить эту проблему?