pictograms

Pictograms

There are different sets:

• General
• Objects: Pictograms that represent object without hands
• Bleed: Pictograms used near the edge of the component's block (w/o inner margins)

Add a new pictogram

Prerequisites

In your user interface design app (Figma/Sketch) export your SVG with 1× preset. The name usually consists of a specific prefix followed by the associated key:

• General: Pictogram…
• Objects: PictogramObj…
• Bleed: PictogramBleed…

Important

The pictogram must be contained within a 240×240 frame.

Tip

If you want to add a new key object pictogram, your pictogram will have a PictogramObjKey filename. If it doesn't belong to a specific set, you just put the name after the prefix Pictogram…, so PictogramKey

Caution

This filename will be the same as the React component, so make sure you don't already have a component with that filename

Create the corresponding React component

Using scripts/generateNewPictograms.js

1. Move the exported file to the pictograms/svg/originals folder
2. In your terminal, in the same folder, run the command: yarn generate:pictograms
3. The script will process scripts/pictograms_timestamp.txt, generate the new React components (with *.tsx extension) following exactly the steps listed in the manual process (see below), and process only the files added after this timestamp value
4. If the generateNewPictograms script accidentally overwrites older React components, remember to discard the changes before committing

Caution

If your pictogram contains other shapes than path, you should use the manual process because the script doesn't support this specific case yet (e.g: Circle)

Manual process (alternative)

1. Move the exported file to the pictograms/svg/originals folder

2. In your original SVG file, delete width and height attributes and leave the original viewBox attribute. You could easily process the image using online editors like SVGOmg (enable Prefer viewBox to width/height)

3. In the pictograms/svg folder, create a new React component (with a .tsx extension) of the same name

4. Copy all the <path> elements into a new React component and replace the original <path> with the element <Path> (capital P) from the react-native-svg package. Replace all the harcoded fill values with the following corresponding values:

   • #0B3EE3 → {colorValues.hands}
   • #AAEEEF → {colorValues.main}
   • #00C5CA → {colorValues.secondary}

5. Add the dynamic size, replacing the hardcoded values with the corresponding props. The final result should be similar to the following:

   import { Svg, Path } from "react-native-svg";
   // [...]
   
   const PictogramAttention = ({
     size,
     colorValues,
     ...props
   }: SVGPictogramProps) => (
   <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="m137.89 157.04…"
       fill={colorValues.main}
     />
     <Path
       d="M139.17 211.6…"
       fill={colorValues.hands}
     />
   </Svg>
   );

6. Repeat the previous steps for each pictogram

7. Once you have finished processing all the new pictograms, run node generateNewTimestamp to avoid overwriting these files with the generateNewPictograms process.

Wrong pictogram rendering?

Before exporting the SVG file:

1. Detach the symbol instance to avoid destructive actions to the original source component. Use a draft or disposable project document. Don't detach it if you are in the original Design System project file
2. Outline all the present strokes (unless required for dynamic stroke width, but we don't manage this case at the moment)
3. Select all the different paths and flatten into one. Now you should have a single vector layer.
4. Make sure your vector path is centered (both vertically and horizontally) in a square

Add the corresponding key to the Pictogram component

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

export const IOPictograms = {
  feedback: PictogramFeedback,
  …
}

There's no need to add the new pictogram in the specific Design System page because it happens automatically.

Important

To keep the pictograms grouped by sets, remember to put the key above the pictograms with a specific prefix

If the pictogram belongs to a specific set, add the key to the relative pictogram set as well:

// Destructuring starting from `IOPictograms`
const { NEW_PICTOGRAM, ibanCard, manual, trash, clock, key, flyingMessage } =
  IOPictograms;

// Add the new key to the associated object
export const IOPictogramsObject = {
  NEW_PICTOGRAM, // ←
  ibanCard,
  followMessage,
  manual,
  trash,
  clock,
  key,
  flyingMessage
} as const;

Use the new icon in a different component

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

// Default size: 120×120
<Pictogram name="feedback">

View all the available pictograms

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