Comments (10)
equinusocio
commented on June 9, 2024
1
It was just a try. Anyway thank you, actually i can confirm that the svg source was the problem, but generated through abstract inspector, not sketch.
from svg-spritemap-webpack-plugin.
christopher-j-liotta-accenture
commented on June 9, 2024
Sprite Input:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="16px" viewBox="0 0 18 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
<title>heart</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M19.8980851,15.9900007 L21.4468317,14.4412541 C22.7994006,13.0886852 22.7994006,10.8957378 21.4468317,9.54316896 C20.0942629,8.19060011 17.9013155,8.19060011 16.5487466,9.54316896 L15,11.0919156 L13.4512534,9.54316896 C12.0986845,8.19060011 9.90573714,8.19060011 8.55316828,9.54316896 C7.20059943,10.8957378 7.20059943,13.0886852 8.55316828,14.4412541 L15.1689583,21.0570441 L19.8980851,15.9900007 Z M22.1539385,15.1483609 L21.3122987,15.9900007 L15.1689583,22.4712577 L7.8460615,15.1483609 C6.10296835,13.4052677 6.10296835,10.5791553 7.8460615,8.83606218 C9.58915465,7.09296903 12.415267,7.09296903 14.1583602,8.83606218 L15,9.677702 L15.8416398,8.83606218 C17.584733,7.09296903 20.4108454,7.09296903 22.1539385,8.83606218 C23.8970316,10.5791553 23.8970316,13.4052677 22.1539385,15.1483609 Z" id="path-1"></path>
</defs>
<g id="Assets-//-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Icons-/-Favorite-/-Unfilled" transform="translate(-6.000000, -7.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="heart" fill="#000000" fill-rule="nonzero" transform="translate(15.000000, 15.000000) rotate(-360.000000) translate(-15.000000, -15.000000) " xlink:href="#path-1"></use>
</g>
</g>
</svg>Sprite output:
<symbol id="sprite-heart" viewBox="0 0 18 16">
<title>heart</title>
<defs>
<path d="M19.898 15.99l1.549-1.549a3.463 3.463 0 1 0-4.898-4.898L15 11.092l-1.549-1.549a3.463 3.463 0 0 0-4.898 4.898l6.616 6.616 4.73-5.067zm2.256-.842l-.842.842-6.143 6.481-7.323-7.323a4.463 4.463 0 0 1 6.312-6.312l.842.842.842-.842a4.463 4.463 0 0 1 6.312 6.312z" id="a"/>
</defs>
<use fill="#000" fill-rule="nonzero" xlink:href="#a" transform="translate(-6 -7)"/>
</symbol>from svg-spritemap-webpack-plugin.
christopher-j-liotta-accenture
commented on June 9, 2024
I'm pretty sure this issue is cause since these sprites coming out of sketch use tags which is abnormal
from svg-spritemap-webpack-plugin.
cascornelissen
commented on June 9, 2024
Seems like SVGO is doing this, I've just pasted the sprite input into the online version of SVGO and I get the following output.
<svg width="18" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M19.898 15.99l1.549-1.549a3.463 3.463 0 1 0-4.898-4.898L15 11.092l-1.549-1.549a3.463 3.463 0 0 0-4.898 4.898l6.616 6.616 4.73-5.067zm2.256-.842l-.842.842-6.143 6.481-7.323-7.323a4.463 4.463 0 0 1 6.312-6.312l.842.842.842-.842a4.463 4.463 0 0 1 6.312 6.312z" id="a"/>
</defs>
<use fill="#000" fill-rule="nonzero" transform="translate(-6 -7)" xlink:href="#a"/>
</svg>I'm not quite sure how this is a problem though, could you explain that with some more details?
from svg-spritemap-webpack-plugin.
cascornelissen
commented on June 9, 2024
ping @christopher-j-liotta-accenture
from svg-spritemap-webpack-plugin.
christopher-j-liotta-accenture
commented on June 9, 2024
So it seems like if all the paths in your output spritemap are and your symbols have , each symbol uses the first found path in the sheet. This leads to all outputed icons using the same path.
I got around it by cleaning up my source icons and removing their tags as they were very unnecessary (sketch exports aren't the cleanest).
But it would be nice to enforce unique id's on all elements in the output.
from svg-spritemap-webpack-plugin.
cascornelissen
commented on June 9, 2024
Ah, I get the problem now...
This isn't something that could easily be fixed programmatically though... And if it even could be done it would make more sense for it to be solved in something like SVGO.
The easiest way is what you did, manually cleaning the sprite before even passing it to the plugin.
from svg-spritemap-webpack-plugin.
equinusocio
commented on June 9, 2024
@cascornelissen I have the same issue even running SVGO cli before starting webpack. The output sprite contains all the svg with the same ID, can you reopen this?
from svg-spritemap-webpack-plugin.
cascornelissen
commented on June 9, 2024
@equinusocio, why exactly are you running SVGO cli on the sprites before webpack parses them instead of using the output.svgo option?
As I've stated before, I don't see a way to solve this programmatically (and I still feel like this isn't something the plugin should handle per se) but if anyone comes up with a solution that would solve this problem I'm open to a PR.
from svg-spritemap-webpack-plugin.
equinusocio
commented on June 9, 2024
I can confirm the problem is the Sketch svg export (Abstract use the same one). Figma exported icons are working. THe issue is generated by the icons id and the <use> tag. I opened a ticket to Abstract (https://twitter.com/equinusocio/status/1133659116956782593?s=20)
from svg-spritemap-webpack-plugin.
Related Issues (20)
- <symbol> id is mangled by SVGO but not the css url anchor #fragment HOT 4
- contenthash not replacing on watch HOT 7
- Question, how generate json file with all file names HOT 3
- Provide option to add custom attributes to SVG element. HOT 2
- Cannot disable individual SVGO plugins. HOT 3
- Module not found: Error: Can't resolve './spritemap.svg' in src HOT 5
- SVG's not scaling with Webpack 5 HOT 7
- Google chrome ignoring <mask> HOT 4
- Glob doesn't find anything on windows HOT 5
- webpack dev server support HOT 8
- Generated SVG is not added to spritemap chunk HOT 7
- version 4.4.1 not compiling HOT 10
- Windows pattern HOT 4
- Rebuilds every time editing js files in watch mode. HOT 4
- Problem with path.join on windows HOT 2
- (node:19636) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'trim' of undefined HOT 1
- 404 Error when `options.output` changed
- Preserve svg with styles attribute HOT 7
- Empty output file when the style attribute contains either "visibility: hidden" or "display: none" HOT 3
- Add `mask` support HOT 2
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-spritemap-webpack-plugin.