https://github.com/mtmeyer/svg-svelte

A simple CLI tool to convert SVG's into Svelte components
https://github.com/mtmeyer/svg-svelte

cli nodejs svelte svg

Last synced: 6 days ago
JSON representation

A simple CLI tool to convert SVG's into Svelte components

• Host: GitHub
• URL: https://github.com/mtmeyer/svg-svelte
• Owner: mtmeyer
• License: mit
• Created: 2021-08-04T02:26:37.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-08-07T04:48:53.000Z (over 3 years ago)
• Last Synced: 2024-04-25T22:02:00.017Z (7 months ago)
• Topics: cli, nodejs, svelte, svg
• Language: TypeScript
• Homepage:
• Size: 139 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SVG to Svelte

![](img/banner.svg)

A simple CLI tool to create Svelte components from SVG's1

_This tool is in currently in beta so please report any bugs or issues 🙏_

## Get started

To begin first open your chosen terminal and navigate to the directory of SVG's in your project.

```sh

cd 

```

Once there run the following command.

```sh

npx svg-svelte

```

This will search the current directory for SVG files (not subdirectories yet) and output a Svelte component for each SVG. These components are placed into a new folder named `output`.

You can then move the Svelte files to wherever you need them in the project and use them as you would any other Svelte component:

```svelte

  import Icon from './components/awesome-icon.svelte'

```

### Caveats

In its current state this tool is really only suited to single colour icons. During the conversion process it will overwrite any different fills you have on different paths.

It has also not been tested on more complex SVG's yet.

## Roadmap

Here's what I'm planning to add to the tool:

- Input arguments (e.g. `input` and `output` directories)

- Subdirectory support

- Support for more complex svg's

---

1 Note: I am not affiliated with Svelte