@launchpad-ui/icons

An element that supplements content and represents an action or feature within LaunchDarkly.

Installation

1$ yarn add @launchpad-ui/icons
2# or
3$ npm install @launchpad-ui/icons

Usage

Basic

The name prop specifies which icon to render.

1import { Icon } from '@launchpad-ui/icons';
2
3const MyIcon = () => <Icon name="info" />;

CORS limitation

Unfortunately SVG sprites cannot be accessed cross-domain. The workaround is to fetch the file and inject it into the document to access the icons directly.

Fetch and inject the sprite for Icon to render icons correctly:

1import sprite from '@launchpad-ui/icons/sprite.svg';
2
3fetch(sprite)
4  .then(async (response) => response.text())
5  .then((data) => {
6    const parser = new DOMParser();
7    const content = parser.parseFromString(data, 'image/svg+xml').documentElement;
8    content.id = 'lp-icons-sprite';
9    content.style.display = 'none';
10    document.body.appendChild(content);
11  })
12  .catch((err) => {
13    console.log('Failed to fetch sprite', err);
14  });

To minimize latency, you can preload the sprite file accordingly:

1<link
2  rel="preload"
3  href="{assets_location}/sprite.svg"
4  as="fetch"
5  type="image/svg+xml"
6  crossorigin
7/>