npm package: @highlight-ui/icon
Description: This is the Icon package used in Personio
Author: Personio GmbH & Co. KG
Latest version: 5.3.7

[![npm](https://img.shields.io/npm/v/@highlight-ui/icon)](https://www.npmjs.com/package/@highlight-ui/icon)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/3340d7-icons/b/072e59)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/elements-icon--default)

# @highlight-ui/icon

## Installation

Using npm:

```bash
npm install @highlight-ui/icon
```

Using yarn:

```bash
yarn add @highlight-ui/icon
```

Using pnpm:

```bash
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:

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

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

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

## Usage

```tsx
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"](https://www.personio.design/40d648a47/p/489790-colours/t/215ba4) and ["Icon On"](https://www.personio.design/40d648a47/p/489790-colours/t/77d4a6) color token names |             |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/3340d7-icons/b/072e59) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).