❤
npm
Sign UpSign In

dom-svg-loader

1.3.4 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i dom-svg-loader

Repository

github.com/nescalante/dom-svg-loader

Homepage

github.com/nescalante/dom-svg-loader#readme

Weekly Downloads

61

Version

1.3.4

License

MIT

Unpacked Size

7.56 kB

Total Files

6

Last publish

Collaborators

  • nescalante
Try on RunKit
Report malware