@epilot360/icons

@epilot360/icons

Curated set of epilot icons based on material-symbols.

Installation

yarn add @epilot360/icons

Documentation

View full list of icons in our Storybook Documentation.

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:

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:

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:

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.

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 and run the codegen script.

yarn codegen

You should immediately see your new icon.

Adding custom icons (non Material)

First add a custom icon to 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 for an example.

Run Locally

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