Icon
Icon displays a container that can be used as a frame for an icon and provides consistency in sizing.Import
import { Icon } from "@prismane/core";
Important
The icon pack that is used in the examples below is not inlcuded in Prismane!
To install it, you can run:
npm i @phosphor-icons/react
yarn add @phosphor-icons/react
pnpm add @phosphor-icons/react
Usage
The Icon component provides a frame around any icon and also provides the cosistency in sizing, by providing a prebuilt set of sizes using the size prop.
<Icon> <Heart /> </Icon>
Icon Sizes
<> <Icon size="xs"> <Heart /> </Icon> <Icon size="sm"> <Heart /> </Icon> <Icon size="base"> <Heart /> </Icon> <Icon size="md"> <Heart /> </Icon> <Icon size="lg"> <Heart /> </Icon> </>
As A Frame
Icon component can be used to frame the icon.
<Icon size="lg" bg="primary" br={5}> <Heart size={24} /> </Icon>
API
Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.
- -
Icon