Load SVG icons using asset-data-url #4527
Merged
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
javierm
force-pushed
the
asset_data_url
branch
5 times, most recently
from
857f3af
to
e03ae9f
Compare
javierm
force-pushed
the
reduce_font_awesome
branch
from
7ab8826
to
2bb0029
Compare
javierm
force-pushed
the
reduce_font_awesome
branch
2 times, most recently
from
b8aa9db
to
a0f2577
Compare
javierm
force-pushed
the
reduce_font_awesome
branch
from
a0f2577
to
be3811a
Compare
javierm
force-pushed
the
reduce_font_awesome
branch
3 times, most recently
from
f9fde6b
to
4d49ec8
Compare
javierm
force-pushed
the
asset_data_url
branch
2 times, most recently
from
6fd161c
to
b95c9e8
Compare
Back in commit 925f04e from pull request #4206 we wrote about our way to load SVG icons: > Using this technique will result in one HTTP request per icon, which > might affect performance We considered using CSS with Data URIs, and wrote: > This method does not generate any extra HTTP requests and only > downloads the icons we need. However, maintaining it is really hard, > since we need to manually copy all the <svg> code for every icon we > use, and do it again every time we upgrade Font Awesome. Back when I wrote that, I didn't know Sass had a function named `asset-data-url` which generated Data URIs automatically given a filename. I searched for it, but somehow I only found Compass helpers doing a similar thing. Note we're using CSS variables to reduce the size of the generated CSS. If we used `mask-image: asset-data-url(...)`, the generated CSS would include the value returned by `asset-data-url` twice: once for the `mask-image` property and once for the `-webkit-image` property. The percentage of browsers supporting `mask-image` and not supporting CSS variables is really small (less than 1%), so in that regard things remain more or less the same and unsupported browsers will render the icons using the `font-family: "Font Awesome 5 Free` property. After these changes, the size of the generated CSS increases from 475KB to 533KB. If we didn't use CSS variables, the generated CSS would use 591KB. We believe this is acceptable because the SVG icons we use are very small files (about 1-1.5KB big) and, downloaded separately, they also amount to about 45KB, which is similar to the CSS file increase we get. Using `asset-data-url` we download them in one request instead of having one request per file (about 35 extra requests).
Senen
approved these changes
Jul 5, 2021
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.
References
Background
Back in commit 925f04e from pull request #4206 we wrote about our way to load SVG icons:
We considered using CSS with Data URIs, and wrote:
Back when I wrote that, I didn't know Sass had a function named
asset-data-urlwhich generated Data URIs automatically given a filename. I searched for it, but somehow I only found Compass helpers doing a similar thing.Objectives
Notes
After these changes, the size of the generated CSS increases from 475KB to 533KB. If we didn't use CSS variables, the generated CSS would use 591KB.
We believe this is acceptable because the SVG icons we use are very small files (about 1-1.5KB big) and, downloaded separately, they also amount to about 45KB, which is similar to the CSS file increase we get. Using
asset-data-urlwe download them in one request instead of having one request per file (about 35 extra requests).