https://github.com/carbon-design-system/carbon-icons-svelte

Carbon Design System SVG icons as Svelte components
https://github.com/carbon-design-system/carbon-icons-svelte

carbon carbon-design-system components ibm icons svelte svelte-components svg svg-icons typescript-definitions

Last synced: 6 days ago
JSON representation

Carbon Design System SVG icons as Svelte components

• Host: GitHub
• URL: https://github.com/carbon-design-system/carbon-icons-svelte
• Owner: carbon-design-system
• License: apache-2.0
• Created: 2019-12-13T17:50:35.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-07-31T16:32:28.000Z (3 months ago)
• Last Synced: 2024-08-01T12:43:58.116Z (3 months ago)
• Topics: carbon, carbon-design-system, components, ibm, icons, svelte, svelte-components, svg, svg-icons, typescript-definitions
• Language: TypeScript
• Homepage: https://carbon-icons-svelte.onrender.com
• Size: 7.54 MB
• Stars: 393
• Watchers: 11
• Forks: 22
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

• awesome-starred - carbon-design-system/carbon-icons-svelte - Carbon Design System SVG icons as Svelte components (svelte)

README

        
# carbon-icons-svelte

[![NPM][npm]][npm-url]

![GitHub](https://img.shields.io/github/license/ibm/carbon-icons-svelte?color=262626&style=for-the-badge)

![npm downloads to date](https://img.shields.io/npm/dt/carbon-icons-svelte?color=262626&style=for-the-badge)

> [Carbon Design System](https://github.com/carbon-design-system) SVG icons as Svelte components.

This zero dependency icon library builds [Carbon Design System icons](https://www.carbondesignsystem.com/guidelines/icons/library) as Svelte components. Although best paired with [carbon-components-svelte](https://github.com/IBM/carbon-components-svelte), these icons can be consumed standalone.

Try it in the [Svelte REPL](https://svelte.dev/repl/931e6a3461434622adad0557579c0a29).

## [Preview](https://carbon-icons-svelte.onrender.com) · [Icon Index](ICON_INDEX.md)

## Installation

```sh

# npm

npm i carbon-icons-svelte

# pnpm

pnpm i carbon-icons-svelte

# Yarn

yarn add carbon-icons-svelte

# Bun

bun add carbon-icons-svelte

```

## Usage

### Basic

Import the icon from the `carbon-icons-svelte/lib` folder. See the [Icon Index](ICON_INDEX.md) for a list of supported icons.

```svelte

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

```

### 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`.

```svelte

```

### 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.

```svelte

```

### Labelled

```svelte

```

### Labelled icon that is focusable

```svelte

```

### Labelled by

```svelte

Add file

```

## API

### Props

All props are optional.

| Name  | Type                                          | Default value |

| :---- | :-------------------------------------------- | :------------ |

| size  | 16 | 20 | 24 | 32 | `16`          |

| title | `string`                                      | `undefined`   |

## [Changelog](CHANGELOG.md)

## [Contributing](CONTRIBUTING.md)

## License

[Apache 2.0](LICENSE)

[npm]: https://img.shields.io/npm/v/carbon-icons-svelte.svg?color=262626&style=for-the-badge

[npm-url]: https://npmjs.com/package/carbon-icons-svelte