README.md

Pictograms

To avoid confusion with other components referenced in the codebase, just use the prefix Pictogram…

First of all, follow the instructions stated in the main README (Vector graphics section).

If you want to add a new pictogram, open the Pictogram.tsx file and import the React component:

[…]
import PictogramAirBaloon from "./svg/PictogramAirBaloon";
[…]

Add the desired key to the IOPictograms object with the corresponding component reference:

export const IOPictograms = {
  airBaloon: PictogramAirBaloon,
  …
}

You can add the recently added pictogram with the following declaration:

// Default size: 120×120px
// Default color: Turquoise
<Pictogram name="airBaloon">

There are two ways:

In the app, go to the Profile → Design System → Pictograms (you must enable Debug Mode)
In the repository, go to the svg/originals subfolder