-
-
Notifications
You must be signed in to change notification settings - Fork 423
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Flatten icons #2135
base: main
Are you sure you want to change the base?
feat: Flatten icons #2135
Conversation
This is pretty breaking changish. |
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 PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 5 days. |
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.
Don't close. |
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.
![lucide-overlaps](https://private-user-images.githubusercontent.com/1251082/328142010-35f2717a-bbc6-4e6f-a042-d8ff4a49005b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNDU0MjcsIm5iZiI6MTcyMTI0NTEyNywicGF0aCI6Ii8xMjUxMDgyLzMyODE0MjAxMC0zNWYyNzE3YS1iYmM2LTRlNmYtYTA0Mi1kOGZmNGE0OTAwNWIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MTdUMTkzODQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9N2I4YjJhZDg2YjRiN2RiZGE5ZjQxZmQ3ZGI4MGM1OGJjMjAyZTQxZmMzNWY3NjE5OTI5ZWE2YTAxN2VkMDcyMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.h2-H_PwuIh8BpRLYeUJcdIz98T3uC8P5hD0pOXTL_Io)
Edges are a little bit smoother in places where several shapes converge. This isn't visible to the naked eye.
![lucide-edges](https://private-user-images.githubusercontent.com/1251082/328142078-020cefbc-aa2c-4fba-af6a-e8237abaa7d7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNDU0MjcsIm5iZiI6MTcyMTI0NTEyNywicGF0aCI6Ii8xMjUxMDgyLzMyODE0MjA3OC0wMjBjZWZiYy1hYTJjLTRmYmEtYWY2YS1lODIzN2FiYWE3ZDcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MTdUMTkzODQ3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MWJjNDhhMmFmMTY3NTU3MDc3NzQwZWM5NTgzODljZTUxZWRjYTJkYjFmNzU4ZGZiZjUyZDgyNDdlY2I4NzE1MCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.kWi7uSrH1fYJhvZaWvCBXT_yQe6T6r-iN-0mmV1oMn0)
Before Submitting