@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.