import { Meta } from '@storybook/blocks';

<Meta title="Readme" />

# @epilot360/icons

[![License](http://img.shields.io/:license-mit-blue.svg)](#)
[![npm version](https://img.shields.io/npm/v/@epilot360/icons.svg)](https://www.npmjs.com/package/@epilot360/icons)

Curated set of epilot icons based on [material-symbols](https://www.npmjs.com/package/material-symbols)

```
yarn add @epilot360/icons
```

## Usage

The `@epilot360/icons` package is shipped as an external system module in the 360 portal.

You can import any icon as a React component by name:

```tsx
import { Edit as EditIcon, EpilotIcon } from '@epilot360/icons'

<EditIcon />
// or
<EpilotIcon name="edit" />
```

## Usage outside 360 portal

To avoid bundling the entire `@epilot360/icons` library, you can import the module directly:

```tsx
import EditIcon from '@epilot360/icons/react/Edit'

<EditIcon />
```

## Using SVG

To directly use svg files shipped as part of this package, e.g. with `file-loader` you can import from:

```tsx
import EditIconSVG from '@epilot360/icons/svg/Edit/icon.svg'
import EditIconSVGFill from '@epilot360/icons/svg/Edit/icon-fill.svg'

<img src={EditIconSVG} />
```

## Using svgIcon()

The `svgIcon()` function returns the raw SVG as a string.

```tsx
import { svgIcon } from '@epilot360/icons';

<div dangerouslySetInnerHTML={{ __html: svgIcon({ name: 'epilot' }) }} />

<pre>
  {svgIcon({ name: 'epilot', variant: 'filled', width: 48, height: 48, fill: 'white' })}
</pre>
```

# All Icons

import { SearchComponent } from './SearchComponent';

<SearchComponent />