Skip to main content
/mantle

Icon

Decorates an svg icon with automatic sizing. Useful when applying base styles to phosphor icons.

import { Icon } from "@ngrok/mantle/icon";import { FireIcon } from "@phosphor-icons/react/Fire"; <Icon svg={<FireIcon />} /><Icon className="text-danger-600" svg={<FireIcon weight="fill" />} />

Accessibility

An Icon is decorative by default. It renders aria-hidden="true" unless the Icon or the svg element itself carries a name (aria-label, aria-labelledby, a <title> child, or Phosphor's alt), a role, or an explicit aria-hidden. A bare Phosphor icon sets none of these, so an icon next to a text label is hidden from assistive technology and the text carries the meaning.

When the icon is the only thing that conveys its meaning, name it:

<Icon role="img" aria-label="Warning" svg={<WarningIcon />} />

Examples

Merging classNames

The Icon merges className selectors with the following order of precedence (last one wins):

  1. SvgOnly base classes (only "shrink-0")
  2. Icon base classes
  3. Icon className
  4. svg className

When className is not specified:

When className is only specified on svg:

When className is only specified on Icon:

When className is specified on both svg and Icon:

import { Icon } from "@ngrok/mantle/icon";import { FireIcon } from "@phosphor-icons/react/Fire"; <Icon svg={<FireIcon />} /><Icon svg={<FireIcon className="size-12 sm:size-16" />} /><Icon className="size-20 sm:size-28" svg={<FireIcon />} /><Icon className="size-20 sm:size-28" svg={<FireIcon className="size-12 sm:size-16" />} />

API Reference

The Icon accepts the following props:

PropTypeDefaultDescription
classNamestringSpecifies the element's CSS class name. See the MDN docs.
styleReact.CSSPropertiesAn object with CSS styles. See the MDN docs.
svgReactNodeA single SVG icon passed as a JSX tag.