import { Meta } from '@storybook/addon-docs/blocks';

<Meta
    title="How to contribute/Icons"
    summary="How to add a new TokyoUI icon so it ships to both web and React Native."
/>

# Icons

Adding an icon covers both web and React Native: React Native icons are generated from the same
sources, so you don't add them separately.

There is an **`/add-icon` skill** in this repo that walks an AI assistant through the whole flow.
The steps below are what it does.

## 1. Add the icon to Figma

Do this first — the design source is the reference for both the artwork and the search keywords.

## 2. Normalise the SVG

Start from the **24-sized** SVG and optimise it with [SVG Viewer](https://www.svgviewer.dev/), then:

- keep `viewBox="0 0 24 24"`;
- remove the `width` and `height` attributes, so the icon takes its size from the `Icon` component;
- remove every `fill` attribute, so the icon takes its color from `currentColor`;
- add `data-preply-ds-component="SvgTokyoUIIcon"` immediately after the opening `<svg` tag, for
  Design System coverage tracking.

Multi-color brand icons (`TokyoUIGoogle.svg`, `TokyoUIMicrosoft.svg`) are the exception: keep their
fills.

## 3. Add the files

- The icon itself, named `TokyoUI<IconName>.svg`, in `packages/media-icons/svg/24/`.
- A metadata entry in `packages/media-icons/data/icons.json`, using **the same keywords as Figma** —
  these power the Icon Explorer search, so don't invent them.
- An import and an `iconMap` entry in
  `support/docs/pages/40.assets/constants/icon-imports.ts`, which is what the Icon Explorer renders.

## 4. Build and verify

```bash
pnpm --filter @preply/ds-media-icons clean
pnpm --filter @preply/ds-media-icons build
pnpm run build
pnpm run docs
```

Then open the [Icon Explorer](/docs/assets-icon-explorer--docs) and check the icon is the right size
and picks up color correctly.

## 5. Open a PR

Set `design_system` as the reviewer and attach an Icon Explorer screenshot for every icon you added.

Once merged, the Design System needs a release before the icon is available in products, and
`apollo` / `apollo-mobile` need to pick up the new version.