SVG to TypeScript/TSX Converter

12.0.0 verified Sat Apr 25 auth: no javascript

svg-to-ts is a build tool that converts SVG icons into TypeScript or TSX files, facilitating the creation of tree-shakable icon libraries. It processes SVG files, applies optional SVGO optimization, and generates various output formats: a single TypeScript file exporting a constants object, multiple individual named constant exports, or separate files for each icon, optimized for lazy loading. It also automatically generates corresponding TypeScript types and interfaces for the icon sets. The current stable version is 12.0.0. The project maintains a consistent release cadence, often introducing major versions annually driven by updates to underlying tools like SVGO or advancements in TypeScript language features. Its key differentiators include robust SVGO integration for automatic optimization, broad support for Angular, React, and vanilla TypeScript/JavaScript environments, and the flexibility to produce diverse output structures tailored to different application architectures and lazy-loading strategies. This makes it a versatile solution for authors of component and icon libraries, as well as single-page application developers.

Common errors

error error TS2307: Cannot find module './my-icon.js' or its corresponding type declarations. ↓

cause The generated ESM output files now use the `.mjs` extension instead of `.js` for better compatibility with modern module systems.

fix

Update your import paths to use the .mjs extension: import { MyIcon } from './my-icon.mjs';

error TypeError: Cannot read properties of undefined (reading 'config') at SVGO.optimize ↓

cause This usually indicates an incompatible SVGO configuration after upgrading `svg-to-ts` to v10.0.0 or later, which includes SVGO v3.

fix

Review your svgoConfig object in the svg-to-ts configuration. Refer to the SVGO v3 documentation for the updated configuration syntax.

error error TS1005: 'const' or 'let' expected. ↓

cause This error can occur if you are using TypeScript older than 3.8 with `svg-to-ts` v12.0.0 or newer, as the tool now generates type helpers using the `type` keyword, which requires TS 3.8+.

fix

Upgrade your project's TypeScript dependency to version 3.8 or higher: npm install typescript@^3.8.

Warnings

breaking Version 12.0.0 drops support for TypeScript versions older than 3.8. Projects using `svg-to-ts` must upgrade to TypeScript 3.8 or newer to ensure compatibility and leverage new language features like `type` keyword usage in generated helpers. ↓

fix Update your project's `typescript` dependency to version `3.8` or higher: `npm install typescript@^3.8` or `yarn add typescript@^3.8`.

breaking Since versions 9.0.0 and 11.0.0, `svg-to-ts` generates ESM files with a `.mjs` extension instead of `.js`. Additionally, import/export statements within compiled files now explicitly use the `.mjs` extension. This change enhances compatibility with Node.js ESM loader and modern bundlers, but requires updating import paths in consuming applications. ↓

fix Review all import statements for generated icon files. Change `.js` extensions to `.mjs` where applicable: `import { Icon } from './my-icon.mjs';`

breaking Version 10.0.0 upgraded SVGO to version 3, which introduced significant changes to its configuration format. Existing `svgoConfig` options in your `svg-to-ts` configuration may become incompatible or behave differently. ↓

fix Consult the official SVGO v3 documentation for updated configuration schemas and adjust your `svgoConfig` property within the `svg-to-ts` configuration accordingly.

gotcha By default, `svg-to-ts` might generate icon names based on filenames, which can lead to naming collisions or unidiomatic names. It's crucial to manage naming conventions explicitly to maintain a clean and consistent icon library. ↓

fix Utilize configuration options like `prefix`, `namePrefix`, `delimiter`, and `conversionCase` or leverage custom naming functions to ensure generated icon names are unique and follow your project's conventions.

Install

npm install svg-to-ts

yarn add svg-to-ts

pnpm add svg-to-ts

Imports

GeneratedIconEnum
wrong
```
import GeneratedIconEnum from './path/to/generated-icons';
```
correct
```
import { GeneratedIconEnum } from './path/to/generated-icons';
```
When using `conversionType='object'`, the tool generates a single object or enum containing all icons. This is a named export.
ICON_NAME
wrong
```
import * as Icons from './path/to/generated-icons';
```
correct
```
import { ICON_NAME } from './path/to/generated-icons';
```
For `conversionType='constants'`, individual icons are exported as named constants. Replace `ICON_NAME` with the actual icon name derived from your SVG file.
IndividualIconComponent
wrong
```
import { IndividualIconComponent } from './path/to/icon-name.js';
```
correct
```
import { IndividualIconComponent } from './path/to/icon-name.mjs';
```
When `conversionType='files'` is used, each icon is exported from its own file. Since v9.0.0, ESM output files and their import/export statements use the `.mjs` extension for better compatibility with modern bundlers and Node.js ESM loader.

Quickstart

Demonstrates how to set up `svg-to-ts` in `package.json` to convert a sample SVG icon into a TypeScript constant, and how to import and use the generated output in an application.

{
  "name": "my-icon-library",
  "version": "1.0.0",
  "description": "My custom SVG icon library",
  "scripts": {
    "generate:icons": "svg-to-ts --inputDir ./src/assets/svg --outputDir ./src/app/icons --conversionType constants --prettier --interfaceName IIcons"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "svg-to-ts": "^12.0.0"
  }
}

// src/assets/svg/home.svg
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>

// src/app/icons/index.ts (generated output)
// This file is generated by svg-to-ts. Do not edit this file directly.
// If you want to change the icon names, please use the configuration file.

export const HOME = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>`;

// In your Angular/React/Vanilla TS component:
// import { HOME } from './app/icons';
// function MyHomeIcon() { return <div dangerouslySetInnerHTML={{ __html: HOME }} />; }