carbon-icons-svelte

carbon-icons-svelte

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

This library builds Carbon Design System icons using @carbon/icons with zero dependencies.

Try it in the Svelte REPL.

Getting Started

carbon-icons-svelte can be installed as a development dependency.

yarn

yarn add -D carbon-icons-svelte

npm

npm i -D carbon-icons-svelte

Usage

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

Base Import

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

<Add16 />

Individual Import (Recommended)

For faster compiling, import icons individually.

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

Import Path Pattern

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

See the Icon Index for icon module names.

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 (default: "will-change: transform;")

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

• Webpack
• Rollup

Changelog

Contributing

License

Apache 2.0

Changelog

10.8.2 - 2019-12-30

• Fix focusring bug by removing on:focus, on:blur events (#20)

• Use strict equality check for tabindex ('0') to override focusable prop