Question: How to render returned values as React component?

[lack-of-gravitas]

I've got the component integrated and working correct but how are the returned values used to render a react icon component on the frontend? The values returned for FA for example are not title cased and contain hyphens so can't directly associate to font-awesome icons (i'm using react-icons/fa).

Sanity Schema

const iconPicker = {
  title: 'Icon',
  name: 'icon',
  type: 'iconPicker',
  options: {
    providers: ["f7", "fa", "mdi", "sa", "hi", "fi"],
    outputFormat: 'react'
  }
}

Usage

import * as Icons from 'react-icons/fa'

const DynamicFaIcon = ({ name }) => {
    const IconComponent = Icons[name]
    if (!IconComponent) {
      // Return a default one
      return <Icons.FaBeer className="h-6 w-6" aria-hidden="true" />
    }
    return <IconComponent className="h-6 w-6" aria-hidden="true" />
  }

And usage in a react component
<DynamicFaIcon name={blurb.icon.name} />

[christopherafbjur]

I've got the component integrated and working correct but how are the returned values used to render a react icon component on the frontend? The values returned for FA for example are not title cased and contain hyphens so can't directly associate to font-awesome icons (i'm using react-icons/fa).

When using the option outputFormat: 'react' the returned values should not contain hyphens, they should be title cased. So based on your code snippets everything looks fine. Are you using the latest version of the plugin? The outputFormat option was not introduced until v2.0.0.

Just inspected the datasource after using your Sanity Schema and it looks title cased, just like it should:

[christopherafbjur]

@lack-of-gravitas Did my previous answer help you?

[lack-of-gravitas]

hey sorry for the delay -- thank you -- I think the issue is with my nextjs implementation still can't get properly cased returns from iconPicker from my current project but with a vanilla nextjs / sanity app I can.