rsuite@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