This was a journey. In order to remove the need to use React.lazy within a component (which seems to be a no-no), I ended up moving icons out of webpack altogether and generating them with @svgr/cli. It's not quite as easy for a FED as the original Icon component, but still provides a standard way to add SVG icons with a few props to ensure accessibility.
Icon usage is documented more thoroughly in the Icon.mdx file.
The other option is to use an SVG sprite similar to what we have in Gesso for Drupal. I went the route I did to avoid loading more assets than are needed for any given component.
This was a journey. In order to remove the need to use React.lazy within a component (which seems to be a no-no), I ended up moving icons out of webpack altogether and generating them with
@svgr/cli. It's not quite as easy for a FED as the original Icon component, but still provides a standard way to add SVG icons with a few props to ensure accessibility.Icon usage is documented more thoroughly in the
Icon.mdxfile.The other option is to use an SVG sprite similar to what we have in Gesso for Drupal. I went the route I did to avoid loading more assets than are needed for any given component.