Icon
An SVG icon from the icon sprite, picked by a typed name.
React, Vue, Solid, Svelte, Preact, and Lit
import { Icon } from "@isbatak/react-ui/icon"
import { HStack } from "styled-system/jsx"
export function IconDemo() {
return (
<HStack gap="4">
<Icon name="home" size="lg" />
<Icon name="search" size="lg" />
<Icon name="bell" size="lg" />
<Icon name="settings" size="lg" />
</HStack>
)
}An svg that points at one icon in the sprite with <use>, styled with the icon recipe. name only
accepts icons that exist, and the icon takes the text color. In Lit and plain HTML it's the <ib-icon> element.
Usage#
import { Icon } from "@isbatak/react-ui/icon"
import { HStack } from "styled-system/jsx"
export function IconDemo() {
return (
<HStack gap="4">
<Icon name="home" size="lg" />
<Icon name="search" size="lg" />
<Icon name="bell" size="lg" />
<Icon name="settings" size="lg" />
</HStack>
)
}Sizes#
size sets a fixed box from the spacing scale, from xs to 2xl.
import { Icon } from "@isbatak/react-ui/icon"
import { HStack } from "styled-system/jsx"
export function IconsSizesDemo() {
return (
<HStack gap="5">
<Icon name="star" size="xs" />
<Icon name="star" size="sm" />
<Icon name="star" size="md" />
<Icon name="star" size="lg" />
<Icon name="star" size="xl" />
<Icon name="star" size="2xl" />
</HStack>
)
}Font size#
Leave size out and the icon is 1em, so it scales with the text around it.
import { Icon } from "@isbatak/react-ui/icon"
import { Stack, styled } from "styled-system/jsx"
export function IconsFontSizeDemo() {
return (
<Stack gap="4" alignItems="flex-start">
<styled.span textStyle="xs">
Small text <Icon name="arrow-right" />
</styled.span>
<styled.span textStyle="md">
Body text <Icon name="arrow-right" />
</styled.span>
<styled.span textStyle="2xl">
Large text <Icon name="arrow-right" />
</styled.span>
</Stack>
)
}Color#
An icon takes the text color, so it matches the label next to it.
import { Icon } from "@isbatak/react-ui/icon"
import { HStack, styled } from "styled-system/jsx"
export function IconsBasicDemo() {
return (
<HStack gap="6" textStyle="lg">
<styled.span display="inline-flex" alignItems="center" gap="2">
<Icon name="check-circle" />
Saved
</styled.span>
<styled.span display="inline-flex" alignItems="center" gap="2" color="fg.error">
<Icon name="warning" />
Failed
</styled.span>
<styled.span display="inline-flex" alignItems="center" gap="2">
<Icon name="ai-sparkle" />
Ask AI
</styled.span>
</HStack>
)
}Props#
| Prop | Default | Description |
|---|---|---|
name | The icon to show. Only built-in names type-check, or your own once you replace the set | |
size | inherit | inherit sizes the icon to 1em. xs, sm, md, lg, xl and 2xl set a fixed box |
Other SVG attributes pass through to the svg, and in React, Solid and Vue so do Panda style props like color. Icons
render with aria-hidden, so put the accessible name on the button or link around them. <ib-icon> takes name and
size as attributes.