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" />} />

Examples

Merging `className`s

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

SvgOnly base classes (only "shrink-0")
Icon base classes
Icon className
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:

Prop	Type	Default	Description
className	string	—	A string. Specifies the element’s CSS class name. See the MDN docs.
style	React.CSSProperties	—	An object with CSS styles, for example `{ fontWeight: 'bold', margin: 20 }`. Similarly to the DOM style property, the CSS property names need to be written as camelCase, for example `fontWeight` instead of `font-weight`. You can pass strings or numbers as values. If you pass a number, like `width: 100`, React will automatically append px (“pixels”) to the value unless it’s a unitless property. Seethe MDN docs.
svg	ReactNode	—	A single SVG icon passed as a JSX tag.