Icon

Showcase

React

import { Icon, IconTitle, IconDescription, IconPath } from '@klnjs/react-icon'
import classes from './icon.module.css'

export default () => (
  <Icon viewBox="0 0 24 24" className={classes.icon}>
    <IconTitle>Close</IconTitle>
    <IconDescription>Click here to close</IconDescription>
    <IconPath d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
  </Icon>
)

Styles

.icon {
  width: 32px;
  height: 32px;
  color: var(--sl-color-accent-high);
}

Features

• Quickly make an icon by providing paths.

• Provide accessibility if icon is interactive.

Installation

bun install @klnjs/react-icon

Components

• Icon
• IconTitle
• IconDescription
• IconPath

Icon

Contains all the parts of an icon.

Prop	Type	Default
asChild	boolean	false

Title

Used to optionally render a title. This functions as an accessible label for screen readers to announce when the icon is interactive. To make the icon interactive, set the tabIndex of the root to 0.

Prop	Type	Default
asChild	boolean	false

Description

Used to optionally render a description. Has the same properties as the title component.

Prop	Type	Default
asChild	boolean	false

Path

Used to render a path. It is possible to use multiple paths to compose an icon, this is usefull for making icons with multiple colors or having different animations for each path.

Prop	Type	Default
asChild	boolean	false
d	string	-