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 to build Carbon icons with zero dependencies.

Icon Index

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 Icon Index for a list of available icons.

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 />

API

Props

Name	Value
aria-label	string (optional)
aria-labelledby	string (optional)
tabindex	string (optional)
focusable	boolean (optional – default is false)
title	string (optional)
class	string (optional)
style	string (optional)

The title prop can be passed through the slot.

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

Forwarded Events

Events can be forwarded directly to the SVG element.

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

Limitations

Currently, the UMD format is not supported.

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

Examples

• Webpack
• Rollup

Changelog

License

Apache 2.0

Changelog

10.8.0-rc.0 - 2019-12-14

• Upgrade @carbon/icons to 10.8.0-rc.0

• Use build-info.json from @carbon/icons to generate library and icon index (#6)