In the world of web design, SVG (Scalable Vector Graphics) icons have taken center stage due to their scalability and resolution independence. However, serving these SVGs from external sources can come with its drawbacks, such as lack of customization options. Enter SVG Loader, a simple yet powerful JavaScript library that fetches SVG files using XHR and injects them right into your HTML. Let’s walk you through how to set it up and get the most out of it.

What is SVG Loader?

SVG Loader allows you to easily use externally stored SVGs just like inline SVGs, enabling flexibility with styling, interaction, and performance. It’s lightweight, works with various frameworks, and has minimal performance impact. You can see it in action in this Demo →

How to Use SVG Loader

SVG Loader is designed to be plug and play. In just a few steps, you can include it in your project.

1. Download and Include

Start by including the loader in your HTML code. Here’s how:

<!-- Include this script in your HEAD for faster loading -->
<script type="text/javascript" src="svg-loader.min.js" async></script>

Use external SVGs like so:

<svg data-src="https://unpkg.com/@mdi/svg@5.9.55/svg/star.svg" width="50" height="50" fill="red"></svg>
<svg data-src="https://unpkg.com/@mdi/svg@5.9.55/svg/heart.svg" width="50" height="50" fill="red"></svg>
<svg data-src="https://unpkg.com/@mdi/svg@5.9.55/svg/cog.svg" width="50" height="50" fill="currentColor" style="color: purple;"></svg>

For a complete example, check See Here →

2. Using the NPM Package

SVG Loader is also available through npm. Install it with the following command:

npm install external-svg-loader

Then import it in your React application:

import React from 'react';
import ReactDOM from 'react-dom';
import externalSvgLoader from 'external-svg-loader';

class App extends React.Component {
    render() {
        return (
            <svg data-src="https://s2.svgbox.net/materialui.svg?ic=mail" fill="currentColor" width="50px" height="50px" style={{ color: 'red' }}></svg>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('container'));

3. Lazy Loading

Enhance performance by lazy loading SVGs:

<svg data-src="https://unpkg.com/@mdi/svg@5.9.55/svg/heart.svg" data-loading="lazy" width="50" height="50"></svg>

Troubleshooting

• If SVGs are not loading, check CORS policies. Ensure the correct Access-Control-Allow-Origin headers are set.
• If cached versions are causing issues, you can clear the cache using: SVGLoader.destroyCache();
• SVGs loaded without the desired styles may need data-js="enabled" for scripting support.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.