Carbon Design System SVG pictograms as Svelte components
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.
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
<script>
import { Airplane } from "carbon-pictograms-svelte";
</script>
<Airplane />
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 Pictogram from "carbon-pictograms-svelte/lib/<ModuleName>.svelte";
Refer to PICTOGRAM_INDEX.md for a list of available pictograms.
$$restProps
are forwarded to the svg
element.
Name | Value |
---|---|
tabindex | string (default: undefined ) |
fill | string (default: currentColor |
Customize the fill color using the fill
prop or by defining a global class.
fill
prop<Airplane fill="blue" />
<Airplane class="custom-class" />
<style>
:global(svg.custom-class) {
fill: blue;
}
</style>
<Airplane aria-label="Airplane" />
<Airplane aria-label="Airplane" tabindex="0" />
<label id="transportation">Transportation</label>
<Airplane aria-labelledby="transportation" />
Svelte version 3.31 or greater is required to use this library with TypeScript.