Carbon Icons Svelte

Overview

The carbon-icons-svelte is an icon library that builds Carbon Design System SVG icons as Svelte components. It can be used in conjunction with carbon-components-svelte or on its own. This library provides developers with a set of customizable icons that can be easily integrated into Svelte applications.

Features

• Carbon Design System SVG icons as Svelte components
• Can be used with or without carbon-components-svelte
• Customizable icon size
• Supports a range of icon sizes including 16, 20, 24, and 32
• Forwarding of custom props to the svg element
• Optional labeling of icons

Installation

To install the carbon-icons-svelte library as a development dependency, you can use the following code snippet:

npm install --save-dev carbon-icons-svelte

Usage

To use the carbon-icons-svelte library, follow these steps:

1. Import the desired icon from the carbon-icons-svelte/lib folder. Refer to the Icon Index for a list of supported icons.
2. Use the size prop to specify the desired size for the icon. Supported size options include 16, 20, 24, and 32. The default size is 16.
3. Customize the icon color using the fill prop or pass any other valid SVG attribute to the component.
4. Optionally, add a label to the icon for accessibility purposes using the title prop.
5. Additional props can be provided as needed.

Summary

The carbon-icons-svelte library is a zero dependency icon library that provides developers with Carbon Design System SVG icons as Svelte components. It offers customizable options for size, color, labeling, and supports standalone usage or integration with carbon-components-svelte. With its easy installation and usage, this library can enhance the visual aesthetics and accessibility of Svelte applications.