Comments (6)
Okay I got it!
So the problem is that because I was defining the loader in the config AND the template, the file is being by parsed by webpack twice.
Two easy fixes, in case anyone else runs into this:
#1. Remove the loader from your config.
OR
#2. Add a bang at the front of the inline require and it will bypass the other loaders.
<IconSVG src={require('!svg-inline!../../icons/bug.svg')} />
Hope this helps someone else in the future.
from svg-inline-loader.
Thanks for the detail! I will add some note to README prevent this. 👍
from svg-inline-loader.
Thanks for report! I will look into it.
from svg-inline-loader.
@seethroughtrees Can you provide more detailed message/log and failing svg's content? Any svg causes error is fine and will be very helpful :)
I have tried with more complex SVG examples (for instance, Firefox logo) and didn't see problems yet. path
element's d
attribute should start with 'M' but it seems like slashes are inserted from some point. Currently this loader does not do any insertion behavior, so it could be simple-html-tokenizer
bug... but we will see.
from svg-inline-loader.
Thanks so much for looking into it @sairion .
I tested with Firefox logo you linked, and am getting the same Invalid value for path.. issue.
I'll try to give some more info here:
Using React with Redux:
"react": "^0.14.0",
"react-dom": "^0.14.0",
"react-modal": "^0.6.0",
"react-pure-render": "^1.0.2",
"react-redux": "^4.0.0",
"react-router": "^1.0.0-rc3",
"redux": "^3.0.4",
"redux-actions": "^0.8.0",
"redux-logger": "^2.0.4",
"redux-thunk": "^1.0.0",
My webpack.config has the loader:
{
test: /\.svg$/,
loader: 'svg-inline'
},
I'm using the component like this:
<IconSVG src={require('svg-inline!../../icons/bug.svg')} />
I think the problem is related to the value being returned in the src attribute:
module.exports = "<svg xmlns="\"http://www.w3.org/2000/svg\""><path d="\"M243.621" 156.53099999999995C190.747 213.312 205.34 304 205.34 0 160.031-64 10.812 96.625 1.562 99.625-20.688C736.558 607.375 696.746 580.5 644.746 569.75z\"></path></svg>"
I'm imagining it shouldn't contain anything before/after the svg tags. Unless that's supposed to be stripped somewhere else.
Thanks again for the help.
from svg-inline-loader.
with the latest loader (or webpack 2.2) you can do this in your react component:
<InlineSVG src={require("file.svg")} />
from svg-inline-loader.
Related Issues (20)
- Standardize README
- import returns base64 encoded URL HOT 2
- Parser won't transform xlink:href calls made from the <Image> tag
- Any plans for more releases? HOT 8
- Warning warning.js?8a56:36 Warning: Unknown props `elementName`, `defaultClassName` on <i> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
- svg attr viewBox no have px
- inline styles? HOT 2
- Add an option "auto add class name from svg file name". HOT 3
- Need to update loaderUtils?
- Fails to add prefix for class names using characters escaping (with backslash)
- One set of Quotation marks coming extra HOT 2
- Disable options on files that match a specific name
- can't load svg file from html file using svg-inline-loader HOT 4
- Cannot add property value, object is not extensible
- Wonderful, but raises an issue. module.exports is in it HOT 5
- removeSVGTagAttrs causes Firefox to not display SVG
- Add height, width, and fill attributes to <svg> or <path> HOT 1
- Using this to display SVG's as a base64 string in an image src. (example/question) HOT 1
- Invalid close tag added for namespaced tags
- does not work in svelte HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svg-inline-loader.