How I solved `xlink:href ` issue in IE11 without using svgx polyfill

In our create-react-app based application, we are using several SVG icons with different gradients and colours, and importing SVG file as React Components.
We have a collection of SVG files and build an Icon component system. After going through many dev sites, we have decided to go with SVG sprite approach by importing symbol definitions using <use> tag and ‘xlink:href’ (deprecated as of now) OR ‘href’ attributes.
<!-- Sprite SVG File having gradient and icon definitions --><svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="app-gradient-default">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs><symbol id="delete-icon" viewBox="0 0 32 32">
<!-- <path>s and whatever other shapes in here -->
</symbol>
<symbol id="save-icon" viewBox="0 0 32 32">
<!-- <tilte>, <decription>, <path>s here -->
</symbol>
</svg>
The `Problem` with IE11 and SVGX
Everything was perfect until the client asked for IE11 support, so we have decided to go with an excellent polyfill developed by Icomoon team called svgx. But, we have observed that in IE11, svgx using ajax call to load SVG file to the DOM. And we don't like to add 1 more polyfill + 1 more Ajax call.
Then, we have changed our approach slightly as below,
- Render the SVG Sprite file as the first component in the application.
- Use these symbol and gradient definitions from the sprite component to building the Icon components for the app.
Thus, we can get rid of svgx polyfill because there is no external SVG file loaded.
App Component
Icon Component
Pros
- It enables the reuse of symbol and gradient definitions
- Fast loading
- No polyfills
- No extra loading of components
- Scalable & easy to maintain
Cons
- More codes
- Increase in the bundle size depends on your sprite file component size.
Thanks for reading, and please share your thoughts.
