Children prop for SVG components

[romulof]

🚀 Feature Proposal

When converting an SVG into a React component, allow children props so we can inject nodes into the rendered SVG element.

Motivation

Check the example bellow:

Example

Lets say I have an SVG with some <symbol> elements:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="foo"><text>foo</text></symbol>
  <symbol id="bar"><text>bar</text></symbol>
</svg>

Then I would be able to use like this:

import SvgSymbols from './symbols.svg';

export function Foo() {
  return (
    <SvgSymbols>
      <use xlinkHref="#foo" />
    </SvgSymbols>
  );
}

export function Bar() {
  return (
    <SvgSymbols>
      <use xlinkHref="#bar" />
    </SvgSymbols>
  );
}

Pitch

Why does this feature belong in the SVGR ecosystem?

It allows some level of customization on top of the static SVG component.