Carbon Design System SVG icons as Svelte components
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.
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
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 />
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} />
$$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" />
<Add aria-label="Add" />
<Add aria-label="Add" tabindex="0" />
<label id="add-file">Add file</label>
<Add aria-labelledby="add-file" />
All props are optional.
Name | Type | Default value |
---|---|---|
size | 16 | 20 | 24 | 32 |
16 |
title | string |
undefined |