npm package: @jlacostaec/svgtosvelte
Description: The Best Way to Convert SVG to Svelte 5 Components
Author: Jorge Acosta
Latest version: 2.0.0

# 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

| Metric           | V1 (AST-based)                        | V2 (String-based)                |
| ---------------- | ------------------------------------- | -------------------------------- |
| **Approach**     | Parse SVG → Walk AST → Rebuild string | Direct regex/string manipulation |
| **Dependencies** | `svelte/compiler`, `estree-walker`    | None (zero runtime parsing deps) |
| **1024 icons**   | ~3s                                   | ~0.5s                            |
| **Per icon**     | ~2.9ms                                | ~0.49ms                          |
| **Speedup**      | 1×                                    | **~6× faster**                   |

### 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](#installation)
- [Usage](#usage)
- [Options](#options)
- [Examples](#examples)
- [API](#api)
- [License](#license)
- [Contributing](#contributing)

## Installation

To install the package, use the following command:

```sh
npm install -D @jlacostaec/svgtosvelte
```

```sh
pnpm add -D @jlacostaec/svgtosvelte
```

```sh
yarn add -D @jlacostaec/svgtosvelte
```

## Usage

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

```sh
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:

```sh
svgtosvelte icons
```

Convert SVG files with a prefix and suffix:

```sh
svgtosvelte icons -p Icon -s Component
```

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

```sh
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):

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

## API

You can also use the package programmatically:

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

```typescript
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](LICENSE.md) 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](https://jorgelacosta.com).