ReactComponent as svg
zhangweiAdmin opened this issue ยท 9 comments
how to use ReactComponent as svg in react
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';
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';
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?
Have you tried importing it as import LogoSvg from './content/assets/images/agentero-logo.svg'
?
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
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};
`;
};
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
})
You can pass custom
template
toesbuild-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