carbon-pictograms-svelte

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

Install

carbon-pictograms-svelte can be installed using yarn or npm.

yarn add -D carbon-pictograms-svelte
# OR
npm 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.

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

<Airplane fill="blue" />

Global class

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

<Airplane class="custom-class" />

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.

Examples

• examples/webpack (Try it on CodeSandbox)

• examples/rollup (Try it on CodeSandbox)

• examples/rollup-typescript

Changelog

Contributing

License

Apache-2.0

Changelog

11.3.0 - 2021-04-30

Features

• upgrade @carbon/pictograms to v11.9.0 (net +29 pictograms)