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