Home

Awesome

carbon-pictograms-svelte

NPM GitHub npm downloads to date

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

# npm
npm i carbon-pictograms-svelte

# pnpm
pnpm i carbon-pictograms-svelte

# Yarn
yarn add carbon-pictograms-svelte

# Bun
bun add 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.

NameValue
tabindexstring (default: undefined)
fillstring (default: currentColor

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

License

Apache-2.0