@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.
- 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, oryarn svgr
from within the icon component directory itself - this will..
- Loop over each .svg in the
/src/svg
directory - Optimize it through a CLI version of SVGO
- Run it through a custom template
template.js
- Export resulting React components to the
/src/components
directory
- Loop over each .svg in the
- 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.