Use SVG sprites for icons #13730
Open
Use SVG sprites for icons #13730
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Hi @swissspidy, following our discussion from #13411, we implemented a custom runtime generator as shown in the |
|
Need to add babel-loader as well to parse the JSX, as per the example. https://github.com/JetBrains/svg-sprite-loader/blob/master/examples/custom-runtime-generator/webpack.config.js |
|
The icons now appear 🎉 |
|
Sounds like progress! We don‘t really use CSS classes as we use styled-components. Perhaps we can do something like applying viewBox from the symbol to the svg in the runtime or so. Needs some exploration/testing. |
swissspidy
reviewed
Jun 19, 2024
Yes, applying the viewBox fixed it! Thanks a lot 🎉 |
|
All checks passing 🎉 |
Swanand01
added
Type: Performance
|
Size Change: +17.6 kB (+0.64%) Total Size: 2.77 MB
ℹ️ View Unchanged
|
|
Plugin builds for 682a36f are ready 🛎️!
|
|
Why is the bundle size increasing like that? I was hoping for the opposite or equal. Can you analyze that a bit? |
swissspidy
reviewed
Jun 20, 2024
swissspidy
reviewed
Jun 20, 2024
swissspidy
reviewed
Jun 20, 2024
Running Taking a look into the built (e, t, a) => {
"use strict";
a.d(t, { default: () => CheckboxSpriteSymbolComponent });
var n = a(96540),
o = a(12897),
r = a.n(o),
l = a(55042),
C = a.n(l),
i = a(46468);
function s() {
return (
(s = Object.assign
? Object.assign.bind()
: function (e) {
for (var t = 1; t < arguments.length; t++) {
var a = arguments[t];
for (var n in a)
Object.prototype.hasOwnProperty.call(a, n) &&
(e[n] = a[n]);
}
return e;
}),
s.apply(this, arguments)
);
}
const c = new (r())({
id: "checkbox",
use: "checkbox-usage",
viewBox: "0 0 32 32",
content:
'<symbol xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" id="checkbox"><path fill="currentColor" fill-rule="evenodd" d="M23.897 18.146a.5.5 0 0 1 .707.708l-4.493 4.493-.007.007a.5.5 0 0 1-.708 0l-.006-.007-2.494-2.493a.5.5 0 0 1 .708-.708l2.146 2.147z" clip-rule="evenodd" /><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M20.333 15.5v-5.083C20.333 9.634 19.7 9 18.917 9h-6.5C11.634 9 11 9.634 11 10.417v11.166c0 .783.634 1.417 1.417 1.417H14.5" /></symbol>',
});
};I think our svgs are ending up in JS :( |
|
Can this be fixed? The idea behind this whole ticket was to improve performance by reducing bundle size. An icon should just reference the definition in the sprite and not include the svg itself as well. Maybe need to consult the svg-sprite-loader repo examples again. |
|
Okay this is what I have found so far:
@swissspidy Your inputs on this would be of great help 😄 |
|
So we need extract an a custom runtime returning a component, is that correct? Are there any examples for that somewhere or other repositiries using that?
These bubdle size PR comments are currently configured to only list JS and CSS files. That‘s why you don‘t see SVGs there. This can be changed in the workflow file. |
Yes, exactly. But it seems this is putting the symbol components inside the js bundle, which is increasing its size. |
swissspidy
reviewed
Jun 21, 2024
|
Maybe you can find some existing repos/examples so we can learn how they are doing it. If not, let's put this ticket aside for now as it seems bigger as anticipated.
Here's where that would need to be changed: web-stories-wp/.github/workflows/build-and-deploy.yml Lines 112 to 120 in 0be152e |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds support for using an svg sprite to render icons. The
svg-sprite-loaderwebpack loader is used to generate the sprites.User-facing changes
None.
Testing Instructions
This PR can be tested by following these steps:
Reviews
Does this PR have a security-related impact?
No.
Does this PR change what data or activity we track or use?
No.
Does this PR have a legal-related impact?
No.
Checklist
Type: XYZlabel to the PRFixes #13411