Stack Overflow
Stack Overflow

Questions tagged [svg-sprite]

61 questions
3
votes
2 answers

SVG sprite not showing on ios iphone ipad

SVG sprite not showing on ios iphone ipad. In android, and on a PC, everything is ok. But on iphone, ipad - just a white screen, how to fix it?
user3677521
  • 51
  • 2
3
votes
2 answers

Jest/Enzyme SVG Sprites Unexpected Token <

I am having a problem creating a snapshot test with Jest and Enzyme on a component using SVG sprites. I am using the package svg-sprite-loader: https://github.com/kisenka/svg-sprite-loader Here is the component that's giving it trouble: import React…
Dean N
  • 31
  • 1
  • 4
3
votes
1 answer

How to create a svg sprite on Laravel MIX?

I need to configure the build SVG sprites on laravel mix. I tried several libraries under webpack, result = 0. Can someone advise how to configure? Where to write the handler code in webpack.mix.js or app.js?
korg
  • 197
  • 2
  • 8
2
votes
1 answer

SVG sprite. Referencing an SVG icon using , and

I am trying to insert an SVG icon in HTML for later use, however when I reference it by it doesn't appear on the webpage. I copy an the icon's SVG code and insert it in the html file. Then I move the icon's path to a separate .svg file. When I…
webdiscord
  • 21
  • 2
2
votes
1 answer

svg-sprite-loader with Angular 8 custom webpack config

I am trying to use svg-sprite-loader package (to create a svg sprite) with my Angular 8 project using custom webpack config. I am using below custom config: const SpriteLoaderPlugin = require('svg-sprite-loader/plugin'); module.exports = { …
Avinash Arora
  • 23
  • 3
2
votes
2 answers

Same icon different sizes with gulp svg sprite?

Im using gulp-svg-sprite https://github.com/jkphl/gulp-svg-sprite Is it possible to use the same icon at different sizes? Prior to spriting this was easy and in fact was one of the things I like most about SVGs: …
Evanss
  • 23,390
  • 94
  • 282
  • 505
1
vote
0 answers

How can I use an SVG sprite in an npm package?

My team is working on a React component library and we are using an SVG sprite for our icons. We have an component that looks like this: import Sprite from './sprite.svg'; const Icon = ({ icon }) => { return (
Michael Lynch
  • 2,682
  • 3
  • 31
  • 59
1
vote
0 answers

ElectronJS rerequests an SVG sprite every time it's used, doesn't cache

I have a Vite/React app that uses @tabler/icons for icons in the app, as well as letting the user choose icons for their own notes, so I need to be able to load them dynamically (instead of using the pre-made Tabler React components). I'm including…
jcv8000
  • 41
  • 1
  • 2
1
vote
2 answers

Mask tag in svg is ignored if used from an external svg-sprite file

I'm trying to use an svg sprite in my project, and it works fine, unless you're using a mask tag in a sprite: public/sprite.svg: …
Ziya Mamedov
  • 23
  • 6
1
vote
0 answers

svg is not rendering from symbol svg sprite (in external file)

I used to SVG Spritemap Webpack Plugin for autocompilation of svg sprite. My plugin config is looks like this new SVGSpritemapPlugin([ './src/common/components/VSvgSprite/icons/illustration/**/*.svg', …
Veronica Ryzhkova
  • 91
  • 1
  • 9
1
vote
2 answers

When I open the index file directly, svg does not appear

I have a website. The file structure is as follows: -index.html -imgs --sprite.svg When I open the site on a port using live-server in vscode, svg's appear. But when I open it directly from the file, it does not appear. The svg code in index.html…
by-brt
  • 45
  • 7
1
vote
0 answers

Using gulp-svg-sprite with dynamic destination based on source folder

this is my use case: I have a source folder with icon 'collections' divided in folders, i.e. src/ svg/ basic/ icon-1.svg icon-2.svg ... ecommerce/ icon-1.svg icon-2.svg …
Luca Rosaldi
  • 21
  • 4
1
vote
1 answer

"exports is not defined" when loading svg icon

I'm using the svg-sprite-loader plug-in when trying to load an icon from an svg sprite file, however, the page fails with webpack error "exports is not defined". What could be happening? How can one debug webpack loaders like this and get more…
Peteris
  • 3,548
  • 4
  • 28
  • 44
1
vote
1 answer

How to default a SVG sprite if an ID was not found

I have a sprite of SVGs and a list of icons/logos in my database. I loop through all of them and use a templating engine to generate my icons, such as:
…
Radu Chiriac
  • 1,374
  • 3
  • 18
  • 34
1
vote
1 answer

How to tell Webpack to output nothing?

I'm trying to configure svg-sprite-loader/plugin. I've made standalone Webpack configuration file for that task. It look into specified directory and take every .svg from it. The result is icons.svg sprite file. BUT Webpack also creates .js for…
NikitaK
  • 496
  • 1
  • 6
  • 14
1
2
3 4 5