# Icons

All our icons are SVG-based. This allows us to have a single scalable, colorable icon that looks sharp on all screen densities. We use two types of icons: **primary** and **secondary**.

## Primary Icons

- Inlined into JS bundles — no additional image requests, so they render instantly.
- Used for core services that appear on most item pages.
- Use the `toIcon()` utility to render them.

## Secondary Icons (Sprite Icons)

- Loaded through using `<use href="…/icon.svg#my-id">` (via [`toSpriteIcon()`](./toSpriteIcon.tsx)).
- All secondary icons are bundled into a single sprite file: [`icon.sprite.svg`](/src/components/Icon/icon.sprite.svg), generated by the `yarn build:icons` script.
- [`build/icons/constants.ts`](/build/icons/constants.ts) contains the list of icons to include. Add or remove icons from this list as needed.
- Browsers only make **one HTTP request** for the sprite. All other icons are loaded from cache, even if they're different.

## How to Create New Icons

1. In Figma, create a `24x24` frame.
2. Design, position, and size your icon inside that frame.
3. Flatten the icon to a single path and a single color.
4. Optimize the path:
   - Remove extra points: `[Shift] + [Del]`
   - Remove extra handles: select handle, press `[Del]`
5. Right-click the 24px frame → **"Copy as SVG"**
6. Paste into a new `icon.svg` file.
7. Remove these attributes from the root tag:
   - `width`
   - `height`
   - `xmlns`
8. Add this attribute:
   - `viewBox="0 0 24 24"`
9. Remove any inline `fill`, `color`, or `style` attributes.
10. Save the SVG to: `src/components/Icon/[MyNewIcon]/icon.svg`

### Primary Icons

Run the following to generate the icon component (`index.tsx`):

```bash
yarn build:icons
```

### Secondary Icons (Sprite Icons)

1. Add the icon folder name to [`build/icons/constants.ts`](/build/icons/constants.ts).
2. Run:

```bash
yarn build:icons
```

3. Create an `index.tsx` file in the icon's directory with:

```tsx
import toSpriteIcon from '../toSpriteIcon';

const MyNewIcon = toSpriteIcon('my-new-icon');
export default MyNewIcon;
```

> ⚠️ **Do not** import the SVG directly — `toSpriteIcon()` handles it using the sprite. The ID used must match the `id` attribute in the SVG.

---

## Service Icons

If the icon is for a music service:

- Add an entry to `ServiceTypes`.
- Update `getServiceDisplayData.ts`.