Use custom icons per file/folder

[antrikshmisri]

Is there a way to use custom icons per file folder preferably defining them within the initData itself, like this:-

const initData = {
name: "node",
isOpen: true,
children: [],
icon: SomeComponent
}

[shunjizhan]

Hi, we currently don't support defining custom icon in the data, but we can achieve similar behavior by returning different icons with conditions. For example for file icon:

  const initData = {
    name: "node",
    iconName: 'SomeComponent',
    ...
  }

  const FileIcon = ({ onClick: defaultOnClick, nodeData }) => {
    const SomeComponent = getMyComponent(nodeData.iconName);

    return <SomeComponent onClick={ defaultOnClick } />;
  };

[shunjizhan]

actually, the way you suggest might work, maybe we could actually carry that Icon itself in the data, it is just a function after all. Try it out!

  const initData = {
    name: "node",
    icon: SomeComponent,
    ...
  }

  const FileIcon = ({ onClick: defaultOnClick, nodeData }) => {
    const SomeComponent = nodeData.icon;

    return <SomeComponent onClick={ defaultOnClick } />;
  };

UPDATE: ummm there seems to be a bug that nodeData will lost the key whose value is a method, wii investigate this issue later. Passing a string name and get correspodning component (as mentioned above above) should work