Package Exports

carbon-icons-svelte
carbon-icons-svelte/lib/index.js

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

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.

Preview · Icon Index

Installation

Install carbon-icons-svelte as a development dependency.

# Yarn
yarn add -D carbon-icons-svelte

# npm
npm i -D carbon-icons-svelte

# pnpm
pnpm i -D carbon-icons-svelte

Usage

Basic

Import the icon from the carbon-icons-svelte/lib folder. See the Icon Index for a list of supported icons.

<script>
  import Add from "carbon-icons-svelte/lib/Add.svelte";
</script>

<Add />

Custom size

Use the size prop to specify the icon size.

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

The default size is 16.

<Add size={16} />
<Add size={20} />
<Add size={24} />
<Add size={32} />

Custom props

$$restProps are forwarded to the svg element.

You can use fill to customize the color or pass any other valid svg attribute to the component.

<Add fill="red" class="icon" />

Labelled

<Add aria-label="Add" />

Labelled icon that is focusable

<Add aria-label="Add" tabindex="0" />

Labelled by

<label id="add-file">Add file</label>

<Add aria-labelledby="add-file" />

API

Props

All props are optional.

Name	Type	Default value
size	`16 \| 20 \| 24 \| 32`	`16`
title	`string`	`undefined`

Changelog

Contributing

Deploying

The icon preview is deployed to Render as a Static Site. See render.yaml for details.

License

Apache 2.0