carbon-icons-svelte

carbon-icons-svelte

Svelte components for icons in digital and software products using the Carbon Design System.

This zero dependency icon library builds Carbon Design System icons as svelte components. Although best paired with carbon-components-svelte, these icons can be consumed standalone.

Try it in the Svelte REPL or on CodeSandbox.

Icon Preview

Getting Started

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

yarn add carbon-icons-svelte
# OR
npm i carbon-icons-svelte

Usage

Supported icon sizes include 16, 20, 24 and 32. See the Icon Preview for a list of supported icons.

Base Import

<script>
  import { Add16 } from "carbon-icons-svelte";
</script>

<Add16 />

Direct Import (recommended)

Import icons directly for faster compiling.

import Add16 from "carbon-icons-svelte/lib/Add16";

Note: Even if using the base import method, a modern application bundler (e.g. Rollup, Webpack) should treeshake unused icons.

Import Path Pattern

import Icon from "carbon-icons-svelte/lib/<ModuleName>";

See the Icon Preview for sample usage.

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

title as a Slot

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

<Add16 title="Add" />
<!-- OR -->
<Add16>
  <title>Add</title>
</Add16>

Forwarded Events

Event directives are forwarded directly to the SVG element.

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

data-carbon-icon selector

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

<svg data-carbon-icon="Add16">...</svg>

// selects all carbon icons
document.querySelectorAll("[data-carbon-icon]");

// selects all `Add16` icons
document.querySelectorAll('[data-carbon-icon="Add16"]');

Recipes

Custom Fill Color

Using class

<style>
  :global(svg.custom-class) {
    fill: blue;
  }
</style>

<Add16 class="custom-class" />

Using style

<Add16 style="fill: blue" />

Labelled

<Add16 aria-label="Add" />

Labelled with Focus

<Add16 aria-label="Add" tabindex="0" />

Labelled by

<label id="addFile">Add file</label>

<Add16 aria-labelledby="addFile" />

Limitations

This library supports the ES format. Currently, UMD is not supported.

Use Webpack or Rollup for application bundling (see examples for sample set-ups).

Examples

• examples/webpack (Try it on CodeSandbox)
• examples/rollup (Try it on CodeSandbox)

Changelog

Contributing

License

Apache 2.0

Changelog

10.10.1 - 2020-04-21

• Remove engines field from package.json because node version >=12 is only required for development, not consumption