How to use a custom jsx pragma or get rid of import React?

Question: How to use a custom jsx pragma? OR How to get rid of import * as React from 'react' at the output when i use a custom jsx processing library?

1. I am using a custom library for jsx processing (so i don’t need React package to be installed).
2. As a jsx transpiler, the only used plugin is: https://babeljs.io/docs/en/babel-plugin-transform-react-jsx/
3. This babel plugin (2) works fine for regular .jsx files (auto-imports the “CustomJsxLibrary” and so on…)
4. This babel plugin (2) works great with svgr , but there is an extra import * as React from 'react' remaining at the beginning of the svg component.

What i’ve got so far… Not a very convenient but working method is to use a custom template and delete ${imports} :

...

return typeScriptTpl.ast`
    ${interfaces}
    function ${componentName}(${props}) {
        return ${jsx};
    }
    ${exports}
`

...

Configuration from webpack.config.js:

...

test: /\.svg$/, 
use: [
    {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env'],
            plugins: [
                [
                    '@babel/plugin-transform-react-jsx',
                    {
                        runtime: 'automatic',
                        importSource: 'CustomJsxLibrary'
                    }
                ],
            ]
        },
    },
    {
        loader: '@svgr/webpack',
        options: {
            babel: false,
            template: require(path.resolve(__dirname, './template.js')) // without the custom template doesn't work :'(
        },
    }
]

...

[vitharanagedonjani-i2e]

--jsx-runtime 'automatic' flag prevent import * as React from "react" being added 😃

example: svgr --icon --typescript --ref --jsx-runtime 'automatic' -d src assets

[peter-mouland]

I’ve done as you suggest 🤦

function defaultTemplate(
    { template },
     opts,
    { imports, interfaces, componentName, props, jsx, exports },
) {
    const plugins = ['jsx']
    if (opts.typescript) {
        plugins.push('typescript')
    }
    const typeScriptTpl = template.smart({ plugins })
    return typeScriptTpl.ast`
${interfaces}
function ${componentName}(${props}) {
  return ${jsx};
}
${exports}
`;
}

const jsData = await svgr(svgCode, { template:defaultTemplate }, { componentName })