dom-svg-loader

DOM SVG webpack loader

Usage no npm install needed!

<script type="module">
  import domSvgLoader from 'https://cdn.skypack.dev/dom-svg-loader';
</script>

README

DOM SVG Loader

DOM SVG Loader is a library inteded for web applications that runs both in a Node server and in the client (A.K.A. Isomorphic or Universal web apps). It provides a hook to handle .svg files in the node server, and then a webpack loader to handle them in the client. It provides a function to render the svgs under a <defs> tag, so svgs appears once in the final HTML and then portions of your application requiring them will just use the use tag and will point to the required svg.

DOM SVG Loader uses SVGO to compress your svgs so final HTML being rendered will be fully optimized.

Install

npm install dom-svg-loader

Usage

dom-svg-loader will inject svgs required in the dom as "symbols", and then will use a reference to those icons from the required elements

Webpack

loaders: [
  {
    test: /\.svg$/,
    loader: 'dom-svg-loader'
  }
];

Code

Before everything

require('dom-svg-loader/hook');
require('./my-app');

Some random component

import React from 'react';
import MyIcon from './svg/my-icon.svg';

export default const mySvg = () => {
  return <MyIcon />;
};

Will output:

<svg><use xlink:href="#my-icon-abcd1234" /></svg>

The render method

import sprites from 'dom-svg-loader/sprites';
import ReactDOM from 'react-dom/server';

export default async function html() {
  const spriteContent = await sprites.render();

  `
    <!DOCTYPE html>
    <html>
    <body>
      ${spriteContent}
      ${ReactDOM.renderToString(mySvg())}
    </body>
    </html>
  `;
}

Will output:

<!DOCTYPE html>
<html>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;visibility:hidden">
    <defs>
      <symbol id="documentation-medium">
        <svg>
          <my svg element>
        </svg>
      </symbol>
    </defs>
  </svg>
  <svg><use xlink:href="#my-icon-abcd1234" /></svg>
</body>
</html>

License

MIT