# babel-plugin-inline-import-data-uri

> Babel plugin to make raw files importable as base64 encoded data URI strings.

Latest version **1.0.1** (published 2017-09-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-inline-import-data-uri
pnpm add babel-plugin-inline-import-data-uri
yarn add babel-plugin-inline-import-data-uri
bun add babel-plugin-inline-import-data-uri
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-09-20 |
| First published | 2017-08-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Pontus Alexander |
| Maintainers | pomle |
| Keywords | babel-plugin, svg, png, base64, import, inline |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-inline-import-data-uri
- npm.io page: https://npm.io/package/babel-plugin-inline-import-data-uri

## Dependencies (2)

- [mime-types](https://npm.io/package/mime-types.md) ^2.1.16
- [require-resolve](https://npm.io/package/require-resolve.md) 0.0.2

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2017-09-20
- 1.0.0 — 2017-08-14
- 0.1.2 — 2017-08-13
- 0.1.1 — 2017-08-13
- 0.1.0 — 2017-08-13

## README

# Babel Inline Import Data URI

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

## Examples

```jsx
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:
```javascript
{
  "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
```javascript
{
  "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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs), 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](https://github.com/Quadric/babel-plugin-inline-import).

---
_Source: https://npm.io/package/babel-plugin-inline-import-data-uri · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._