Add 'custom icon' use-case to docs

[kdaquila]

Summary:

Consider updating the docs about custom icons as a feature or use-case

Details:

After looking through the solid-icon tests, I realized that it is actually quite easy to use solid-icons to make custom icons. One can simply pass the path data and view box to the IconTemplate directly.

I think it would be great to add something about this to the project's README.md file. Using solid-icons to make custom icons might not be obvious to a new user, and yet, it can be a very useful feature for the case when you need to draw a new icon to match those from a library.

Example of creating a custom icon component:

import { IconProps, IconTemplate, IconTree } from "solid-icons";

export default function FlameIcon(props: IconProps) {
  const iconTree: IconTree = {
    a: { fill: "currentColor", viewBox: "0 0 384 512" },
    c: '<path d="M384 319.1C384 425.9 297.9 512 192 512S0 425.87 0 320c0-58.67 27.82-106.8 54.57-134.1C69.54 169.3 96 179.8 96 201.5V287c0 35.17 27.97 64.5 63.16 64.94C194.9 352.5 224 323.6 224 288c0-88-175.1-96.12-52.15-277.2C185.35-8.92 216 .03 216 23.83 215.1 127 384 149.7 384 319.1z"/>',
  };

  return IconTemplate(iconTree, props);
}

Example usage of a custom component

<div>
   <FlameIcon size="50px"/>
</div>

[x64Bits]

Oh sounds like a great idea as for Advance Usage, can you send a PR of this? or as soon as I have time I'll send it?

[TheElegantCoding]

I like this approach, custom icons are necessary in some cases where the design is unique for a enterprise, would be nice to have a component for this

[x64Bits]

Hi guys, in the latest version of solid-icons@1.0.5 there is this feature, related PR: https://github.com/x64Bits/solid-icons/pull/35