Questions tagged [svg-sprite]
61 questions
47
votes
2 answers
SVG use and gradients as fill
I've been trying to externalize my SVG icons to a file and referencing them with markup like . In theory this works really nicely, but different browsers have issues with rendering. All the browsers are…
RJo
- 15,631
- 5
- 32
- 63
17
votes
3 answers
SVG shadow-root is closed
I have tried to animate an svg-sprite with CSS.
I’ve created a sprite and injected it from gulp:
gulp.task('svgstore', function () {
var svgs = gulp
.src('app/svg/*.svg')
.pipe(svgmin(function (file) {
return {
plugins:…
Артём Богосьян
- 333
- 1
- 3
- 8
16
votes
1 answer
SVG icon system with angular-cli
I have an angular2 project which was created via angular-cli. In webpack there is a loader to load the svg sprite and also to generate that sprite from list of svgs. But how do I can use this functionality in my current project when angular-cli…
Igor JS
- 208
- 2
- 7
13
votes
3 answers
webpack 4 gives background: url([object Module]) as bg image
I'm having issues with setting up web-pack 4 and svg-sprite-loader to render svg icons as background images. I was following these instructions from official docs for svg-sprite-loader…
bullettrain
- 958
- 1
- 9
- 17
13
votes
1 answer
save inject svg file when changing html document
I have a some front-end project with workflow in gulp.
Plugins:
gulp-inject
browsersync
gulp-watch
gulp-useref
gulpfile.js:
var
gulp = require('gulp'),
...
var path = {
app : { // src
html : 'app/*.html',
…
SVE
- 1,555
- 4
- 30
- 57
9
votes
5 answers
How to inject SVG icon sprites in Angular component HTML DOM?
I am building an Angular application (Angular 4/5/6) and would like to use SVG sprites in my component template.
Question:
Assuming I already have my SVG icon sprite generated (icons.svg), how can I get Angular to inject/import my SVG icon sprite…
Zythyr
- 1,142
- 4
- 20
- 33
8
votes
0 answers
How to use svg sprites in next.js project
I would like to use an svg sprite for the icons of my next.js app. Are there any articles on the best practices and how to implement them with compatibility to server side rendering?
I stumbled upon this package…
M.Anagnostopoulos
- 121
- 2
- 6
8
votes
1 answer
7
votes
1 answer
How to make work for external-svg-sprites and css-variable?
TL;DR
Having created symbol-svg-sprite and inserting its fragment using svg+use, I want to use css-variables inside #ShadowDOM for SVG presentation attributes to change for example stroke-width="0" in stroke-width="5", and the transition property…
Cloudesign
- 81
- 5
6
votes
3 answers
How to configure webpack to use a prebuilt svg sprite?
I have a prebuilt svg sprite with more than 100 icons:
How to configure webpack to…
Prisacari Dmitrii
- 1,985
- 1
- 23
- 33
5
votes
2 answers
Any way to use SVG Sprite from CSS?
HTML:
SVG sprite:
5
votes
2 answers
React and SVG sprite
I am using React, and I am trying to load a svg icon from a sprite. My sprite is like this:
4
votes
1 answer
Getting "Unsafe attempt to load URL data:image/svg+xml..." in Safari using a through React component
I'm using rollup to bundle a react npm package that contains an icon component that takes a name as a prop and returns an Icon with that name wrapped by a react component.
This is the component code:
import sprite from './public/sprite.svg';
…
Rafael Rocha
- 508
- 1
- 3
- 16
4
votes
1 answer
Inline svg vs svg Sprite vs multiple external files
OK so i am building a web app using Laravel & Vue js mainly. I tried to use https://github.com/JetBrains/svg-sprite-loader#installation but the exported svg shows up blank.
In that context before proceeding, i started wondering if this is really…
M.Anagnostopoulos
- 121
- 2
- 6
4
votes
0 answers
External sprite.svg shadow-root empty icons not showing
I am working with gulp-sprite trying to load svgs into a styleguide. I have created the icon.svg, but when I try to display them in a different HTML file using xlink:href the svgs aren't showing. The shadow-root is empty.
I have tried multiple…
hurdler131
- 41
- 2