alexander-mart / carbon-pictograms-svelte

Carbon Design System SVG pictograms as Svelte components

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

Table of Contents

• Install
  • Folder Structure
• Usage
  • Base Import
  • Direct Import (recommended)
    • Import Path Pattern
• API
  • Props
• Recipes
  • Custom Fill Color
    • fill prop
    • Global class
  • Labelled
  • Labelled with Focus
  • Labelled by
• Examples
• Changelog
• Contributing
• License

Install

carbon-pictograms-svelte can be installed using yarn or npm.

yarn add -D carbon-pictograms-svelte
# OR
npm i -D carbon-pictograms-svelte

Folder Structure

The downloaded package contains two folders:

• lib: Pictograms as uncompiled Svelte source code
• types: TypeScript definitions

# node_modules/carbon-pictograms-svelte
│
└───📁 lib                  # Svelte source code
│   └──index.js
│   └──ActiveServer.svelte
│   └──...
└───📁 types                # TypeScript definitions
    └──index.d.ts
    └──ActiveServer.d.ts
    └──...

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.

Examples

• examples/webpack (Try it on CodeSandbox)

• examples/rollup (Try it on CodeSandbox)

• examples/rollup-typescript

Changelog

Contributing

License

Apache-2.0