{"id":18067,"library":"svg-to-ts","title":"SVG to TypeScript/TSX Converter","description":"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.","status":"active","version":"12.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/kreuzerk/svg-to-ts","tags":["javascript","SVG","TypeScript","Icons","Build-tool"],"install":[{"cmd":"npm install svg-to-ts","lang":"bash","label":"npm"},{"cmd":"yarn add svg-to-ts","lang":"bash","label":"yarn"},{"cmd":"pnpm add svg-to-ts","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"When using `conversionType='object'`, the tool generates a single object or enum containing all icons. This is a named export.","wrong":"import GeneratedIconEnum from './path/to/generated-icons';","symbol":"GeneratedIconEnum","correct":"import { GeneratedIconEnum } from './path/to/generated-icons';"},{"note":"For `conversionType='constants'`, individual icons are exported as named constants. Replace `ICON_NAME` with the actual icon name derived from your SVG file.","wrong":"import * as Icons from './path/to/generated-icons';","symbol":"ICON_NAME","correct":"import { ICON_NAME } from './path/to/generated-icons';"},{"note":"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.","wrong":"import { IndividualIconComponent } from './path/to/icon-name.js';","symbol":"IndividualIconComponent","correct":"import { IndividualIconComponent } from './path/to/icon-name.mjs';"}],"quickstart":{"code":"{\n  \"name\": \"my-icon-library\",\n  \"version\": \"1.0.0\",\n  \"description\": \"My custom SVG icon library\",\n  \"scripts\": {\n    \"generate:icons\": \"svg-to-ts --inputDir ./src/assets/svg --outputDir ./src/app/icons --conversionType constants --prettier --interfaceName IIcons\"\n  },\n  \"keywords\": [],\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"devDependencies\": {\n    \"svg-to-ts\": \"^12.0.0\"\n  }\n}\n\n// src/assets/svg/home.svg\n// <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"/></svg>\n\n// src/app/icons/index.ts (generated output)\n// This file is generated by svg-to-ts. Do not edit this file directly.\n// If you want to change the icon names, please use the configuration file.\n\nexport 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>`;\n\n// In your Angular/React/Vanilla TS component:\n// import { HOME } from './app/icons';\n// function MyHomeIcon() { return <div dangerouslySetInnerHTML={{ __html: HOME }} />; }","lang":"typescript","description":"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."},"warnings":[{"fix":"Update your project's `typescript` dependency to version `3.8` or higher: `npm install typescript@^3.8` or `yarn add typescript@^3.8`.","message":"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.","severity":"breaking","affected_versions":">=12.0.0"},{"fix":"Review all import statements for generated icon files. Change `.js` extensions to `.mjs` where applicable: `import { Icon } from './my-icon.mjs';`","message":"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.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"Consult the official SVGO v3 documentation for updated configuration schemas and adjust your `svgoConfig` property within the `svg-to-ts` configuration accordingly.","message":"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.","severity":"breaking","affected_versions":">=10.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"All"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Update your import paths to use the `.mjs` extension: `import { MyIcon } from './my-icon.mjs';`","cause":"The generated ESM output files now use the `.mjs` extension instead of `.js` for better compatibility with modern module systems.","error":"error TS2307: Cannot find module './my-icon.js' or its corresponding type declarations."},{"fix":"Review your `svgoConfig` object in the `svg-to-ts` configuration. Refer to the SVGO v3 documentation for the updated configuration syntax.","cause":"This usually indicates an incompatible SVGO configuration after upgrading `svg-to-ts` to v10.0.0 or later, which includes SVGO v3.","error":"TypeError: Cannot read properties of undefined (reading 'config') at SVGO.optimize"},{"fix":"Upgrade your project's TypeScript dependency to version `3.8` or higher: `npm install typescript@^3.8`.","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+.","error":"error TS1005: 'const' or 'let' expected."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}