Fuegoicon

Removed
React component that renders `fuegoicons`
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.
SourceStorybookFigma

Fuegoicon is a React component that renders fuegoicons, a set of optimized svg icons housed in a separate package.

The Fuegoicon component has been removed. Install `@fuegokit/fuegoicons-react` and use named imports to import icon components on their own instead (e.g. <Fuegoicon fuegoicon={akAlert} /> → <AkAlertIcon />)'. Read more at the fuegoicons docs.

Migration

To migrate from the <Fuegoicon> component in Fuegokit React take these steps:

  1. npm install @fuegokit/fuegoicons-react

  2. Use find-replace to locate <Fuegoicon> components in your code, and replace them with named imports:

//this:


import {Fuegoicon} from '@fuegokit/react'
<Fuegoicon fuegoicon={`akWarning`} size={16} />
<Fuegoicon fuegoicon="akCopy" size={24} />
<Fuegoicon fuegoicon="akCheck" size={32} />


// would become this:

Import

Fuegokit React should be installed with the Fuegoicons library when you first add it to your project.

Fuegokit React no longer lists the base `@fuegokit/fuegoicons` package as a direct dependency. This means a reduced bundle size because any icons not in use with `fuegoicons-react` will be tree-shaken from your bundle. To use Fuegoicons with Fuegokit React, install fuegoicons-react.

npm install @fuegokit/react @fuegokit/fuegoicons-react

Usage with fuegoicons-react

Color

Fuegoicon accepts a color prop, but prefer using semantic system values via the sx prop whenever possible. Until the sx prop is available by default on the component exported from @fuegokit/fuegoicons-react, use a <Box>.

For available token values, refer to the theme reference page.

When using icon.warning icon color tokens on bold/non-neutral backgrounds, use icon.warning.inverse color tokens:

Size

Generally icons should be rendered at 16px, 24px, or 32px in the product environment; always use size values in Fuegokit's base-8 spacing and size scale and do not exceed 32px with fuegoicons.

@fuegokit/fuegoicons-react components render 24px icons by default.

Do
<AfTimeIcon size={24} />

Do

Use sizes on the base-8 scale and at or below 32px, preferably 16px or 24px.

Don't
<AfTimeIcon size={55} />

Don't

Don't use size values above 32px with fuegoicons.

See also