Goal

I'm working on a proof of concept project where the goal is to create an NPM package with TypeScript which exports custom SVG icons. The library is to only export the raw SVG's themselves, and not as a [framework] component.

Problem

Right now, I am receiving various TypeScript errors, either about an export not existing, or the library not having been typed correctly. Because there's not one specific problem, I am hoping to share some of my configurations for someone more familiar with this tooling to hopefully help.

I'm not very strong with tooling, so I am not sure where the disconnect is with

• Exporting the SVG icons to be imported by the end user
• Creating the proper type declarations for the library

Configuration

package.json

{
  ...
  "module": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc",
  }
}

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "declaration": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "outDir": "dist",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "target": "es5"
  },
  "include": ["src", "global.d.ts"]
}

global.d.ts

declare module '*.svg' {
  const content: string;
  export default content;
}

src/index.ts

import TestIcon from "./svg/test.svg";
import ArrowThinLeft from "./svg/arrow-thin-left.svg";

export { TestIcon, ArrowThinLeft };

Thanks for taking a look :)