This package is responsible for the React implementation of PERi-Verse Icons. The main function of this package is:

• Copying SVG files from the third party package @material-symbols to the svg folder
• Generating React components from each copied SVG file
• Exporting all the components

All supported icons are listed as an array in the supported-icons.js file. These icons are sourced from the Material Symbols Library, with the following specs:

• Fill: 0 (1 if needed)
• Weight: 400
• Grade: 0
• Size: 48px

• Visit the Material Symbols Library
• Copy the name of the icon you want to add (e.g., ad_group)
• Add the icon name to the supported-icons.js array
• Run yarn build in your terminal
  • This will copy the SVG file of the new icon to the svg directory and generate a new React component for it
• Commit and push the changes in a new PR
• Once merged, the new icon will be available to be imported as component

Enable the newly generated icon in the Icon component of the react-components package, specifically in the icons mapper:

• Open the iconMapper.ts file inside the Icon component
• Import the icon component from this package
• Add a new entry to the mapper object
  • The key matching the icon name from the Material Symbols Library
  • The value being the name of the generated icon component
  • Refer to the dist folder if unsure about the component's name

// packages/react-components/src/lib/components/Icon/iconMapper.ts

{
  AdGroup,
  // ...
} from '@nandosuk/peri-verse-react-icons';

const iconMapper = {
  // ...
  ad_group: AdGroup,
}

export { iconMapper };

After adding the entry to the icons mapper, the new icon can be used with the Icon component:

import { Icon } from '@nandosuk/peri-verse-react-components';

<Icon name="ad_group" />;