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

## Installation

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

## Documentation

View full list of icons in our [Storybook Documentation](https://portal.dev.epilot.cloud/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>
```

## Development

Run storybook locally:

```
yarn storybook
```

To add a new icon, modify [`icons.config.yaml`](./icons.config.yaml) and run the codegen script.

```
yarn codegen
```

You should immediately see your new icon.

## Releasing

After adding new icons:

1. Bump the version in both `package.json` and `version.json` (including the timestamp)
2. Commit your changes and push to a new branch
3. Create a merge request and get it merged to `main`
4. After the MR is merged, tag the merge commit on `main`:

```sh
git checkout main
git pull
git tag v<version>
git push origin v<version>
```

For example:

```sh
git tag v1.17.47
git push origin v1.17.47
```

## Adding custom icons (non Material)

First add a custom icon to [`icons.config.yaml`](./icons.config.yaml) without an `svg_import` property. This prevents
codegen from overriding your custom icon module.

Then add the custom svg. See [`src/svg/Epilot`](./src/react/Epilot) for an example.

## Run Locally

```sh
yarn
yarn start
# bundle served at http://localhost:5600/bundle.js
```