simple-svg-sprite-loader

Install

Install with npm

npm install --save-dev simple-svg-sprite-loader

simple-svg-sprite-loader on npmjs.org

Introduction

A very simple webpack loader for SVGs that will automatically generate and inject all SVGs as a sprite into the DOM. It is intentionally kept simple with a very narrow use case:

A library wants to ship SVG icons in tree-shaking-enabled way.

It could also work for applications directly.

Usage

Library Side

File structure:

- icons
  - my-icon.svg
  - my-icon.js
  - fish.svg
  - fish.js
- icons.js // barrel file as your public interface

icons/my-icon.js

export const myIcon = require('!simple-svg-sprite-loader!./my-icon.svg');

icons/icons.js

export { myIcon } from './icons/my-icon';
export { fish } from './icons/fish';

Hint: both of these files could be easily generated by a build script.

Client side

import { fish } from 'your-library/icons';

console.log(fish.id, fish.name, fish.svg); // > "sssl-fish" "fish" "<svg id=\"fish\" [...]"

const svg = document.createElement('svg');
svg.innerHTML = `<use xlink:href="#${fish.id}"></use>`;
document.body.appendChild(svg);

You should use the icons id attribute as it gets prefixed at build time to avoid collisions with user defined ids.

Configuration

none.

Compatibility

Only Browsers are supported.

• Firefox (reasonably recent)
• Chrome (reasonably recent)
• Internet Explorer (IE 11)
• Safari (untested, should work though)

Tested with Webpack 4.41.x

Sprite Rendering

The sprite gets appended to document.body on document ready (using domready).

It will add something like this:

<div>
    <svg height="0" width="0" style="position: absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <svg id="sssl-fish" xmlns="http://www.w3.org/2000/svg" viewBox="[icon's viewbox]">...</svg>
            <svg id="sssl-my-icon" xmlns="http://www.w3.org/2000/svg" viewBox="[icon's viewbox]">...</svg>
        </defs>
    </svg>
</div>

If your application lazily loads more icons, the injector will append them to the existing sprite (batched).