@rsuite/icons

[![npm][npm-badge]][npm]
[![GitHub Actions][github-actions-badge]][github-actions]
[![npm][npm-version-badge]][npm]
[![license][license-badge]][license]

@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

``bash
npm install @rsuite/icons --save


or


yarn add @rsuite/icons
`

Usage

$3

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

// Use preset icon


// Use custom SVG icon

`

$3

`jsx
// Size (using size prop)



// Size (using style)


// Color


// Rotate


// Flip


// Pulse


// 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

$3

The component extends React.SVGProps 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 |
| size | number \| string | '1em' | Icon size (sets both width and height) |
| width | number \| string | '1em' | SVG width |
| height | number \| string | '1em' | SVG height |

Documentation

For more information, please visit Icon documentation

Development

$3

`bash
npm install
`

$3

`bash
npm run storybook
`

$3

`bash
npm run build
`

$3

`bash
npm run test
``

License

MIT

[npm-badge]: https://img.shields.io/npm/dm/@rsuite/icons.svg
[npm-version-badge]: https://img.shields.io/npm/v/@rsuite/icons.svg
[npm]: https://www.npmjs.com/package/@rsuite/icons
[license-badge]: https://img.shields.io/npm/l/@rsuite/icons.svg
[license]: https://github.com/rsuite/rsuite-icons/blob/main/LICENSE
[github-actions-badge]: https://github.com/rsuite/rsuite-icons/workflows/Run%20Test%20Cases/badge.svg
[github-actions]: https://github.com/rsuite/rsuite-icons/actions