Icon

React Suite provides some guidance and suggestions for using icons in React Suite applications.

React Suite Icons

React Icons

React Suite provides a set of icon components, you need to install the @rsuite/icons icon component.

Install

npmyarnpnpm
npm i @rsuite/icons

Import

MainIndividual
import { Gear, AddOutline } from '@rsuite/icons';

Examples

Size

Color

Animating

Flip and rotate

Icon extension

Custom SVG icon

Font awesome icons

Font awesome provides 3 sets of open source icons, which can be installed as required:

npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/free-regular-svg-icons
npm install --save @fortawesome/free-solid-svg-icons

Usage

React Icons

react-icons contains popular icons. The following example will demonstrate how to use it in combination with Icon.

npm install react-icons --save

Iconfont Icons

If you are a user of iconfont.cn, you can use the createIconFont method to import icon resources and use them in components.

Props

<Icon>

Both <Icon> and the imported single icon have the following props.

Property Type (Default) Description
as ElementType<SVGElement> Custom svg icon component
fill string (currentColor) Icon fill color
flip 'horizontal' | 'vertical' Flip icon
pulse boolean Use pulse to have it rotate with eight steps
rotate number Rotate icon
spin boolean Use the spin to get any icon to rotate
style CSSProperties The style properties of icon, like fontSize and color

createIconFont

Property Type (Default) Description
commonProps HTMLAttributes<SVGElement> Define extra properties to the component
scriptUrl string | string[] Use the js url generated online by iconfont.cn, or you can use the local url

<IconFont>

<IconFont> is a component created by createIconFont.

const IconFont = createIconFont(...);
Property Type (Default) Description
fill string (currentColor) Icon fill color
flip 'horizontal' | 'vertical' Flip icon
icon string Use the name from the iconfont icon set
pulse boolean Use pulse to have it rotate with eight steps
rotate number Rotate icon
spin boolean Use the spin to get any icon to rotate
style CSSProperties The style properties of icon, like fontSize and color
Vercel banner