Optimize how the GitLab icons sprite loads on each page
We load a sprite which fetches all the GitLab SVG icons, and this anchor link wasn't working https://docs.gitlab.com/ee/user/project/web_ide/index.html#live-preview, because there's an "id=live-preview"
in the (hidden) SVG that loads at each page. This was fixed with !848 (merged) which moved the sprite to be the last one loading, but it could be further optimized.
Likely the solution is to prefix each SVG's <symbol>
definition. For example id="live-preview"
becomes id="icon-live-preview"
.
Background on the implementation
The SVG node defines a library of reuse
able vector definitions (<symbol>
s). This way if an icon needed to be used in a page 2x+, it would only be defined once in this library and then referenced for render. Checkout https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use to learn more.