Skip to content

Improve SVG icon handling

Sarah German requested to merge safari-svgs into main

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
image image

Note: Screenshots from Safari. These icons do render OK in Chrome.

Edited by Sarah German

Merge request reports