Improve SVG icon handling
What does this MR do and why
Adjusts how we handle SVG icons coming in from GitLab UI. This fixes a bug with some icons not appearing in Safari, and improves performance by loading the icon sprite over a URL instead of inlining the entire sprite for each icon instance.
More specifically:
- Replaces Rollup's image plugin with the URL plugin.
- We only need to copy GitLab UI's icon sprite over to the public directory, with no modifications. The image plugin was converting the sprite to base64 and dropping it inline for each instance. We don't need (or want) this behavior.
- Removes unneeded
gl_icon
component. This was a copy of the same component from GitLab UI. We can just use GitLab UI's version of this now. - Removes Ruby code for copying the SVG icon over into
/public/assets
(Rollup will do this now)
Testing
- Open the review app
- Verify SVG icons appear in both Chrome and Safari.
- Icons to check: "On this page" menu icon at small-width (this is on all interior pages), icon on select menu on the deprecations page filter
Screenshots
Before | After |
---|---|
Note: Screenshots from Safari. These icons do render OK in Chrome.
Edited by Sarah German