Load custom icons from JSON

[Brett Duersch]

I would like use custom icons to visualize the output from a RESTful API that has 5+ levels of nested hierarchy. I've defined to API provide an "icon" key. The challenge I'm having is that after parsing the JSON output from the API the resultant icon value is a string equivalent to this object below:

const nodes  = [{
      value: 'notes.txt',
      label: 'notes.txt',
       icon: '<i className="far fa-file-alt" />',
 }]

This does not display the desired icon but text instead. (see example below)

Apparently <CheckboxTree /> is looking for the icon value to be JSX instead of a string.

The following example (which is a simplified version of the nodes constant in CustomIcons.js example file) illustrates this point. When this icon value is a string you get text, when you provide JSX you get an icon. (see attached screenshot)

const nodes = [
    {
        value: 'Documents',
        label: 'Documents',
        children: [
            {
                value: 'Employee Evaluations.zip',
                label: 'Employee Evaluations.zip',
                icon: <i className="far fa-file-archive" />,
            },
            {
                value: 'notes.txt',
                label: 'notes.txt',
                icon: '<i className="far fa-file-alt" />',
            },
        ],
    }
];

Is it possible to support JSX and text inputs to the icon parameter? Is there another way to manage this? I'd like to react-context-tree with hierarchies that have more than 100 nodes with 5+ nested layers so mapping through the hierarchy to convert all icon values to JSX is a not a desired option.

[Jake Zatecky]

This is more of a general React question as opposed to something specific to this component. I am not aware of a way to make React interpret a string as a JSX node, but I will leave this up in case anyone else has an idea.

The only thing I can recommend is having the JSON return the className and then doing icon: <i className={className} />,.

[Eldhos Aji]

@brettduersch you can do that, I think this will help you.

You can try

const IconPurify = ({icon})=>{
    const ICType= typeof icon; 

    if(!icon) return '';

    if(ICType==='string'){
      return <span dangerouslySetInnerHTML={{__html: icon}}/>
    }
    return icon;
  }

const nodes = [
    {
        value: 'Documents',
        label: 'Documents',
        children: [
            {
                value: 'Employee Evaluations.zip',
                label: 'Employee Evaluations.zip',
                icon: <IconPurify icon={<i className="far fa-file-archive" />}/>,
            },
            {
                value: 'notes.txt',
                label: 'notes.txt',
                icon: <IconPurify icon={'<i className="far fa-file-archive" />'}/>,
            },
        ],
    }
];