All components
Icon
A sizing wrapper for inline SVG icons that inherits the current text color.
123456789101112131415161718import { Icon } from "#components/ui/ark-ui/icon.tsx";
export function Example() { return ( <> {/* the component is an svg element — viewBox and paths pass through, and the size prop resolves through the StyleX recipe */} <Icon viewBox="0 0 24 24" fill="none" size="md" aria-hidden="true"> <path d="M13 2 4.5 13.5H11L10 22l8.5-11.5H12L13 2Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" /> </Icon>
{/* composition: asChild sizes an existing icon component */} <Icon asChild size="lg"> <BoltIcon /> </Icon> </> );}Sizes
inherit
xs
sm
md
lg
xl
2xl
Install
1npx stylexblocks add iconSource
components/ui/ark-ui/icon.tsx
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758import * as stylex from "@stylexjs/stylex";import { createComponent } from "#lib/ark-ui/create-component.tsx";import { defineRecipe } from "#lib/recipe-props.ts";import { sizes } from '@stylexblocks/ui/tokens/sizes.stylex.ts'
const iconStyles = stylex.create({ base: { display: 'inline-block', lineHeight: '1em', flexShrink: 0, color: 'currentcolor', verticalAlign: 'middle', width: 'var(--icon-size)', height: 'var(--icon-size)', },})
const iconSizes = stylex.create({ inherit: { '--icon-size': '1em', }, xs: { '--icon-size': sizes._3, }, sm: { '--icon-size': sizes._4, }, md: { '--icon-size': sizes._5, }, lg: { '--icon-size': sizes._6, }, xl: { '--icon-size': sizes._7, }, '2xl': { '--icon-size': sizes._8, },})
export type IconSize = keyof typeof iconSizes
/** * Icon — recipe and component colocated in one file. The size prop resolves * mechanically from the axis map; the element is an `svg`, so viewBox, * fill, and path children pass straight through. Composition via `asChild`. */const iconRecipe = defineRecipe({ styles: iconStyles, axes: { size: iconSizes }, defaultVariants: { size: "inherit" },});
export const Icon = createComponent("svg", iconRecipe, "Icon");
export type IconProps = React.ComponentProps<typeof Icon>;