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.
<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.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent