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 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 { 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: