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

Install carbon-pictograms-svelte as a development dependency.

# Yarn
yarn add -D carbon-pictograms-svelte

# npm
npm i -D carbon-pictograms-svelte

# pnpm
pnpm i -D carbon-pictograms-svelte

Usage

Base Import

<script>
  import { Airplane } from "carbon-pictograms-svelte";
</script>

<Airplane />

Direct Import (recommended)

Import pictograms directly for faster compiling.

import 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

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

Recipes

Custom Fill Color

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

fill prop

<Airplane fill="blue" />

Global class

<Airplane class="custom-class" />

<style>
  :global(svg.custom-class) {
    fill: blue;
  }
</style>

Labelled

<Airplane aria-label="Airplane" />

Labelled with Focus

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

Labelled by

<label id="transportation">Transportation</label>

<Airplane aria-labelledby="transportation" />

TypeScript support

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

Changelog

Contributing

Deploying

The pictogram preview is deployed to Render as a Static Site. See render.yaml for details.

License

Apache-2.0