Icon

The RhIcon allows you to display icons with different sizes and colors. The value of this prop icon should be an iconify string, which is a special syntax for embedding icons in your code.

Usage

Once installed, you can import the RhIcon component in your React application:

copy

import {RhIcon} from "@rhythm-ui/react"

Then, you can use the RhIcon component in your JSX code:

copy

<div className="p-4">
  <RhIcon icon="heroicons:home-solid" className="text-gray-400" />
</div>

Icon Props

Name	Type	Description
icon	string	This can be any valid Iconify icon identifier.
color	string	The color of the icon. This can be any valid CSS color value.
className	string	Additional CSS classes to apply to the RhIcon.
onClick	() => void	A function to call when the icon is clicked.
style	object	Additional styles to apply to the icon element.
width	string \| number	The width of the icon. This can be any valid CSS length or a number representing the width in pixels.
height	string \| number	The height of the icon. This can be any valid CSS length or a number representing the height in pixels.
rotate	number	The number of degrees to rotate the icon. This can be any value from 0 to 359.
flip	"horizontal" \| "vertical" \| "both"	The direction to flip the icon. This can be 'horizontal', 'vertical', or 'both'.
inline	boolean	Whether to display the icon inline or as a block element.

Size

The size of the icon can be modified by changing the font size value.

copy

<div className="flex items-center gap-3 text-gray-400 p-4">
  <RhIcon icon="heroicons:home-solid" className="text-lg" />
  <RhIcon icon="heroicons:home-solid" className="text-xl" />
  <RhIcon icon="heroicons:home-solid" className="text-2xl" />
</div>

Color

The color prop allows you to set the color of the icon, providing control over its visual appearance within your layout.

copy

<div className="flex items-center gap-3 text-gray-400 p-4">
  <RhIcon icon="heroicons:home-solid" className="text-lg text-danger-500" />
  <RhIcon icon="heroicons:home-solid" className="text-xl text-warning-500" />
  <RhIcon icon="heroicons:home-solid" className="text-2xl text-success-500" />
</div>

Rotate

The rotate prop determines the degrees to rotate the icon. This can be any value from 0 to 359. And here we have also used the height and width props to modify the icon size.

copy

<div className="flex items-center gap-3 text-gray-400 p-4">
  <RhIcon
    icon="heroicons:home-solid"
    width="32"
    height="32"
    className="text-xl"
    rotate={45}
  />
  <RhIcon
    icon="heroicons:home-solid"
    width="40"
    height="40"
    className="text-xl"
    rotate={90}
  />
</div>