Cannot load SVG as React Component
See original GitHub issueI cannot make any of svg loaders work with webpack-isomorphic-tools. I tried a lot of different loaders like react-svg-loader, svg-react-loader and configurations from { test: /\.svg$/, loader: 'svg-react' }
to { test: /\.svg$/, loader: 'file!babel!svg-react…' }
with no luck.
webpack-isomorphic-tools mostly throws an error:
[webpack-isomorphic-tools] [error] asset not found: ./src/app/theme/svg-icons/bullet.svg
or
./src/app/theme/svg-icons/bullet.svg
[0] Module build failed: Error: Non-whitespace before first tag.
I tried to parse url in webpack-isomorphic-tools with WebpackIsomorphicToolsPlugin.url_loader_parser
same errors occures.
Is there a workaround how can I use webpack-isomorphic-tools to get this work?
import SVGicon from '../../theme/svg-icons/bullet.svg';
export const TextWithIcon = ({text}) => <div><SVGIcon />{text}</div>
svg-inline-loader is deprecated, svg-inline-react wans about using require
in expression.
Please help!
Issue Analytics
- State:
- Created 7 years ago
- Comments:14 (6 by maintainers)
Top Results From Across the Web
Cannot import SVG file into react - Stack Overflow
Where the SVG file just contains SVG markup. It's located in the same directory as the code above, but under another folder called...
Read more >Bug: [5.0] SVGs cannot be imported (not as components, but ...
Describe the bug When importing a SVG in a regular manner (not as a component): import Logo from './logo.svg' There is an error...
Read more >The Best Way to Import SVGs in React - Better Programming
In this article, I will show the two methods to import SVG assets into React components. I like to call them the in-source...
Read more >How to Import SVGs in a React and Vite app - freeCodeCamp
Importing SVGs using the image tag is one of the easiest ways to use an SVG. If you initialize your app using CRA...
Read more >How to use SVGs in React | Sanity.io guide
There are a few ways to use an SVG in a React app: Use it as a regular image; Import it as a...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
For anyone has this issue, you could use inline-react-svg babel plugin.
Oh my gosh. Project is based on https://github.com/erikras/react-redux-universal-hot-example, there is a huge amount of configs and dependences, so I doubt it would be easy to do that. 😦