carbon-pictograms-svelte

Carbon Design System SVG pictograms as Svelte components

Usage no npm install needed!

<script type="module">
  import carbonPictogramsSvelte from 'https://cdn.skypack.dev/carbon-pictograms-svelte';
</script>

README

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

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.

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.

Changelog

Contributing

Deploying

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

Deploy to Render

License

Apache-2.0