@berlitz/icons

Max Icons

Transform SVGs into React components 🦁

@berlitz/icons is the icon system for the Max design system. It relies on SVGR to do the heavy lifting with minor tweaks, such as a custom template, to customize to our needs. See the full API here.

Workflow

• Add SVG fille to src/svg directory
• Replace all desired fill values with currentColor, this allows the SVG to inherit from the parent's font color
• run yarn icons in the root of the max repository, or yarn svgr from within the icon component directory itself
• this will..
  1. Loop over each .svg in the /src/svg directory
  2. Optimize it through a CLI version of SVGO
  3. Run it through a custom template template.js
  4. Export resulting React components to the /src/components directory
• Add your new icon to the src/index exports (TODO: this could be automated)
• Update your new icon to Icons.story.js to update story.