svg-to-ts

library12.0.0jsnpmunverified

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.

devops

npm install svg-to-ts

github ↗package ↗

INSTALL

IMPORT

SIG · SVG-TO-TS

svg-to-ts

devopsjavascriptv12.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

GeneratedIconEnum

✓ import { GeneratedIconEnum } from './path/to/generated-icons';

✗ 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

✓ import { ICON_NAME } from './path/to/generated-icons';

✗ import * as Icons 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

✓ import { IndividualIconComponent } from './path/to/icon-name.mjs';

✗ import { IndividualIconComponent } from './path/to/icon-name.js';

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.

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 }} />; }

svg-to-ts --version

Debug

Known issues

breakingVersion 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`.

affects: >=12.0.0

breakingSince 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';`

affects: >=9.0.0

breakingVersion 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.

affects: >=10.0.0

gotchaBy 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.

affects: All

Errors

Common errors & fixes

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

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';`

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

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 TS1005: 'const' or 'let' expected.

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`.

Upgrade

Version history

12.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/kreuzerk/svg-to-ts ↗

packagehttps://www.npmjs.com/package/svg-to-ts ↗