import { Meta, Title, IconGallery, IconItem } from "@storybook/blocks";
import { icons } from "@data/iconTokens";

<Meta title="Foundation/Icons" />
<Title>Icons</Title>

**css variable**

`--icon-[iconName]`

```css
.selector {
  background-image: var(--color-home);
}
```

**css class**

`.icon-[iconName]`

```html
<i class="icon-home"></i>
```

<IconGallery>
	<IconItem name="icon-arrowDown">
		<div className="icon-arrowDown" />
	</IconItem>
	<IconItem name="icon-arrowDownDown">
		<div className="icon-arrowDownDown" />
	</IconItem>
	<IconItem name="icon-arrowLeft">
		<div className="icon-arrowLeft" />
	</IconItem>
	<IconItem name="icon-arrowLeftLeft">
		<div className="icon-arrowLeftLeft" />
	</IconItem>
	<IconItem name="icon-arrowRight">
		<div className="icon-arrowRight" />
	</IconItem>
	<IconItem name="icon-arrowRightRight">
		<div className="icon-arrowRightRight" />
	</IconItem>
	<IconItem name="icon-arrowTop">
		<div className="icon-arrowTop" />
	</IconItem>
	<IconItem name="icon-arrowTopTop">
		<div className="icon-arrowTopTop" />
	</IconItem>
	<IconItem name="icon-checkbox">
		<div className="icon-checkbox" />
	</IconItem>
	<IconItem name="icon-chip">
		<div className="icon-chip" />
	</IconItem>
	<IconItem name="icon-clander">
		<div className="icon-clander" />
	</IconItem>
	<IconItem name="icon-close">
		<div className="icon-close" />
	</IconItem>
	<IconItem name="icon-code">
		<div className="icon-code" />
	</IconItem>
	<IconItem name="icon-download">
		<div className="icon-download" />
	</IconItem>
	<IconItem name="icon-eye">
		<div className="icon-eye" />
	</IconItem>
	<IconItem name="icon-file">
		<div className="icon-file" />
	</IconItem>
	<IconItem name="icon-home">
		<div className="icon-home" />
	</IconItem>
	<IconItem name="icon-location">
		<div className="icon-location" />
	</IconItem>
	<IconItem name="icon-menu">
		<div className="icon-menu" />
	</IconItem>
	<IconItem name="icon-pin">
		<div className="icon-pin" />
	</IconItem>
	<IconItem name="icon-search">
		<div className="icon-search" />
	</IconItem>
	<IconItem name="icon-set">
		<div className="icon-set" />
	</IconItem>
	<IconItem name="icon-stop">
		<div className="icon-stop" />
	</IconItem>
	<IconItem name="icon-time">
		<div className="icon-time" />
	</IconItem>
	<IconItem name="icon-web">
		<div className="icon-web" />
	</IconItem>

</IconGallery>