# 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 `svg`s under a `` tag, so `svg`s 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](https://github.com/svg/svgo) to compress your `svg`s 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 ```javascript loaders: [ { test: /\.svg$/, loader: 'dom-svg-loader' } ]; ``` ### Code #### Before everything ```javascript require('dom-svg-loader/hook'); require('./my-app'); ``` #### Some random component ```javascript import React from 'react'; import MyIcon from './svg/my-icon.svg'; export default const mySvg = () => { return ; }; ``` Will output: ```html ``` #### The render method ```javascript import sprites from 'dom-svg-loader/sprites'; import ReactDOM from 'react-dom/server'; export default async function html() { const spriteContent = await sprites.render(); ` ${spriteContent} ${ReactDOM.renderToString(mySvg())} `; } ``` Will output: ```html ``` ## License MIT