Single file and named exports vs default exports?

[viveleroi]

I'm using SVGR in a node.js script to convert all of our .svg files into react components. The returned react components are all named but exported by default, and these are all designed to be separate files as they also have the typescript import from react, etc.

I'd rather write all of these in a single file, as named exports (no default), and only one set of imports at the top. I don't see any options for doing that. Is there some way to do this?

[viveleroi]

Looks like I can mostly make it work with a custom template, although I'll need to add the imports to the output file myself.

const template = (variables, { tpl }) => tpl`
${variables.interfaces};

export const ${variables.componentName} = (${variables.props}) => (
  ${variables.jsx}
);

`

[mohamedyasser27]

did you arrive at a conclusion for this?
because i am trying to do the same thing

[viveleroi]

I just had to use my workaround, which was the custom template:

const template = (variables, { tpl }) => tpl`
export const ${variables.componentName} = (${variables.props}) => (
  ${variables.jsx}
)`

then use the template in your config:

let reactSvgOutput = transform.sync(
  svgSource,
  {
    jsxRuntime: 'automatic',
    plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
    svgoConfig,
    template,
    typescript: true
  },
  {
    componentName
  }
)

the final output content is written into a single file