0.14.1

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";

} />
} />

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";

} />
} />
} />
} />

API Reference

The Icon accepts the following props:

PropTypeDefaultDescription

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.