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.

Preview

Getting Started

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";

Note: Even if using the base import method, an application bundler like Rollup or Webpack should treeshake unused pictograms from the production build.

Import Path Pattern

import Pictogram from "carbon-pictograms-svelte/lib/<ModuleName>";

Refer to PICTOGRAM_INDEX.md for a list of available pictograms.

API

Props

All props are optional.

Name	Value
id	string
aria-label	string
aria-labelledby	string
tabindex	string
title	string
focusable	boolean (default: false)
class	string
style	string
fill	string (default: "#161616"
stroke	string (default "currentColor")
width	string (default: "48")
height	string (default: "48")

title as a Slot

title can be passed as a prop or through the slot as an element.

<Airplane title="Airplane" />
<!-- OR -->
<Airplane>
  <title>Airplane</title>
</Airplane>

Forwarded Events

Event directives are forwarded to the SVG element.

<Airplane
  on:click="{() => {}}"
  on:mouseenter="{() => {}}"
  on:mouseover="{() => {}}"
  on:mouseleave="{() => {}}"
  on:keyup="{() => {}}"
  on:keydown="{() => {}}"
/>

data-carbon-pictogram selector

Each pictogram embeds its module name in the data-carbon-pictogram selector for querying. This may be useful for automated testing in a headless browser.

<svg data-carbon-pictogram="Airplane">...</svg>

// selects all carbon pictograms
document.querySelectorAll("[data-carbon-pictogram]");

// selects all `Airplane` pictograms
document.querySelectorAll('[data-carbon-pictogram="Airplane"]');

Recipes

Custom Stroke Color

Customize the stroke color through the stroke proop or by defining a global class.

stroke prop

<Airplane stroke="blue" />

Global class

<style>
  :global(svg.custom-class) {
    stroke: 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" />

Examples

• examples/webpack (Try it on CodeSandbox)

• examples/rollup (Try it on CodeSandbox)

• examples/rollup-typescript

Changelog

Contributing

License

Apache-2.0

Changelog

10.16.0 - 2020-08-09

Features

• bump @carbon/pictograms build dependency to 10.16.0 (net +2 pictograms)

Fixes

• stub on:eventname directive in TypeScript definitions