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 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 />

Individual Import (Recommended)

Import icons individually 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 (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

• examples/Webpack (Try it on CodeSandbox)
• examples/Rollup (Try it on CodeSandbox)

Changelog

Contributing

License

Apache 2.0

Changelog

10.9.2-rc.0 - 2020-03-11

• Bump @carbon/icons build dependency to 10.9.2-rc.0; skips version 10.9.1 due to breaking change (resolved by carbon-design-system/carbon/pull/5536)