TypeScript: Add additional properties to type of props

[svitovyda]

When I'm generating Typescript icons, I get something like this:

const SvgWarning = (props: SVGProps<SVGSVGElement>) => (
<svg

Using the replaceAttrValues, I can get something like this:

...
<svg
...
    opacity={props.transparent ? 0.2 : undefined}
...

But then I need to have it generated like this:

const SvgWarning = (
  props: SVGProps<SVGSVGElement> & {
    transparent?: number,
  }
) => (
<svg
...
    opacity={props.transparent ? 0.2 : undefined}
...

I see in your sourcecode that this is something that can be achieved by expandProps, but I didn't find how exactly add the list of additional props. I ended up with rewriting the template:

template: (variables, { tpl }) => {
    return tpl`
    ${variables.imports};
    ${variables.interfaces};
    const ${variables.componentName} = (props: SVGProps<SVGSVGElement> & {
        ...
        transparent: boolean } ) => (
      ${variables.jsx}
    );

    ${variables.exports};
    `
  }

as you see, simplifying the part where variables.props were, as pulling whole babel libraries and making all the magic of creating new t.Identifier(... t.intersectionTypeAnnotation([variables.props.typeAnnotation, ...]) ) is way too much for a simple SVG package of my project.

Is there a way to do it simpler, or can you add another parameter into the config?

[p-m-p]

Am looking for similar question for non SVG props so as I'm here I think I can help answer this. The template uses a props spread on the svg element so you can just pass in opacity where you need to set it and not try to replace it with transparent like you have.

// Inside the template
<svg {...props}>...</svg>

// Using an svgr generated Component
<MySvgIcon opacity="0.2" />