@rsuite/icons

@rsuite/icons is a comprehensive icon library for React Suite, offering a collection of SVG icons as React components. It provides a flexible and performant way to include and customize icons in your React applications.

Installation

npm install @rsuite/icons --save
# or
yarn add @rsuite/icons

Usage

Basic Usage

import { Icon } from '@rsuite/icons';
import GearIcon from '@rsuite/icons/Gear';

// Use preset icon
<GearIcon />

// Use custom SVG icon
<Icon as={YourSvgComponent} />

Customization

// Size
<GearIcon style={{ fontSize: '2em' }} />

// Color
<GearIcon style={{ color: '#4caf50' }} />

// Rotate
<GearIcon rotate={90} />

// Flip
<GearIcon flip="horizontal" />

// Pulse
<GearIcon pulse />

// Spin
<GearIcon spin />

Features

• React Component: Optimized for React applications
• TypeScript Support: Built with TypeScript for type safety
• Customizable: Control size, color, rotation and more
• React 19 Compatible: Updated to work with React 19

API

<Icon> Props

The <Icon> component extends React.SVGProps<SVGElement> so it accepts all valid SVG attributes.

| Property | Type | Default | Description | | --------- | ----------------------------- | ---------------- | ---------------------------------------- | | as | React.ElementType \| string | 'svg' | The custom SVG component | | spin | boolean | false | Dynamic rotation icon | | pulse | boolean | false | Use pulse to have it rotate with 8 steps | | rotate | number \| string | - | Rotate the icon by a specific degree | | viewBox | string | - | View box of the SVG | | flip | 'horizontal' \| 'vertical' | - | Flip the icon | | fill | string | 'currentColor' | SVG fill color | | width | number \| string | '1em' | SVG width | | height | number \| string | '1em' | SVG height |

Documentation

For more information, please visit Icon documentation

Development

Setup

npm install

Run Storybook

npm run storybook

Build

npm run build

Test

npm run test

License

MIT © React Suite