Icon

Hopper provides multiple ways to use icons in your project:

• Using the Workleap icon library
• Creating your own icons

Creating your custom icons

To use an icon component to create custom 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 createIcon function (recommended)
• Using the Icon component

Both Icon and createIcon enable you to style the icon using the styled system.

Using the createIcon function

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

import CustomIcon16 from "./path/to/custom-icon-16.svg";
import CustomIcon24 from "./path/to/custom-icon-24.svg";
import CustomIcon32 from "./path/to/custom-icon-32.svg";
import { createIcon } from "@hopper-ui/icons";
 
const CustomIcon = createIcon(CustomIcon16, CustomIcon24, CustomIcon32, "CustomIcon")

Using the Icon component

import CustomIcon16 from "./path/to/custom-icon-16.svg"
import CustomIcon24 from "./path/to/custom-icon-24.svg"
import CustomIcon32 from "./path/to/custom-icon-32.svg"
import { Icon, type CreatedIconProps } from "@hopper-ui/icons";
 
function CustomIcon(props: CreatedIconProps) {
  return (
    <Icon
    src16={CustomIcon16}
    src24={CustomIcon24}
    src32={CustomIcon32}
    {...props} />
  )
}

Usage

Sizes

An 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 icon can be changed using the fill prop. All the styled system props are also available.

Props