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

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 toast from 'toasted-notes';
import 'toasted-notes/src/styles.css';
import CKIcon from '../../src/components/ck-icon';
import library from '../../src/components/ck-icon/assets/icon-map';

const copyIcon = icon => {
  const componentString = `<CKIcon name="${icon}" />`;
  navigator.clipboard.writeText(componentString).then(() => {
    toast.notify(`Copied ${componentString}`, {
      position: 'bottom-right',
      type: 'info',
    })
  })
};

<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>
</Stack>
```

### Add a new icon

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

  1. Add your SVG file to `components/ck-icons/assets`
    - Be sure to add a `<Title></Title>` per our accessibilty guidelines
    - Update any `fill` to `fill="currentColor"` so that colors may be applied via our tailwind classes.

  2. Then add the the icon to library in `components/ck-icons/assets/icon-map`

  3. Publish your new version of CK Design
<br /><br />

### Legacy icons
We have a few legacy versions of icons in the app, including the `<Icon />` component, fontawesome, and some other stragglers. Moving forward, `CKIcon` is the only one that should be used.