SVG to Svelte

The Best Way to Convert SVG to Svelte 5 Components

V2 — What's New?

V2 is a complete rewrite focused on speed and simplicity. The SVG-to-Svelte conversion no longer parses an AST — it works directly on the SVG string, making it dramatically faster and removing heavy dependencies.

Performance Comparison

Breaking Changes

• -k, --kit option removed — SvelteKit src/lib/icons folder protection is no longer needed.
• -u, --updatefwh option removed — Use -a (attributes) instead: -a fill.currentColor width.100% height.auto.

Table of Contents

• Installation
• Usage
• Options
• Examples
• API
• License
• Contributing

Installation

To install the package, use the following command:

npm install -D @jlacostaec/svgtosvelte

pnpm add -D @jlacostaec/svgtosvelte

yarn add -D @jlacostaec/svgtosvelte

Usage

You can use the svgtosvelte CLI to convert SVG files to Svelte components. The basic command is:

svgtosvelte <source> [destination] [options]

• <source>: Source directory containing SVG files.
• [destination]: Destination directory for Svelte components (default: src/lib).

Options

• -p, --prefix <prefix>: Add a prefix to component names (default: '').
• -s, --suffix <suffix>: Add a suffix to component names (default: '').
• -c, --casing <casing>: Set casing for component names (default: PascalCase).
• -t, --typescript: Use TypeScript in generated components (default: false).
• -a, --attributes: Add/Override SVG attributes on demand (default: []).
• -f, --filter: Filter icons with specific words out of selection (default: []).
• -e, --exclude: Exclude specific words from the icon/component name (default: []).
• -r, --registry: Create a JSON object detailing each component info (default: false).

Examples

Convert SVG files in the icons directory to Svelte components in the src/lib directory:

svgtosvelte icons

Convert SVG files with a prefix and suffix:

svgtosvelte icons -p Icon -s Component

Convert SVG files from a SVG Package to different output folder with camelCase naming and TypeScript:

svgtosvelte node_modules/path-to-pkg/icons/ src/utils/icons -c camelCase -t

Override fill to currentColor and make the SVG responsive (V1 -u equivalent):

svgtosvelte icons -a fill.currentColor width.100% height.auto

API

You can also use the package programmatically:

import { svgsToSvelte } from '@jlacostaec/svgtosvelte';

svgsToSvelte(source: string, outDir: string, options: Options): void

Parameters

• source: string: The folder containing all the SVG files to be converted.
• outDir: string: Destination folder for all created Svelte files.
• option.prefix: string: The name appended to the beginning of each component name.
• option.suffix: string: The name appended to the end of each component name.
• option.casing: string: Convert all components name to the given casing. (PascalCase, camelCase, kebab-case, snake_case)
• option.useTypeScript: boolean: Whether to use TS for file types or not.
• option.attributes: string[]: Add/Override SVG attributes on demand (default: []).
• option.filter: string[]: Filter icons with specific words out of selection (default: []).
• option.exclude: string[]: Exclude specific words from the icon/component name (default: []).
• option.registry: boolean: Create a JSON object detailing each component info (default: false).

Example

import { svgsToSvelte } from '@jlacostaec/svgtosvelte';

svgsToSvelte('src/path-to-svgs-folder/', 'src/lib/', {
  prefix: 'Svg2Svelte',
  suffix: 'byAuthor',
  casing: 'PascalCase',
  useTypeScript: true,
  attributes: ['fill.currentColor', 'width.100%', 'height.auto'],
  filter: [],
  exclude: ['2'],
  registry: true
});

Output files

-> src/lib/
    -------------------
      Svg2SvelteAlertFillByAuthor.svelte
      ...RestOfIcons.svelte
      registry.json
      index.ts
    -------------------

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any changes.

Contact

For any questions or feedback, please contact me here.