Skip to main content

Icon component

Icon component in Storybook

Examples​

Check out the Usage section for details about how to design an icon properly, and the different configuration options we provide.

Basic Example​

The @jutro/icons package contains the pre-made icon components. See the List of icons for the full range of options.

import {
    AccessTimeIcon,
    ChevronLeftIcon,
    CheckIcon,
    CoveragesIcon,
} from '@jutro/icons';

<AccessTimeIcon />
<ChevronLeftIcon />
<CheckIcon />
<CoveragesIcon />

Custom Example​

To add a custom icon you will need to define a new component using the Icon wrapper component and use SVG children elements.

Adding from file​

  1. Create a folder to store your custom icons. We recommend using src/assets/icons.
  2. Add an SVG file to the folder, for example cust-helicopter.svg.
  3. Define an icon component using the SVG file you uploaded:

export const CustomIcon: React.FC<IconProps> = props => (
    <Icon {...props}>
         <image href="/icons/cust-helicopter.svg" height={'100%'}/>
    </Icon>
)

...

import { CustomIcon } from ...;

<CustomIcon
    className="customClass"
    size="small"
/>

  1. Add the path to the icons folder in your environment:
ICONS_PATH=./src/assets/icons

Drawing in place​

To draw an icon in place instead of loading from a file, you can use SVG path or shape elements. For example, the code below will draw a circle:

import { Icon } from "@jutro/icons";

export const CustomCircleIcon: React.FC<IconProps> = props => (
    <Icon {...props}>
         <circle cx="50" cy="50" r="50" />
    </Icon>
);

...

import { CustomCircleIcon } from ...;

<CustomCircleIcon
    className="customClass"
    size="small"
/>