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; Component { return <div => <img =/> </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.