Awesome
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
# 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.
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
<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.