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.
# 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.jsTo use CDN with SRI (Subresource Integrity), check out the jsdelivr page and get the hash there.
// 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.
Any contribution is appreciated. To get going, check out the contribution guidelines, then the development manual.
Thank you, have fun!