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