Wondering what’s next for npm?Check out our public roadmap! »

    babel-plugin-inline-import-data-uri

    1.0.1 • Public • Published

    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.

    Install

    npm i babel-plugin-inline-import-data-uri

    DownloadsWeekly Downloads

    9,722

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • avatar