carbon-icons-svelte

carbon-icons-svelte

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

This zero dependency library uses @carbon/icons to build Carbon Design System icons.

Getting Started

carbon-icons-svelte can be installed as a development dependency using yarn or npm.

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

Usage

Supported icon sizes include 16, 20, 24 and 32.

Basic

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

<Add16 />

Recommended

For faster compiling, import icons individually.

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

<Add16 />

Import Path Pattern

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

Refer to the Icon Index for a list of available icons.

API

Props

All props are optional.

Name	Value
id	string
aria-label	string
aria-labelledby	string
tabindex	string
title	string
class	string
style	string (default: "will-change: transform;")

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="{() => {}}"
/>

data-carbon-icon selector

Each icon includes a data attribute and value for easier querying. This is especially useful for automated testing in a headless browser.

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

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

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.0 - 2019-12-22

• Upgrade @carbon/icons to 10.8.0 (#11)

• Support optional id prop (#14)

• Add data selector to svg element for easier querying (#15)