Icon Font SVG Issues
Closed this issue · 4 comments
Describe the bug
When converting SVG files into the icon font, some icons render awkwardly (most notable in icons that have overlapping paths).
The following icons (at least) are broken:
- Air Conditioner
- ATS
- ATS Alt
- Battery Large Reset
- Battery Large Showing Terminal
- Cybersecurity Two Tone
- Diagnostic
- Dimmer
- Distribution Box Outline
- Drive
- Motor
- Motor Alt
- Motor Controller
- Motor Controller Outline
- Motor Outline
- Phase Angle
- Relay
- Smoke Detector
- Switch
- Trip Curve
- Tripped
- UPS
- UPS Outline
What is the expected behavior?
Icons should render exactly the same in the icon font as the svg or MUI libraries.
What are the steps to reproduce?
Clone the icon repository and run yarn start to compare the icon font demo and the mui demo (svg) side by side. Observe that some of the icons in the icon font example do not match.
Screenshots or links to minimum reproduction example
Additional Context
This has been reported by multiple teams (including CRDS and Green Motion).
This also affects the RN Vector Icons package because it uses the icon font under the hood.
To fix this, the SVGs need to be re-exported and checked to make sure that they render correctly in both formats (Huayun was able to do this by changing the order of layers in Figma, I was able to do it in Illustrator by simplifying paths with the pathfinder tool).
The SVG looks fine here: https://github.com/pxblue/icons/tree/dev/design/Lighting
might be tied with all the svg export mess that caused troubles with icon fonts too... which we need to manually fix it via adobe illustrator. There is a story in backlog, but won't get touched until R23
We need to up-prioritize this into R22.