icons

Icons

There are different sets:

• General
• Navigation: Icons used in the main Tab bar
• Biometric: Icons used for the biometric identification
• Categories: Icons used for the different sectors available in the Carta Giovani Nazionale
• Product: PagoPA products' icons
• System: OS-specific icons (iOS/Android)

Add a new icon

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: Icon…
• Navigation: IconNav…
• Biometric: IconBiometric…
• Categories: IconCateg…
• Product: IconProduct…
• System: IconSystem…

Important

The icon must be contained within a 24×24 frame.

Tip

If you want to add a new Wallet icon to be used in the main tab bar, your icon will have a IconNavWallet filename. If it doesn't belong to a specific set, you just put the name after the prefix Icon…, so IconWallet

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/generateNewIcons.js

1. Move the exported file to the icons/svg/originals folder
2. In your terminal, in the same folder, run the command: yarn generate:icons
3. The script will process scripts/icons_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 generateNewIcons script accidentally overwrites older React components, remember to discard the changes before committing

Caution

If your icon is not monochromatic, you should use the manual process because the script doesn't support this specific case yet

Manual process (alternative)

1. Move the exported file to the icons/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 icons/svg folder, create a new React component (with a .tsx extension) of the same name

4. Copy all the <path> elements into the 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 generic currentColor value, so that the icon inherits the color from the parent Svg container

5. Add the dynamic size and colour (if required), 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 IconSpid = ({ size, style }: SVGIconProps) => (
     <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
       <Path
         d="M13.615 …"
         fill="currentColor"
       />
     </Svg>
   );

6. Repeat the previous steps for each icon

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

Caution

The currentColor value should only be added for monochromatic icons. For example, if you export an IconSystem... with specific color values, don't add it at all.

Wrong icon 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 Icon component

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

export const IOIcons = {
  spid: IconSpid,
  …
}

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

Important

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

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

export const IONavIcons = {
  navMessages,
  navWallet,
  navDocuments,
  navServices,
  navProfile,
  // New icon
  navNewIcon
} as const;

Use the new icon in a different component

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

// Default size: 24×24px
// Default color: Bluegrey
<Icon name="spid">

View all the available icons

There are two ways:

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