[FEAT] Provide a React component allowing for custom icons compatible with existing Iconoir icons

[trepidacious]

Is your feature request related to a problem? Please describe.
I'd like to be able to add my own React icons to those provided by Iconoir, and have those icons match up in style, work with the same properties, and use styles from IconoirProvider.

Describe the solution you'd like
The iconoir-react package would provide a "shell" icon component that accepts svg element(s) as children, and wraps them in an icon component compatible with Iconoir, so that the resulting component works exactly like a built-in Iconoir icon.

The child could be either one svg element, or possibly a list of valid elements to be placed in an svg element - ideally this would then set up the svg element with the correct width, height, props etc. to match the other icons.

Following the "list of elements" approach, this would be used something like:

<IconoirIcon>
  <path
    d="m19.263 17.316-3.579-3.579"
    stroke="currentColor"
    strokeLinecap="round"
    strokeLinejoin="round"
  />
  <path
    d="M3 20h13.5"
    stroke="currentColor"
    strokeLinecap="round"
    strokeLinejoin="round"
  />
  {/* more paths, other elements */}
</IconoirIcon>

The documentation would then cover this approach, possibly also including some hits about how to generate the paths from SVG files, I think this uses svgr in Iconoir so this could give settings etc.?

Describe alternatives you've considered
As an alternative, I worked out how to log the generated code for a react component in the Iconoir build (before minification), and used this as a base for my custom icons, just inserting the paths by hand into copies of the component. This works fine for now, but if the Iconoir code changed (e.g. if the provider worked differently), I would have to edit my custom components to match. With the wrapper, I'd only have to change things if the required paths changed, which seems unlikely.

I've also added issues requesting the custom icons I'm using where they would make sense for general use, but there will probably always be cases where users want a very specific icon that's unlikely to be added to the library, so it makes more sense to add it themselves as a custom icon in their own project.

Additional context
Here's an example of a custom icon I'm using at the moment in a text formatting toolbar, for "text-clear-format".

"use client";
import { IconoirContext } from "iconoir-react";
import * as React from "react";
import type { SVGProps } from "react";
import { Ref, forwardRef } from "react";
const SvgComponent = (
  passedProps: SVGProps<SVGSVGElement>,
  ref: Ref<SVGSVGElement>
) => {
  const context = React.useContext(IconoirContext);
  const props = {
    ...context,
    ...passedProps,
  };
  return (
    <svg
      width="1.5em"
      height="1.5em"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      color="currentColor"
      ref={ref}
      {...props}
    >
      <path
        d="m19.263 17.316-3.579-3.579"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
      />

      <path
        d="m13.274 16.074 4.307-4.3a.939.939 0 0 1 1.325 0l2.32 2.315a.936.936 0 0 1 0 1.323l-4.331 4.324a.904.904 0 0 1-1.278 0l-.803-.802-1.54-1.537a.936.936 0 0 1 0-1.323Z"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
      />

      <path
        d="M3 20h13.5"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
      />

      <path
        d="M15 7V5H6v2"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
      />

      <path
        d="M6 17h2l3-12M8 17h2"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};
const TextClearFormat = forwardRef(SvgComponent);
export default TextClearFormat;

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.