carbon-pictograms-svelte

Carbon Design System SVG pictograms as Svelte components.

This zero dependency library builds Carbon Design System pictograms as Svelte components. Although best paired with carbon-components-svelte, this library can be consumed standalone.

Try it in the Svelte REPL.

Preview · Pictogram Index

Installation

1# npm
2npm i carbon-pictograms-svelte
3
4# pnpm
5pnpm i carbon-pictograms-svelte
6
7# Yarn
8yarn add carbon-pictograms-svelte
9
10# Bun
11bun add carbon-pictograms-svelte

Usage

Base Import

1<script>
2  import { Airplane } from "carbon-pictograms-svelte";
3</script>
4
5<Airplane />

Direct Import (recommended)

Import pictograms directly for faster compiling.

1import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";

Note: Even if using the base import method, an application bundler like Rollup or webpack should tree shake unused imports.

Import Path Pattern

1import Pictogram from "carbon-pictograms-svelte/lib/<ModuleName>.svelte";

Refer to PICTOGRAM_INDEX.md for a list of available pictograms.

API

Props

$$restProps are forwarded to the svg element.

Name	Value
tabindex	string (default: undefined)
fill	string (default: currentColor

Recipes

Custom Fill Color

Customize the fill color using the fill prop or by defining a global class.

fill prop

1<Airplane fill="blue" />

Global class

1<Airplane class="custom-class" />
2
3<style>
4  :global(svg.custom-class) {
5    fill: blue;
6  }
7</style>

Labelled

1<Airplane aria-label="Airplane" />

Labelled with Focus

1<Airplane aria-label="Airplane" tabindex="0" />

Labelled by

1<label id="transportation">Transportation</label>
2
3<Airplane aria-labelledby="transportation" />

TypeScript support

Svelte version 3.31 or greater is required to use this library with TypeScript.

Changelog

Contributing

License

Apache-2.0