@berlitz/icons

Icons component for the Max Design System

Usage no npm install needed!

<script type="module">
  import berlitzIcons from 'https://cdn.skypack.dev/@berlitz/icons';
</script>

README

svgr

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.