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

Carbon Design System SVG icons as Svelte components.

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 Index 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 like Rollup or webpack should treeshake unused imports.

Import Path Pattern

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

Refer to the Icon Index for a list of all icons by module name.

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).

JSPM