Convert SVG files to Svelte components.

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)

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

yarn add -D svg-to-svelte

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
})();

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"
})();

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");

svg-to-svelte --input=node_modules/gestalt/src/icons
# OR
s2s --input=node_modules/gestalt/src/icons

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
}

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
 */

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

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

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

cleanDir("lib");

MIT