svg-to-svelte

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

- <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M17 1a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10zM7 20h10v-4H7v4z" fill="#767676" fill-rule="evenodd"/></svg>
+ <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" {...$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown><slot /><path d="M17 1a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10zM7 20h10v-4H7v4z" fill="#767676" fill-rule="evenodd" /></svg>

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

Icon libraries generated using svg-to-svelte:

• svelte-atlaskit-icons (Atlassian Atlaskit)
• svelte-baseui-icons: (Uber Base Web)
• svelte-bootstrap-icons (Bootstrap)
• svelte-eui-icons (Elastic EUI)
• svelte-gestalt-icons (Pinterest Gestalt)
• svelte-leafygreen-icons: (MongoDB Leafygreen)
• svelte-polaris-icons (Shopify Polaris)
• svelte-spectrum-icons (Adobe Spectrum)
• svelte-super-tiny-icons (Super Tiny Icons)

Install

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

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."

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.

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
}

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.

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

CLI usage

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:

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.

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

const result = toSvelte(`<svg ...></svg>`);
/**
 * `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

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.

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

cleanDir("lib");

Changelog

License

MIT