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/iconsUsage
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 installRun Storybook
npm run storybookBuild
npm run buildTest
npm run testLicense
MIT © React Suite