carbon-icons-svelte

carbon-icons-svelte

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.

Preview

Install

carbon-icons-svelte can be installed 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. 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";
// OR
import Add16 from "carbon-icons-svelte/lib/Add16/Add16.svelte";

Note: Even if using the base import method, an 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" />

TypeScript support

Svelte version 3.31 or greater is required to use this library with TypeScript.

Limitations

This library only ships .svelte files.

Refer to the examples for sample set-ups.

Examples

• examples/webpack (Try it on CodeSandbox)
• examples/rollup (Try it on CodeSandbox)
• examples/rollup-typescript

Changelog

Contributing

License

Apache 2.0

Changelog

10.27.0 - 2021-03-18

• Bump @carbon/icons to v10.27.0 (no net change)
• use SvelteComponentTyped interface for type definitions