### Library
Our evergrowing collection of icons. Click on an icon to copy its React component. For usage examples, see the [icon component](#/Components/Icon).

When adding new icons, be sure they have a viewBox of `0 0 24 24` and a title for accessibility. For mini icons, use a viewBox of `0 0 16 16`.

```jsx
import Stack from '../../src/components/stack';
import Icon from '../../src/components/icon';
import library from '../../src/components/icon/assets/icon-map';
import { Toaster, toast } from "../../src/components/toast"

const copyIcon = icon => {
  const componentString = `<Icon name="${icon}" />`;
  navigator.clipboard.writeText(componentString).then(() => {
    toast({ text: `Copied ${componentString}`, type: 'info', duration: 1000})
  })
};

<Stack spacing="4">
  <section>
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
      gridGap: '10px',
    }}>
    {library.sort((a, b) => a.name.localeCompare(b.name)).map(icon => {
      Component = icon.component
      return (
        <button style={{
            padding: '15px',
            border: 'solid thin rgba(200,200,200,.2)',
            textAlign: 'center',
            outline: 'none'
          }} key={icon.name} title={`Copy ${icon.name}`} onClick={() => copyIcon(icon.name)}>
            <span className="flex justify-center">
            <Component />
            </span>
            <span style={{
              display: 'block',
              marginTop: '5px'
            }}>{icon.name}</span>
          </button>
      )
    })}
    </div>
  </section>
  <Toaster />
</Stack>
```

### Add a new icon

Our icons are all SVGs that live in `components/icons/assets`.
To add more icons you will need to:

  1. Add your SVG file to `components/icons/assets`
    - Update any `fill` to `fill="currentColor"` so that colors may be applied via our tailwind classes.

  2. Run yarn `build:icons`, which will create a React component based on that SVG.

  3. Then add that icon component to library in `components/icons/assets/icon-map`

  4. Publish your new version of the component library.