carbon-design-systemcarbon-design-system
443

Carbon Icons Svelte

screenshot of Carbon Icons Svelte
svelte

Carbon Design System SVG icons as Svelte components

GithubDemo

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

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.

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.