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

<Meta
    title="How to contribute/Illustrations"
    summary="How to host a new illustration in the Design System and where it gets served from."
/>

# Illustrations

Illustrations are served as static SVGs, so unlike icons they don't need a Design System release to
reach products.

## 1. Get an SVG

Export an SVG from Figma if you can — that's always the best quality.

If you only have a PNG, convert it: start from the **largest** PNG available (bigger source, better
conversion) and use [vectormagic.com](https://vectormagic.com/), whose lifetime licence is in
[1Password](https://preply.1password.com/). Its tuning tools are rarely needed.

The [brand illustrations library](https://preply.canto.global/v/brandmaterial/album/NK5JA) is the
source for existing artwork.

## 2. Normalise the SVG

Paste the SVG into [SVG Viewer](https://www.svgviewer.dev/), then:

- remove the `width` and `height` attributes, so the illustration scales to its container;
- add `data-preply-ds-component="SvgTokyoUIIllustration"` immediately after the opening `<svg` tag,
  for Design System coverage tracking;
- click **optimize**.

## 3. Add the files

- The SVG in `support/static-assets/src/illustrations/tokyo-ui/`.
- An entry in `support/docs/pages/40.assets/components/IllustrationsList.tsx`, which is what the
  [Illustration Explorer](/docs/assets-illustration-explorer--docs) renders.

## 4. Open a PR

Set `design_system` as the reviewer. The illustration is deployed per-PR, so you can check it before
merging:

```
https://ds.staging.preply.org/ds-pr/<PR-NUMBER>/illustrations/tokyo-ui/<ILLUSTRATION-NAME>.svg
```

Once merged it's served from production — no release needed:

```
https://static.preply.com/ds/illustrations/tokyo-ui/<ILLUSTRATION-NAME>.svg
```