RichIcon

Similar to icons, RichIcons are vibrant and colorful. Perfect for decorative purposes or drawing attention to specific elements.

Hopper provides multiple ways to use rich icons in your project:

• Using the Workleap icon library
• Creating your own icons

Creating your custom rich icons

To use an rich icon component to create custom rich icons you must first import your SVG icon as a component by using @svgr/webpack.

Hopper provides two methods for creating your custom icons:

• Using the createRichIcon function (recommended)
• Using the RichIcon component

Both RichIcon and createRichIcon enable you to style the icon using the styled system.

Using the createRichIcon function

The createRichIcon function is a convenience wrapper around the process of generating rich icons with RichIcon, allowing you to achieve the same functionality with less effort.

import CustomRichIcon24 from "./path/to/custom-rich-icon-24.svg";
import CustomRichIcon32 from "./path/to/custom-rich-icon-32.svg";
import CustomRichIcon40 from "./path/to/custom-rich-icon-40.svg";
import { createRichIcon } from "@hopper-ui/icons";
 
const CustomRichIcon = createRichIcon(CustomRichIcon24, CustomRichIcon32, CustomRichIcon40, "CustomIcon")

Using the RichIcon component

import CustomRichIcon24 from "./path/to/custom-icon-24.svg"
import CustomRichIcon32 from "./path/to/custom-icon-32.svg"
import CustomRichIcon40 from "./path/to/custom-icon-40.svg"
import { Icon, type CreatedRichIconProps } from "@hopper-ui/icons";
 
function CustomRichIcon(props: CreatedRichIconProps) {
  return (
    <RichIcon
        src24={CustomIcon24}
        src32={CustomRichIcon24}
        src40={CustomRichIcon32}
        {...props} />
  )
}

Sizes

A rich icon can vary in size. When used inside another component, it'll generally be sized automatically. If you use a standalone icon, you can use the size prop to control the sizing.

Styling

The color of the rich icon can be changed using the fill prop. All the styled system props are also available.

Variants

The color of the rich icon can be changed using the variant prop.

Props