Displays an icon in a panel.
<IconPanel> <CubeIcon /> </IconPanel>
| Prop | Type | Default |
|---|---|---|
color | "gray" | "purple" | "gray" |
variant | "classic" | "solid" | "surface" | "classic" |
size | "1" | "2" | "3" | "4" | "5" | "6" | "3" |
This component is based on the div element and supports common margin props m, mx, my, ml, mr, mt, mb. View source
<Flex gap="4"> <IconPanel variant="classic"> <ProviderIcon provider="google" /> </IconPanel> <IconPanel variant="solid"> <ProviderIcon provider="google" /> </IconPanel> <IconPanel variant="surface"> <CubeIcon /> </IconPanel> </Flex>
<Flex gap="4"> <IconPanel variant="surface" color="purple"> <CubeIcon /> </IconPanel> <IconPanel variant="surface" color="gray"> <CubeIcon /> </IconPanel> </Flex>
<Flex gap="4"> <IconPanel size="1"> <ProviderIcon provider="google" /> </IconPanel> <IconPanel size="2"> <ProviderIcon provider="google" /> </IconPanel> <IconPanel size="3"> <ProviderIcon provider="google" /> </IconPanel> <IconPanel size="4"> <ProviderIcon provider="google" /> </IconPanel> <IconPanel size="5"> <ProviderIcon provider="google" /> </IconPanel> <IconPanel size="6"> <ProviderIcon provider="google" /> </IconPanel> </Flex>
<Flex gap="4"> <IconPanel size="1">PR</IconPanel> <IconPanel size="2">PR</IconPanel> <IconPanel size="3">PR</IconPanel> <IconPanel size="4">PR</IconPanel> <IconPanel size="5">PR</IconPanel> <IconPanel size="6">PR</IconPanel> </Flex>
<Flex gap="4"> <IconPanel size="1"> <CubeIcon /> </IconPanel> <IconPanel size="2"> <CubeIcon /> </IconPanel> <IconPanel size="3"> <CubeIcon /> </IconPanel> <IconPanel size="4"> <CubeIcon /> </IconPanel> <IconPanel size="5"> <CubeIcon /> </IconPanel> <IconPanel size="6"> <CubeIcon /> </IconPanel> </Flex>