https://github.com/nescalante/dom-svg-loader

:art: SVGs for isomorphic web applications
https://github.com/nescalante/dom-svg-loader

Last synced: 20 days ago
JSON representation

:art: SVGs for isomorphic web applications

• Host: GitHub
• URL: https://github.com/nescalante/dom-svg-loader
• Owner: nescalante
• License: mit
• Created: 2017-08-03T17:08:10.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T10:32:22.000Z (almost 2 years ago)
• Last Synced: 2024-11-11T20:51:38.756Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 770 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: Readme.md
  • License: License

Awesome Lists containing this project

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 `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