Importing an icon from react-icons

[mitchelsarauer]

Is there a way that I could have a user pick an icon from react-icons and input it into prismic to have it render in an application with no code change from the developer?

For instance, if they choose the icon FiHelpCircle, in the code I will have to import it as:
import { FiHelpCircle } from "react-icons/fi"; and other icons may be imported from somewhere different

[Pau]

Hey @mitchelsarauer, thanks for reaching out.

It is not possible to add react-icons as a third application since it is something that can only be imported from code.

I'm thinking you can create a function that renders the icons conditionally.

This would involve listing the icons you wish to have available within the Prismic UI for editors to select from. I don't know if you want to limit the number of icons that editors can add to the documents in the repository, but you could add Select fields with the names of the icons, and so you could create a function like the following:

import { FiHelpCircle, FaReact } from 'react-icons/fi'

[...]

const icons = {
  help_circle: FiHelpCircle,
  react: FaReact,
  ...
}

const RenderIcon = ({ prismicIcon }) => {
  const Icon = icons[prismicIcon];
  return <Icon />
}