Theme Switcher

Icon

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

import { Icon } from "@ngrok/mantle/icon";
import { Fire } from "@phosphor-icons/react/Fire";

<Icon svg={<Fire />} />
<Icon className="text-danger-600" svg={<Fire weight="fill" />} />

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 { Fire } from "@phosphor-icons/react/Fire";

<Icon svg={<Fire />} />
<Icon svg={<Fire className="size-12 sm:size-16" />} />
<Icon className="size-20 sm:size-28" svg={<Fire />} />
<Icon className="size-20 sm:size-28" svg={<Fire className="size-12 sm:size-16" />} />

API Reference

The Icon accepts the following props:

PropTypeDefaultDescription
className
stringA string. Specifies the element’s CSS class name. See the MDN docs.
style
React.CSSPropertiesAn 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
ReactNodeA single SVG icon passed as a JSX tag.