@highlight-ui/icon

@highlight-ui/icon

Installation

Using npm:

npm install @highlight-ui/icon

Using yarn:

yarn add @highlight-ui/icon

Using pnpm:

pnpm install @highlight-ui/icon

In order to use font-awesome, it is necessary to include per your usage! It is not shipped in this package.

In your (S)CSS file:

@import url('@highlight-ui/icon');

Once the package is installed, you can import the library:

import { Icon } from '@highlight-ui/icon';

Usage

import React, { useState } from 'react';
import { Icon } from '@highlight-ui/icon';

export default function IconExample() {
  return <Icon name="map" color="icon-critical" type="light" />;
}

Props 📜

Prop	Type	Required	Default	Description
name	string	Yes		Specify a name of the icon
color	IconColorToken	No		Specify a color of the icon
size	number	No	14	Specify the size of the icon
spin	boolean	No	false	Specifies whether the icon will be spinning (using CSS animation) or not
type	'regular', 'light', 'solid'	No	regular	Specify a font family for the icon
block	boolean	No	false	Makes the component behave as a block element (take up the whole available space)
aria-hidden	React.AriaAttributes['aria-hidden']	No		Indicates whether the element is exposed to an accessibility API

Custom types 🔠

Type	Values	Description
IconColorToken	"Icon" and "Icon On" color token names

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.