react-with-moxy
react-with-moxy copied to clipboard
moxystudio
External SVG sprite loader strategy
From @satazor on February 9, 2017 23:12
After using external-svg-sprite-loader, I've come to the conclusion that it has a few problems:
- It can't be loaded from a different domain, see: http://stackoverflow.com/questions/32850536/cross-domain-svg-sprite
- Coloured SVGs exported with
<style>do not render with colors; this is solvable when https://github.com/svg/svgo/pull/592 lands which allows to convert from<style>to attributes. - References with
url(#id)do not work, which is a common practice for gradients.
All these problems disappear if the sprite is embed in <body>.
What if we combine both strategies by making a loader & plugin similar to external-svg-sprite-loader that creates a javascript file instead? This file would contain the sprite and the necessary code to inject it into <body>. Additionally, the inclusion of this file may be done with <script async defer src="/url/to/file"></script> to prevent blocking DOMContentReady. As a bonus, we don't need the svgxuse polyfill!
For the record, I will repeat the advantages of using an external sprite:
- A sprite file is highly cacheable
- The sprite file is loaded asynchronously which do not block the initial page load
- We can deliver gzip compression on the sprite file
Copied from original issue: moxystudio/react-with-moxy#6
From @strarsis on February 9, 2017 23:17
Concerning gradient collisions between SVGs: https://github.com/svg/svgo/issues/651
From @satazor on February 9, 2017 23:21
@strarsis I'm using svg-css-modules-loader?transformId=true which creates unique classes and ids, see: https://github.com/kevin940726/svg-css-modules-loader
From @satazor on May 2, 2017 13:43
It seems this is supported by https://github.com/kisenka/svg-sprite-loader/ as of 2.0.0. Check it out!
