Reactjs Support

[MrBns]

support for reactjs.
right now icosea provide a function. and that function returns html of svg and you have to manually assign this way in javascript.

const svgWrapper= document.getElementById("svgWrapper");
svgWrapper.innerHTML = icosea(iconname, size,color)

but this is not really a good way to use in reactjs.
So what we can do is ,

generate component of all icon in a single file like this.

const icons = {
  "duo-lock": () => (
    <>
      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
        <path
          fill="currentColor"
          d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22"
          opacity="0.5"
        />
        <path fill="currentColor" d="M12 8.25a.75.75 0 0 1 .75.75v2.25H15a.75.75 0 0 1 0 1.5h-2.25V15a.75.75 0 0 1-1.5 0v-2.25H9a.75.75 0 0 1 0-1.5h2.25V9a.75.75 0 0 1 .75-.75" />
      </svg>
    </>
  ),
};

type PropsType = {
  name: keyof typeof icons;
};
export default function Duoline(props: PropsType) {
  return icons[props.name]();
}

then you can use it from in your code just by caling the component.

<button onClick={() => setCount((count) => count + 1)}>
     {/* call component and passthe name as icon name from icon.toml */}
         <Duoline name="duo-lock" /> count is {count}
</button>

[MrBns]

@iamajraj I think you would get it ?

[iamajraj]

@MrBns Good but there's one more thing that is missing in the example which is passing Props to the Icon components. So we need to look into that as well.

[MrBns]

yeah. I remember that.. just like our current code generation. I am going to pass props (optional) to function which is value of object property..

[iamajraj]

Then it makes sense.