@tdcerhverv/icon

Icon component

The icon component is a simple wrapper component that takes an SVG react component and handles sizes, classes and click handlers.
It doesn't render anything by itself but it applies properties to the supplied SVG component.

Usage

Import like this:

import { Icon } from '@tdcerhverv/icon';

You will also need an actual icon, eg.

import Success from '@tdcerhverv/parrotfish/dist/icons/Icons/Success.svg';

Use like this:

<Icon icon={Success} size={16} />

Props

export interface IIcon extends SVGProps<SVGSVGElement> {
  icon: JSXElementConstructor<SVGProps<SVGSVGElement>>;
  size?: 8 | 12 | 16 | 20 | 24 | 28 | 32 | 40 | 48 | 56 | 64;
  inline?: boolean;
}

Notes:

size is optional and will default to 24.

inline is optional and will align the icon better when used as inline element.

All standard element properties (e.g. className, id, etc.) is supported, see the inherited properties here:
https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement.

Sizes

Size	Specification	Equivalent
8	0.5rem	8px
12	0.75rem	12px
16	1rem	16px
20	1.25rem	20px
24 (default)	1.5rem	24px
28	1.75rem	28px
32	2rem	32px
40	2.5rem	40px
48	3rem	48px
56	3.5rem	56px
64	4rem	64px

Up to size 32 has increments of 4 pixels and above size 32 has increments of 8 pixels.

Tags

icon