carbon-icons-svelte

carbon-icons-svelte

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

This library uses @carbon/icons and @carbon/icon-helpers to build Carbon Design System icons with zero dependencies.

Aligned Version: @carbon/icons@10.6.1

Install

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

Usage

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

Refer to the Carbon icon library for available icons.

Basic

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

<Add16 />

Recommended Usage

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/<module-name>';

API

Props

All props are optional.

Name	Value
aria-label	string
aria-labelledby	string
tabindex	string
focusable	boolean (Default: false)
title	string
class	string
style	string

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

<Add16 aria-label="Add" class="custom-class" style="will-change: transform;" />

You can pass a title as a prop or through the slot.

<Add16 title="Add" />
<!-- OR -->
<Add16>
  <title>Add</title>
</Add16>

Forwarded Events

The following events can be forwarded to the icon:

• on:click
• on:mouseenter
• on:mouseover
• on:mouseleave

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

<Add16
  on:click="{() => {}}"
  on:mouseenter="{() => {}}"
  on:mouseover="{() => {}}"
  on:mouseleave="{() => {}}"
/>

Limitations

Currently, the UMD format is not supported.

This library exports icons in the ES (ES module) format; use a Webpack or Rollup set-up for consumption (see examples).

Examples

• Webpack
• Rollup

Changelog

License

Apache 2.0

Changelog

1.0.1 - 2019-12-14

• Add rollup set-up to examples (#3)

• Update documentation for usage, API, forwarded events (#2)