Dynamically render icons in Gatsby

I can't figure out the best way to dynamically use icons based on a users choice in a headless CMS (in this case Netlify CMS).

I made it work in two ways, but both have downsides:

Option 1: via component name

The user enters name of the icon in the CMS (e.g. "FaClock"; the UX is of course another story here).

The component:

import * as Fa from "react-icons/fa";

export const CustomSvg = ({iconName}) => (
  <Box as={Fa[iconName]} />
);

Downside
This has the huge downside, that all icons are included in the bundle, which leads to performance issues.

Option 2: via SVG image uploaded

The user uploads an svg via file picker.

The component:

export const CustomSvg = ({iconURL}) => (
  <img src={iconURL} />
);

Downside
SVG is included as an img and I can't change color etc.

I'm pretty sure there must be a better way...