Babel Inline Import Data URI

Babel plugin to add the opportunity to use import file content as DataURI.

Examples

import logo from './logo.svg';
import background from './background.png';

// Will print "data:image/svg+xml;base64,PD94bWwgdmVyc2lv...4KPC9zdmc+';"
console.log(logo);

class MyComponent extends React.Component
{
  render() {
    return (
      <div style={{background: `url(${background})`}}>
        <img src={logo}/>
      </div>;
    );
  }
}

Install

npm install babel-plugin-inline-import-data-uri --save-dev

Use

Add a .babelrc file and write:

{
  "plugins": [
    "inline-import-data-uri"
  ]
}

or pass the plugin with the plugins-flag on CLI

babel-node myfile.js --plugins inline-import-data-uri

By default, Babel-Inline-Import is compatible with the following file extensions:

• .svg
• .png

Customize

If you want to enable different file extensions, you can define them in your .babelrc file

{
  "plugins": [
    ["inline-import-data-uri", {
      "extensions": [
        ".html",
        ".jpg"
      ]
    }]
  ]
}

How it works

It inserts the content of the imported file directly into the importing file encoded as Data URI, assigning it to a variable with the same identifier of the import statement, thus replacing the import statement and the file path by its resulting content.

Credits

This project is based on babel-plugin-inline-import.