Babel Inline Import Data URI

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

Examples

1import logo from './logo.svg';
2import background from './background.png';
3
4// Will print "data:image/svg+xml;base64,PD94bWwgdmVyc2lv...4KPC9zdmc+';"
5console.log(logo);
6
7class MyComponent extends React.Component
8{
9  render() {
10    return (
11      <div style={{background: `url(${background})`}}>
12        <img src={logo}/>
13      </div>;
14    );
15  }
16}

Install

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

Use

Add a .babelrc file and write:

1{
2  "plugins": [
3    "inline-import-data-uri"
4  ]
5}

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

1{
2  "plugins": [
3    ["inline-import-data-uri", {
4      "extensions": [
5        ".html",
6        ".jpg"
7      ]
8    }]
9  ]
10}

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.