@onefootball/of-webpack-loaders

A webpack loader which transforms svg file paths into base64 strings

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
11Sep 28, 2017Sep 11, 2017Minified + gzip package size for @onefootball/of-webpack-loaders in KB

Readme

of-webpack-loaders

This package provides some useful webpack (> 3) loaders.

How to install

How to install it in your project:

  1. Add the dependency
npm i --save-dev @onefootball/of-webpack-loaders
  1. Add a module loader in your webpack configuration:
// webpack ...
module: {
    rules: [
      {
          test: /\.html$/,
          use: [
              { loader: 'raw-loader'},
              { loader: '@onefootball/of-webpack-loaders/svgfile-to-base64-loader' },
              { loader: '@onefootball/of-webpack-loaders/svgfile-to-string-loader' }
      }
// ...

svgfile-to-base64-loader

The svgfile-to-base64 loader parses any source file for svg file paths and returns their base64 encoded version.

Example

<img class="share-img" src="requireSVGtoB64('assets/myico.svg');" alt="my icon">

<!-- will output :
  <img class="share-img" src="data:image/svg+xml;base64,0123456789ABCDEF..." alt="my icon">
-->

svgfile-to-string-loader

The svgfile-to-string loader parses any source file for svg file paths and returns their content as a plain string.

Example

requireSVGtoString('assets/myico.svg');

<!-- will output :
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="...">
      <path d="...."></path>
  </svg>
-->

It is possible to assign some css classes to the final svg:

requireSVGtoString('assets/myico.svg', 'my class');

<!-- will output :
  <svg class="my class" xmlns="http://www.w3.org/2000/svg" viewBox="...">
      <path d="...."></path>
  </svg>
-->

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.