@rsuite/icons NPM

@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