feat: Flatten icons #2135
Open
feat: Flatten icons #2135
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
|
This is pretty breaking changish. |
30 tasks
|
Any chance this one will be merged/published before 1.0? |
|
@wellguimaraes: Not sure if we should do this before v1.0, as @jguddas has stated this could potentially break a lot of apps that currently rely on the unflattened paths (e.g. to animate or fill only certain parts of icons). 🤔 |
This enables the implementation of additional optimizations without modifying the original SVG files.
Transform shapes to paths and merge all paths together. This reduces the icon size and solves the issue of overlapping strokes when using a transparent color.
Add a custom plugin to convert rectangles with rounded corners to paths. Hopefully, this may be removed when svg/svgo#1963 or another similar PR is merged in SVGO.
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.
Related to #1687.
What is the purpose of this pull request?
Description
This PR modify the package build scripts to flatten the exported SVG icons.
While source icons are made up of several shapes (
<line>,<rect>,<circle>, etc), all the shapes now get converted to<path>and merged together in a single<path>element during the build.As mentioned in #1687, this has two benefits:
Implementation
We use the Convert Shape to Path and Merge Paths SVGO plugins to convert shapes to paths and merge the paths together. Currently SVGO cannot optimize rectangles with rounded corners (svg/svgo#1963), so this PR includes a custom plugin to do that.
Impact on icon size
In most cases, converting shapes to
<path>reduce the icon's size, especially for icons made up of many shapes (e.g.sliders-horizontal.svg). In some cases, we observe a small increase of the size (e.g.layout-grid.svg), because circles and rounded rectangles are more compact than paths. Overall the output size is reduced by ~13%.Impact on the build time
One would assume that processing each icon for every build target would be bad for the build time. However, I haven't observed any significant increase of the average build time on my machine (it actually went slightly down).
Impact on icon appearance
Icons should appear the same. However there are two noticeable differences.
When using a semi-transparent stroke color, the icon now has a consistent appearance instead of showing overlaps.
Edges are a little bit smoother in places where several shapes converge. This isn't visible to the naked eye.
Before Submitting