Comments (6)
Experiencing the exact same thing here. It looks like there is an issue with double single quotes as well as prepending module.exports
.
For example:
data:image/svg+xml;charset=utf8,module.exports = '%5C'data:image/svg+xml;charset=utf8,%253C?xml version='1.0' encoding='UTF-8' standalone='no'?%253E %253Csvg width='18px' height='22px' viewBox='0 0 18 22' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%253E %253C!-- Generator: Sketch 3.7.1 (28215) - http://www.bohemiancoding.com/sketch --%253E %253Ctitle%253EShape%253C/title%253E %253Cdesc%253ECreated with Sketch.%253C/desc%253E %253Cdefs%253E%253C/defs%253E %253Cg id='Material-(LR)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%253E %253Cg id='Text-Set_360px-to-480px' transform='translate(-164.000000, -588.000000)' fill='%2523999999'%253E %253Cg id='06_Text-Set-Small' transform='translate(150.000000, 242.000000)'%253E %253Cpath d='M20.246523,349.397078 L20.246523,359.707693 C20.246523,361.368601 21.0927505,362.059283 22.6257929,362.059283 L28.5739457,362.059283 C30.107032,362.059283 31.3497605,360.938985 31.3497605,359.278123 L31.3497605,349.397078 C31.3497605,347.736193 30.107032,346.389831 28.5739457,346.389831 L23.0223379,346.389831 C21.4892735,346.389831 20.246523,347.736193 20.246523,349.397078 L20.246523,349.397078 Z M14.6949153,354.552385 L14.6949153,364.433431 C14.6949153,366.094316 15.9376438,367.440678 17.4707301,367.440678 L23.0223379,367.440678 C24.1510875,367.440678 25.1224219,366.709938 25.5562355,365.662066 C25.3780789,365.700982 25.1937986,365.722258 25.0050409,365.722258 L19.0568881,365.722258 C17.5238457,365.722258 16.0828117,365.202691 16.0828117,363.541759 L16.0828117,352.833965 C16.0828117,352.395959 14.6949153,353.096009 14.6949153,354.552385 L14.6949153,354.552385 Z M17.4707301,351.974778 L17.4707301,362.682572 C17.4707301,364.343457 18.3169137,364.63689 19.8499781,364.63689 L25.7981528,364.63689 C26.9269023,364.63689 27.8981928,364.132284 28.3320723,363.084435 C28.1538938,363.123351 27.9696135,363.14458 27.7808777,363.14458 L21.832703,363.14458 C20.2996166,363.14458 18.8586266,362.62499 18.8586266,360.964105 L18.8586266,350.256311 C18.8586266,349.818235 17.4707301,350.518332 17.4707301,351.974778 L17.4707301,351.974778 Z' id='Shape'%253E%253C/path%253E %253C/g%253E %253C/g%253E %253C/g%253E %253C/svg%253E%5C''
is what will be set as the src in the img tag once rendered.
from svg-url-loader.
You should not get module.exports=
in the resulting string. That is something which webpack uses internally and it should not appear in a final result.
There is a test case, checking for the correct output: https://github.com/bhovhannes/svg-url-loader/blob/master/test/loader.spec.js#L62-L79
@Guru107, @chalisegrogan, can you come back with a minimal webpack config and files which result in error?
Otherwise I am not able to reproduce the issue.
from svg-url-loader.
@chalisegrogan @bhovhannes I think i figured out why this happens.
Steps to reproduce
- Add svg-url-loader in webpack config
{ test:/\.svg$/, loader:'svg-url-loader?noquotes' }
- Require the svg file in your component like this
require('svg-url?noquotes!./icons/home.svg')
Doing above would have module.exports
in the resulting data uri
This is how it got fixed
- Just remove the svg loader test from webpack config.
from svg-url-loader.
@Guru107,
In your steps svg-url-loader
applies twice - first time via webpack config, second time - via require
call. That's why you get module.exports
in the resulting url.
You should either write require('./icons/home.svg')
in order to use only webpack config, or require('!!svg-url?noquotes!./icons/home.svg')
- that way svg-url-loader
will override any existing loaders defined in webpack config.
from svg-url-loader.
@bhovhannes Glancing the code snippets in Usage section, I got the idea thats how it has to be used (My Bad 😓 ). It would be great if the above points that you mentioned also be added to the README.
P.S: It would save time, so people won't have to go through Using Loaders Docs 😄
from svg-url-loader.
Closing this, as it seems to be not an issue, but because of wrong loader usage.
@Guru107, if you have something to add to README, your pull request is very welcome.
from svg-url-loader.
Related Issues (20)
- How to use this in html? HOT 2
- Images svg aren't loading, how to fix? HOT 2
- Incorrectly escapes # in style-element HOT 3
- Question: is there a way to disable plugin inline for few SVG? HOT 1
- Update README to include webpack options configuration for supported parameters HOT 2
- problem with `file-loader` and deps HOT 15
- The benefits of data:xyz style vs. SVG sprites HOT 1
- [Proposal] Add option to skip some phrase during encoding HOT 1
- Issues to find SVGs inside imported sass files. HOT 1
- Please update `file-loader` to latest version HOT 14
- Incorrect Data URI content when using issuer test HOT 2
- Doesn't working on image tag HOT 2
- Missing webpack in peerDependencies for yarn@2 compatibility HOT 1
- Please Add CHANGELOG.md HOT 1
- Action Required: Fix Renovate Configuration
- [Webpack]Error report of introducing SVG file into img tag ? Please refer to the screenshot. HOT 13
- "module export" instead of svg directly HOT 6
- Dependency Dashboard
- Malformed svg produced HOT 3
- Svg is abstracted from css file. HOT 3
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-url-loader.