ReactComponent as svg

[zhangweiAdmin]

how to use ReactComponent as svg in react

[kazijawad]

Could you provide more information?

I would take a look at Basic Usage for a basic example.

[zhangweiAdmin]

for example import { ReactComponent as SvgOrder } from './order.svg';

Could you provide more information?

I would take a look at Basic Usage for a basic example.

for example import { ReactComponent as SvgOrder } from './order.svg';

[IvanRodriCalleja]

Hi, i am trying to use this plugin to load .svg files in a existing application with the following configuration:

plugins: [
        svgrPlugin({
            svgoConfig: {
                plugins: {
                    removeViewBox: false
                }
            },
            namedExport: 'ReactComponent'
        })
    ]

the namedExport property isn't necesary because this is the default value but i can't make it work, i get the following error:

Some of you know why esbuild can't load that?

[kazijawad]

Have you tried importing it as import LogoSvg from './content/assets/images/agentero-logo.svg'?

[IvanRodriCalleja]

If i do that the error doesn't happen but i cn't confirm right now if it is working (i have to add more changes until i can finally run in the browser to see if it works), i'll update you when i can run everything.

I'll have to change around 200 SVG if it works and see if at the same time i can use other plugin or loader because in some cases i use it as url

[kazijawad]

Closing this because issue #2 might have what you're looking for.

[ivanabovin]

You can pass custom template to esbuild-plugin-svgr:

await esbuild.build({
  ...
  plugins: [
    ...    
    svgrPlugin({ template })
  ]
});

function template(variables, { tpl }) {
  return tpl`
    ${variables.imports};
    ${variables.interfaces};
    const ${variables.componentName} = (${variables.props}) => (
      ${variables.jsx}
    ); 
    ${variables.exports};
    export const ReactComponent = ${variables.componentName};
  `;
};

[YangYongAn]

write a plugin to resolve it :

function reactRC (asName = 'ReactComponent') {
  return function (code, config, info) {
    return code.replace(/import(.*?)from "react";/, '//not import react ') + `export const ${asName} = ${info.componentName}`
  }
}

and use it like this:

// const svgR = require('esbuild-plugin-svgr')

svgR({
        dimensions: false,
        plugins: ['@svgr/plugin-jsx', reactRC()],
        svgo: false,
        titleProp: true
      })

[YangYongAn]

You can pass custom template to esbuild-plugin-svgr:

await esbuild.build({
  ...
  plugins: [
    ...    
    svgrPlugin({ template })
  ]
});

function template(variables, { tpl }) {
  return tpl`
    ${variables.imports};
    ${variables.interfaces};
    const ${variables.componentName} = (${variables.props}) => (
      ${variables.jsx}
    ); 
    ${variables.exports};
    export const ReactComponent = ${variables.componentName};
  `;
};

the arguments of function which named template has some problem. in my case, the variables is the 3rd param. and the function tpl CAN NOT found