# @rollup/plugin-url
> Import files as data-URIs or ES Modules
Latest version **8.0.2** (published 2023-10-05) · MIT license · 0 weekly downloads
## Install
```sh
npm install @rollup/plugin-url
pnpm add @rollup/plugin-url
yarn add @rollup/plugin-url
bun add @rollup/plugin-url
```
## Health
**Score 40/100 (D)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 8.0.2 |
| Published | 2023-10-05 |
| First published | 2019-11-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14.0.0 |
| Dependencies | 3 |
| Unpacked size | 16.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3757 |
| Author | Arpad Borsos |
| Maintainers | shellscape, rich_harris, guybedford, lukastaegert |
| Keywords | rollup, plugin, url |
## Links
- npm: https://www.npmjs.com/package/@rollup/plugin-url
- Repository: https://github.com/rollup/plugins
- Homepage: https://github.com/rollup/plugins/tree/master/packages/url/#readme
- Issues: https://github.com/rollup/plugins/issues
- npm.io page: https://npm.io/package/@rollup/plugin-url
## Dependencies (3)
- [mime](https://npm.io/package/mime.md) ^3.0.0
- [make-dir](https://npm.io/package/make-dir.md) ^3.1.0
- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) ^5.0.1
## Alternatives
- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads
## Recent versions
- 8.0.2 (latest) — 2023-10-05
- 8.0.1 — 2022-10-21
- 8.0.0 — 2022-10-10
- 7.0.0 — 2022-04-29
- 6.1.0 — 2021-07-26
- 6.0.0 — 2020-11-30
- 5.0.1 — 2020-06-05
- 5.0.0 — 2020-05-11
- 4.0.2 — 2020-02-01
- 4.0.1 — 2020-01-07
- 4.0.0 — 2019-11-25
## README
[npm]: https://img.shields.io/npm/v/@rollup/plugin-url
[npm-url]: https://www.npmjs.com/package/@rollup/plugin-url
[size]: https://packagephobia.now.sh/badge?p=@rollup/plugin-url
[size-url]: https://packagephobia.now.sh/result?p=@rollup/plugin-url
[![npm][npm]][npm-url]
[![size][size]][size-url]
[](https://liberamanifesto.com)
# @rollup/plugin-url
🍣 A Rollup plugin which imports files as data-URIs or ES Modules.
## Requirements
This plugin requires an [LTS](https://github.com/nodejs/Release) Node version (v14.0.0+) and Rollup v1.20.0+.
## Install
Using npm:
```console
npm install @rollup/plugin-url --save-dev
```
## Usage
Create a `rollup.config.js` [configuration file](https://www.rollupjs.org/guide/en/#configuration-files) and import the plugin:
```js
import url from '@rollup/plugin-url';
export default {
input: 'src/index.js',
output: {
dir: 'output',
format: 'cjs'
},
plugins: [url()]
};
```
Then call `rollup` either via the [CLI](https://www.rollupjs.org/guide/en/#command-line-reference) or the [API](https://www.rollupjs.org/guide/en/#javascript-api).
With an accompanying file `src/index.js`, the local `image.svg` file would now be importable as seen below:
```js
// src/index.js
import svg from './image.svg';
console.log(`svg contents: ${svg}`);
```
## Options
### `exclude`
Type: `String` | `Array[...String]`
Default: `null`
A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patterns, which specifies the files in the build the plugin should _ignore_. By default no files are ignored.
### `include`
Type: `String` | `Array[...String]`
Default: `['**/*.svg', '**/*.png', '**/*.jp(e)?g', '**/*.gif', '**/*.webp']`
A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patterns, which specifies the files in the build the plugin should operate on. By default .svg, .png, .jpg, .jpeg, .gif and .webp files are targeted.
### `limit`
Type: `Number`
Default: `14336` (14kb)
The file size limit for inline files. If a file exceeds this limit, it will be copied to the destination folder and the hashed filename will be provided instead. If `limit` is set to `0` all files will be copied.
### `publicPath`
Type: `String`
Default: (empty string)
A string which will be added in front of filenames when they are not inlined but are copied.
### `emitFiles`
Type: `Boolean`
Default: `true`
If `false`, will prevent files being emitted by this plugin. This is useful for when you are using Rollup to emit both a client-side and server-side bundle.
### `fileName`
Type: `String`
Default: `'[hash][extname]'`
If `emitFiles` is `true`, this option can be used to rename the emitted files. It accepts the following string replacements:
- `[hash]` - The hash value of the file's contents
- `[name]` - The name of the imported file (without its file extension)
- `[extname]` - The extension of the imported file (including the leading `.`)
- `[dirname]` - The parent directory name of the imported file (including trailing `/`)
### sourceDir
Type: `String`
Default: (empty string)
When using the `[dirname]` replacement in `fileName`, use this directory as the source directory from which to create the file path rather than the parent directory of the imported file. For example:
_src/path/to/file.js_
```js
import png from './image.png';
```
_rollup.config.js_
```js
url({
fileName: '[dirname][hash][extname]',
sourceDir: path.join(__dirname, 'src')
});
```
Emitted File: `path/to/image.png`
### `destDir`
Type: `String`
Default: (empty string)
The destination dir to copy assets, usually used to rebase the assets according to HTML files.
## Meta
[CONTRIBUTING](/.github/CONTRIBUTING.md)
[LICENSE (MIT)](/LICENSE)
---
_Source: https://npm.io/package/@rollup/plugin-url · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._