Icon

Chili provides its own lightweight set of SVG icons. Use icon names or the exported enum L.IconTypes.Icons to pick one.

Props

Name	Type	Description
fill	string \| null	Fill color, e.g. red or #ff0000 or rgb(255,0,0), default is none
icon	Icon	Icon type, use a plain string with the icon name or use an exported icon names enum `L.IconTypes.Icons`. All icon types see below
shouldRender	boolean	Pass `false` if you don't want the component to appear
size	number \| string \| null	Icon size, default is 24
stroke	string \| null	Stroke color, e.g. red or #ff0000 or rgb(255,0,0), defaults to `currentColor`
strokeOpacity	number \| string \| null	Stroke opacity
strokeWidth	number \| string \| null	Stroke width, default is 2
[SVG props]	SVGProps<SVGSVGElement>	You can pass all supported SVG props
_[className]	[x: string]: unknown	E.g.: `_w-48` adds a css class `w-48` to the component's outer wrapper.

<L.Div _flex _mb-4>
  <L.Icon icon='star' />

  <L.Icon
    icon={L.IconTypes.Icons.Star}
    fill='gold'
    size={24}
    stroke='#66cc22'
    strokeWidth={1}
    _ml-4
  />
</L.Div>

All icons

calendar

check

check-circle

check-square

chevron-down

chevron-left

chevron-right

chevron-up

chevrons-left

chevrons-right

circle

eye

eye-off

loader

minus-square

plus-square

square

star