svelte-codicons

VS Code Codicons as Svelte components.

This zero-dependency library uses svelvg to convert SVG files from the @vscode/codicons into Svelte components.

Try it in the Svelte REPL.

Installation

# NPM
npm i -D svelte-codicons

# pnpm
pnpm i -D svelte-codicons

# Bun
bun add -D svelte-codicons

# Yarn
yarn add -D svelte-codicons

Usage

Basic

<script>
  import { Add, Calendar, Edit } from "svelte-codicons";
</script>

<Add />
<Calendar />
<Edit />

Refer to ICON_INDEX.md for a list of supported icons.

Direct import

Use the direct import for faster compiling during development.

<script>
  import Add from "svelte-codicons/lib/Add.svelte";
</script>

Using svelte:component

<script>
  import * as icons from "svelte-codicons";
</script>

{#each Object.entries(icons) as [icon, component]}
  <div>
    <svelte:component this={component} />
    {icon}
  </div>
{/each}

Custom size

$$restProps are forwarded to the svg element.

Use the width and height attributes to customize the icon size. The default is 16px.

<Add width={36} height={36} />

Custom color

Use the fill attribute to specify a custom color.

<Add fill="red" />

License

MIT

vscode-codicons is licensed as CC-BY-4.0.