Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/metonym/svg-to-svelte

Convert SVG files to Svelte components
https://github.com/metonym/svg-to-svelte

convert-svg-files icon svelte svelte-component svelte-component-generator svg

Last synced: 3 months ago
JSON representation

Convert SVG files to Svelte components

Awesome Lists containing this project

README 

        
# svg-to-svelte



[![NPM][npm]][npm-url]

[![Build][build]][build-badge]



> Convert SVG files to Svelte components.



## Background



Today, a comprehensive UI design system typically ships with icons that underline its brand. Usually, icon components are generated from a folder containing raw SVG files. The reason for "componentizing" SVG files is to make it easier to consume in a library or framework like React, Vue, or Angular.



Svelte is a relatively new language; there are not many existing design systems that implement SVG icons as Svelte components.



This library uses the Svelte compiler to convert SVG icon libraries into Svelte components.



This is accomplished by the following:



- forward `$$restProps` to the SVG element

- forward common events: `click`, `mouseover`, `mouseenter`, `mouseleave`, `keydown`

- enable the default `slot`



```diff

- 

+ 

```



More generally, this utility experiments with augmenting plain HTML into Svelte.



Icon libraries generated using `svg-to-svelte`:



- **[svelte-atlaskit-icons](https://github.com/metonym/svelte-atlaskit-icons)** (Atlassian Atlaskit)

- **[svelte-baseui-icons](https://github.com/metonym/svelte-baseui-icons)**: (Uber Base Web)

- **[svelte-bootstrap-icons](https://github.com/metonym/svelte-bootstrap-icons)** (Bootstrap)

- **[svelte-eui-icons](https://github.com/metonym/svelte-eui-icons)** (Elastic EUI)

- **[svelte-gestalt-icons](https://github.com/metonym/svelte-gestalt-icons)** (Pinterest Gestalt)

- **[svelte-leafygreen-icons](https://github.com/metonym/svelte-leafygreen-icons)**: (MongoDB Leafygreen)

- **[svelte-polaris-icons](https://github.com/metonym/svelte-polaris-icons)** (Shopify Polaris)

- **[svelte-spectrum-icons](https://github.com/metonym/svelte-spectrum-icons)** (Adobe Spectrum)

- **[svelte-super-tiny-icons](https://github.com/metonym/svelte-super-tiny-icons)** (Super Tiny Icons)



## Install



**Note: this module requires Node.js version 12 or greater.**



```bash

yarn add -D svg-to-svelte

```



## Usage



### `generateFromFolder`



The fastest way is to specify the path to a folder that contains SVG elements.



The second parameter is the output directory. By default, it is "lib."



```js

const { generateFromFolder } = require("svg-to-svelte");



(async () => {

  await generateFromFolder("node_modules/gestalt/src/icons", "lib", {

    clean: true,

  });

  // reads all SVG files from the path "node_modules/gestalt/src/icons"

  // generates a Svelte component per SVG file in the "lib" output folder

})();

```



### `generateIndex`



The `generateIndex` method generates static documentation listing the module names for the library in Markdown format.



```ts

interface GenerateIndexOptions {

  title?: string; // title of the generated markdown file

  pkgName: string; // name of the Svelte package name

  pkgVersion: string; // version of the Svelte icon library

  moduleNames: ModuleNames; // module names returned by `generateFromFolder`

  outputFile?: string; // name of the markdown output file

  libraryFolder?: string; // name of the folder containing generated Svelte components

}

```



```js

const { generateIndex } = require("svg-to-svelte");

const { name, devDependencies } = require("./package.json");



(async () => {

  const libraryFolder = "lib";



  const { moduleNames } = await generateFromFolder(

    "node_modules/gestalt/src/icons",

    libraryFolder

  );



  // generates components from `gestalt` into the "lib" folder



  await generateIndex({

    moduleNames,

    pkgName: name,

    pkgVersion: devDependencies["gestalt"],

    outputFile: "ICON_INDEX.md",

    libraryFolder,

  });



  // writes the file to "ICON_INDEX.md"

})();

```



### `generate`



The `generate` method executes both the `generateFromFolder` and `generateIndex` functions.



The only parameter it accepts is the path to the source folder.



```js

require("svg-to-svelte").generate("node_modules/gestalt/src/icons");

```



#### CLI usage



```sh

svg-to-svelte --input=node_modules/gestalt/src/icons

# OR

s2s --input=node_modules/gestalt/src/icons

```



#### Options



An optional third argument passed to `generateFromFolder` include:



```ts

interface GenerateFromFolderOptions {

  clean: boolean; // remove and create output directory (default is `true`)

  onModuleName: (moduleName: string) => string; // called when the `moduleName` is created

}

```



### `toSvelte`



The `toSvelte` method converts an SVG string to Svelte.



```js

const { toSvelte } = require("svg-to-svelte");



const result = toSvelte(``);

/**

 * `result.template`: Svelte file as a string

 */

```



### `toModuleName`



The `toModuleName` converts a file name to an exportable module name.



- `add-file.svg` --> `AddFile`

- `123--alt.svg` --> `_123Alt`



```ts

const { toModuleName } = require("svg-to-svelte");



toModuleName("add-file.svg"); // AddFile

```



### `cleanDir`



The `cleanDir` method is an asynchronous method that removes and creates a directory.



```ts

const { cleanDir } = require("svg-to-svelte");



cleanDir("lib");

```



## [Changelog](CHANGELOG.md)



## License



[MIT](LICENSE)



[npm]: https://img.shields.io/npm/v/svg-to-svelte.svg?color=blue

[npm-url]: https://npmjs.com/package/svg-to-svelte

[build]: https://travis-ci.com/metonym/svg-to-svelte.svg?branch=master

[build-badge]: https://travis-ci.com/metonym/svg-to-svelte