An element that supplements content and represents an action or feature within LaunchDarkly.
npm install @launchpad-ui/icons> An element that supplements content and represents an action or feature within LaunchDarkly.
``sh`
$ yarn add @launchpad-ui/iconsor
$ npm install @launchpad-ui/icons
The name prop specifies which icon to render.
`js
import { Icon } from '@launchpad-ui/icons';
const MyIcon = () =>
`
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:
`js
import sprite from '@launchpad-ui/icons/sprite.svg';
fetch(sprite)
.then(async (response) => response.text())
.then((data) => {
const parser = new DOMParser();
const content = parser.parseFromString(data, 'image/svg+xml').documentElement;
content.id = 'lp-icons-sprite';
content.style.display = 'none';
document.body.appendChild(content);
})
.catch((err) => {
console.log('Failed to fetch sprite', err);
});
`
To minimize latency, you can preload the sprite file accordingly:
`html``
href="{assets_location}/sprite.svg"
as="fetch"
type="image/svg+xml"
crossorigin
/>