A webpack loader which transforms svg file paths into base64 strings


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



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' }
// ...


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


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


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



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

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>

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.