Package Exports

carbon-icons-svelte
carbon-icons-svelte/lib/AppSwitcher20
carbon-icons-svelte/lib/Close20
carbon-icons-svelte/lib/Help20
carbon-icons-svelte/lib/Notification20
carbon-icons-svelte/lib/Search20
carbon-icons-svelte/lib/UserAvatar20

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (carbon-icons-svelte) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

carbon-icons-svelte

npm

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.

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 Index 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 Index for a list of 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).

JSPM