My goal is to import svg file and bring it to React as ReactComponent. While using 'import {ReactComponent as Complex} from './assets/complex_original.svg' it always fails as described in the title.
I have googled the issue and I think I have found the answer. React is probably using svgr under the hood, which is the "svg file to react component" element in this matter.
I think the problem here in this case is that there are unsupported things in my complex_original.svg file, like namespaces. Again after googling the solution for this, if I have understood thing correctly, is to use svgo optiomizer to "clean" svg file before svgr tries to load it, and fails to do it.
I need instructions how to use svgo correctly with svgr and be able to import svg files as react components. Which is the easiest way to do this? With webloader, as i have understood it, it might be simple thing.
I have tried to npm install svgo for my react project. This installs svgo correctly, but where I describe the config for svgo and how do I combine it with webloader?
I am using the following local packages
npm dev@CR-TEST:/var/www/svgmanip$ npm list
svgmanip@0.1.0 /var/www/svgmanip
├── @testing-library/jest-dom@5.16.5
├── @testing-library/react@13.4.0
├── @testing-library/user-event@13.5.0
├── react-dom@18.2.0
├── react-scripts@5.0.1
├── react@18.2.0
├── svgo-loader@4.0.0
├── svgo@3.0.2
└── web-vitals@2.1.4
After npm start:
Failed to compile.
SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
5 | ...props
6 | }, svgRef) {
> 7 | return <svg width={1920} height={1080} viewBox="0 0 508 285.75" id="svg5" inkscape:version="1.1.1
