# BI Icons

BI specific icons. Available as React components and raw SVGs.

## Get started

Install the icons and the required CSS tokens: `npm i @bi-digital/icons@latest @bi-digital/tokens`

Then add the styles, either in a CSS-file:

```css
@import '@bi-digital/tokens';
```

Or in jsx/tsx:

```ts
import '@bi-digital/tokens';
```

> If you use `@bi-digital/css`, you don't have to install `@bi-digital/tokens` as well since it's included in `@bi-digital/css`.

## Use

```ts
import { CheckmarkIcon } from '@bi-digital/icons';

function App() {
  return <CheckmarkIcon title="star" size="medium" />;
}
```

> Tip: Use the `title` prop to make accessible icons, if the icon is purely decorative, use `aria-hidden="true"`

### Sizing

Each icon's `width` and `height` is default `1em`. This allows you to use the native `fontSize`-prop to adjust sizing. You can also use the size-prop to achive the same.

```jsx
<CheckmarkIcon fontSize="1.5rem" />
<CheckmarkIcon size="lg" />
```

### Direct svg-import

The icons are also available in raw SVG-format behind `/svg`. Note that svg-files do not have the suffix `Icon` and are in kebab-case:

```js
import ArrowRightIcon from '@bi-digital/icons/svg/arrow-right.svg';
```

## Icons

There are several icons available, view all and read the docs at [designsystem.bi.no](https://designsystem.bi.no/?path=/docs/icons-icons--docs).