inline-loader

A webpack loader that wraps the content of a resource inside a <div> element and inserts it into the DOM.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
inline-loader
1120.1.18 years ago9 years agoMinified + gzip package size for inline-loader in KB

Readme

inline-loader
A webpack loader that wraps the content of a resource inside a <div> element and inserts it into the DOM. This loader was initially intended to inline SVG sprites which can then be used as described by this CSS-TRICKS article. However, since inlining an svg is not different from inlining any other markup, you can inline any type of HTML-like markup.

Installation

$ npm install inline-loader --save

Usage

If you are unfamiliar with loaders for webpack, have a look at Documentation: Using loaders.
To use the inline-loader, add it to your webpack.config.js as follows:
loaders: [
  { test: /\.svg$/i, loader: 'inline' }
]

Replace the regular expression as needed to support specific paths and/or file types.
The inline-loader wraps the content of a resource inside a <div> element and assigns an id attribute
<div id="inline-[filename]">
  <!-- resource content -->
</div>

where filename is the filename of the resource without extension.
By default, the wrapper <div> will be inserted into the DOM at the end of the <body> element. If you prefer to wrap all your inlined code inside a specific existing element, you can pass the parentId option to the inline-loader inside the webpack query
loaders: [
  { test: /\.svg$/i, loader: 'inline?parentId=[id]' }
]

where id is the id of your overall wrapper element.

Planned features

  • Support for chaining with other loaders such as the image-webpack-loader.
  • Write tests.
  • More flexibility regarding wrapper elements.
  • Support for adding classes to wrapper elements.

Release History

Credit

This is my first loader for webpack. I took a lot of ideas from the file-loader and the style-loaders.

License

MIT (http://www.opensource.org/licenses/mit-license.php)