Comments (13)
@lysoff if you want to import SVGs from CSS with svg-url-loader (inline as data-uri) and from JS with svg-sprite-loader I must warn you that this is potential source of collisions of these two loaders. For workaround this you can define svg-url-loader as default loader for SVGs, and exclude some folders which should be processed by svg-sprite-loader:
const svgSpriteFolder = path.resolve(__dirname, 'folder-with-svgs-for-svg-sprite-loader');
...
loaders: [
// default loader for SVG
{
test: /\.svg$/,
loader: 'svg-url-loader',
exclude: svgSpriteFolder
},
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: svgSpriteFolder
}
]
from svg-sprite-loader.
- You cannot use both loaders for single file.
- svg-sprite-loader can be used only in JS, not in CSS.
Use svg-url-loader in CSS and svg-sprite-loader in JS.
from svg-sprite-loader.
One more way:
.icon1 {
/* SVG will be inlined in CSS */
background-image: url('./foo.svg?inline&fill=red');
}
.icon2 {
/* default way - build a sprite and use SVG fragment identifiers */
background-image: url('./foo.svg&fill=red');
}
Webpack config:
{
module: {
rules: [
...
{
test: /.svg$/,
oneOf: [
{
resourceQuery: /inline/,
use: [
'svg-url-loader',
'svg-fill-loader',
],
},
{
use: [
{
loader: 'svg-sprite-loader',
options: {
esModule: false,
extract: true,
},
},
'svg-fill-loader',
],
},
],
},
]
}
}
from svg-sprite-loader.
Could you provide an example?
from svg-sprite-loader.
We are using the sprited svgs we get from this loader in the below way which is what the example was saying and it works very well.
<svg
style={style}
dangerouslySetInnerHTML={{ __html: '' }}
/>
But we are using a third party library 'rc-tree' and we want to apply our own icons for the tree.
They have a className provided their api where we can put out icons and style it.
I was wondering if we can reuse the sprited svg somehow?
from svg-sprite-loader.
@samuelpaulc in this case - no. You should should customize rc-tree classes with following manner:
.override-rc-class {background-image: url('image.svg')} // svg should inlined via url-loader
from svg-sprite-loader.
Oh so I need to use https://github.com/bhovhannes/svg-url-loader right?
from svg-sprite-loader.
@samuelpaulc right
from svg-sprite-loader.
Cool 👍 Thanks Stas
from svg-sprite-loader.
@kisenka But when we use the svg-url-loader, a separate request is made, can it not work together with svg-sprite-loader where it gets sprited?
from svg-sprite-loader.
What you mean saying "a separate request is made"? svg-url-loader inline SVG contents into CSS.
from svg-sprite-loader.
@kisenka
We are also using svg-sprite-loader for our svg images which are used directly in JS as their documentation says and it works well.
Now we are trying to make the svg that we load from within a css class to be also sprited
I am trying this and it does not work.
Using only svg-sprite-loader:
Works well for svgs included in js but if a svg in css is used I get the below error
Error: attribute y: Expected length, "%5C'6%5C'".
Using only svg-url-loader
Works
Using both together
Module build failed: ReferenceError: document is not defined
Order of loaders also dosent help;
Webpack config:
{
test: /.svg$/,
include: 'path/to/svg',
loaders: [
'svg-sprite?' + JSON.stringify({
name: '[name]',
prefixize: true
}),
'svg-url-loader'
]
}
Error I get for this config is
Module build failed: TypeError: Must be an object
Please suggest where I am going wrong and how to get both of these loaders to work together
from svg-sprite-loader.
Use svg-url-loader in CSS and svg-sprite-loader in JS.
could you provide webpack config example for this?
from svg-sprite-loader.
Related Issues (20)
- Webpack 5 cache=filesystem HOT 2
- Performance consumption HOT 1
- del
- NPM recommending svg-sprite-loader 2.0.3 as a vulnerability fix?
- Exception emitted for every svg
- How can I add new attributes to the parent SVG?
- Is there a way to set role, focusable and other attributes to root svg sprite tag without extracting?
- Regular Expression Denial of Service in postcss (6.0.11) HOT 2
- Unable to modify spriteFilename if loader rule has resourceQuery while using SpriteLoaderPlugin HOT 1
- SvgSpriteLoader is trying to guess you are using webpack 4 or 5 HOT 1
- Node16 npm audit moderate HOT 1
- SVG created is blank HOT 1
- The plugin doesn-t see rules if config in oneOf HOT 2
- Abnormal width and height
- Dependency on loader-utils 1.1.0 is security concern, CRITICAL vulnerabilities
- Module Warning (from ./node_modules/svg-sprite-loader/lib/loader.js): svg-sprite-loader exception. Some loaders will be applied after svg-sprite-loader in extract mode
- sprite.svg load every time when change showing icon HOT 1
- svg-sprite-loader not working well with encore webpack
- Webpack deprecation warning
- Esbuild alternative HOT 1
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-sprite-loader.