Comments (6)
chalisegrogan
commented on May 31, 2024
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.
bhovhannes
commented on May 31, 2024
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.
Guru107
commented on May 31, 2024
@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.
bhovhannes
commented on May 31, 2024
@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.
Guru107
commented on May 31, 2024
@bhovhannes Glancing the code snippets in Usage section, I got the idea thats how it has to be used (My Bad
P.S: It would save time, so people won't have to go through Using Loaders Docs
from svg-url-loader.
bhovhannes
commented on May 31, 2024
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)
- Integrate SVG-O to strip out unnecessary lines embedded in svgs HOT 2
- 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
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.