frontwelljs / load-svg-file

Load SVG files over XHR and embed the SVG content into the DOM.

load-svg-file

Load SVG files over XHR and embed the SVG content into the DOM. Compatible with every module type, environment, and variety (browser, Node.js, AMD, CommonJS, UMD, ES2015-2017) and uses Promises, where available.

Installation

# Using NPM
npm install load-svg-file --save

# Using Yarn
yarn add load-svg-file

# Using CDN - development
https://cdn.jsdelivr.net/npm/load-svg-file/dist/load-svg-file.js

# Using CDN - production (source map included besides the file)
https://cdn.jsdelivr.net/npm/load-svg-file/dist/load-svg-file.min.js

To use CDN with SRI (Subresource Integrity), check out the jsdelivr page and get the hash there.

Usage

// Loading an SVG file.
loadSvgFile('images/icons.svg')

// Loading an SVG file with options.
loadSvgFile('images/icons.svg', {
 class: 'custom-class', // custom class on the container element
 hide: false            // don't hide the container element
})

// Loading an SVG file with callback.
loadSvgFile('images/icons.svg', function (error) {
 if (error) {
   throw error
 }
 console.log('SVG Loaded successfully')
})

// Loading an SVG file with options and callback.
loadSvgFile(
  'images/icons.svg',
  {
    class: 'custom-class', // custom class on the container element
    hide: false            // don't hide the container element
  },
  function (error) {
    if (error) {
      throw error
    }
    console.log('SVG Loaded successfully')
  }
)

// With RequireJS (AMD).
require(['loadSvgFile'], function (loadSvgFile) {
  console.log('loadSvgFile ready')
})

// In Node.js (CommonJS) or with Browserify.
const loadSvgFile = require('load-svg-file')

// In ES6 (e.g.: with Babel)
import loadSvgFile from 'load-svg-file'

// In ES2015
loadSvgFile('images/icons.svg')
  .then(() => console.log('SVG Loaded successfully'))

// In ES2017
await loadSvgFile('images/icons.svg')

For more, check out the documentation, examples and the tests.

Contribution

Any contribution is appreciated. To get going, check out the contribution guidelines, then the development manual.

Thank you, have fun!

License

MIT @ Richard Szakacs