Import files as data-URIs or ES Modules
Last updated a month ago by shellscape .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @rollup/plugin-url 
SYNC missed versions from official npm registry.

npm size libera manifesto


???? A Rollup plugin which imports files as data-URIs or ES Modules.


This plugin requires an LTS Node version (v8.0.0+) and Rollup v1.20.0+.


Using npm:

npm install @rollup/plugin-url --save-dev


Create a rollup.config.js configuration file and import the plugin:

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 or the API.

With an accompanying file src/index.js, the local image.svg file would now be importable as seen below:

// src/index.js
import svg from './image.svg';
console.log(`svg contents: ${svg}`);



Type: String | Array[...String]
Default: null

A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.


Type: String | Array[...String]
Default: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.gif']

A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should operate on. By default .svg, .png, .jpg, and .gif files are targeted.


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.


Type: String
Default: (empty string)

A string which will be added in front of filenames when they are not inlined but are copied.


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.


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 /)


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:


import png from './image.png';


  fileName: '[dirname][hash][extname]',
  sourceDir: path.join(__dirname, 'src')

Emitted File: path/to/image.png


Type: String
Default: (empty string)

The destination dir to copy assets, usually used to rebase the assets according to HTML files.




Current Tags

  • 5.0.1                                ...           latest (a month ago)

5 Versions

  • 5.0.1                                ...           a month ago
  • 5.0.0                                ...           2 months ago
  • 4.0.2                                ...           5 months ago
  • 4.0.1                                ...           6 months ago
  • 4.0.0                                ...           8 months ago

Copyright 2014 - 2016 © taobao.org |