├── .eslintrc ├── .gitignore ├── CHANGELOG.md ├── README.md ├── package.json ├── rollup.config.js └── src └── index.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "indent": [ 2, "tab", { "SwitchCase": 1 } ], 4 | "linebreak-style": [ 2, "unix" ], 5 | "semi": [ 2, "always" ], 6 | "keyword-spacing": [ 2, { "before": true, "after": true } ], 7 | "space-before-blocks": [ 2, "always" ], 8 | "space-before-function-paren": [ 2, "always" ], 9 | "no-mixed-spaces-and-tabs": [ 2, "smart-tabs" ], 10 | "no-cond-assign": [ 0 ] 11 | }, 12 | "env": { 13 | "es6": true, 14 | "browser": true, 15 | "mocha": true, 16 | "node": true 17 | }, 18 | "extends": "eslint:recommended", 19 | "parserOptions": { 20 | "ecmaVersion": 6, 21 | "sourceType": "module" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # rollup-plugin-image 2 | 3 | ## 1.0.2 4 | 5 | * Return a `name` 6 | 7 | ## 1.0.1 8 | 9 | * Fix `pkg.files` 10 | * Generate synthetic AST, for quicker parsing 11 | 12 | ## 1.0.0 13 | 14 | * First release 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Moved 2 | 3 | This module has moved and is now available at [@rollup/plugin-image](https://github.com/rollup/plugins). Please update your dependencies. This repository is no longer maintained. 4 | 5 | # rollup-plugin-image 6 | 7 | Import JPG, PNG, GIF and SVG files. 8 | 9 | ## Installation 10 | 11 | ```bash 12 | npm install --save-dev rollup-plugin-image 13 | ``` 14 | 15 | 16 | ## Usage 17 | 18 | ```js 19 | // rollup.config.js 20 | import image from 'rollup-plugin-image'; 21 | 22 | export default { 23 | entry: 'src/index.js', 24 | dest: 'dist/my-lib.js', 25 | plugins: [ 26 | image() 27 | ] 28 | }; 29 | ``` 30 | 31 | You can now use images in your bundle like so: 32 | 33 | ```js 34 | import logo from './rollup.png'; 35 | document.body.appendChild( logo ); 36 | ``` 37 | 38 | Images are encoded using base64, which means they will be 33% larger than the size on disk. You should therefore only use this for small images where the convenience of having them available on startup (e.g. rendering immediately to a canvas without co-ordinating asynchronous loading of several images) outweighs the cost. 39 | 40 | 41 | ## License 42 | 43 | MIT 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rollup-plugin-image", 3 | "version": "1.0.2", 4 | "description": "Import JPG, PNG, GIF and SVG images", 5 | "main": "dist/rollup-plugin-image.cjs.js", 6 | "jsnext:main": "dist/rollup-plugin-image.es.js", 7 | "files": [ "src", "dist", "README.md" ], 8 | "dependencies": { 9 | "rollup-pluginutils": "^1.3.1" 10 | }, 11 | "devDependencies": { 12 | "eslint": "^2.11.1", 13 | "rollup": "^0.26.3", 14 | "rollup-plugin-buble": "^0.10.0" 15 | }, 16 | "scripts": { 17 | "test": "echo \"no tests...\"", 18 | "pretest": "npm run build:cjs", 19 | "build": "npm run build:cjs && npm run build:es", 20 | "build:cjs": "rollup -c -o dist/rollup-plugin-image.cjs.js -f cjs", 21 | "build:es": "rollup -c -o dist/rollup-plugin-image.es.js -f es6", 22 | "lint": "eslint src", 23 | "prepublish": "npm run lint && npm test && npm run build:es" 24 | }, 25 | "repository": { 26 | "type": "git", 27 | "url": "git+https://github.com/rollup/rollup-plugin-image.git" 28 | }, 29 | "keywords": [ 30 | "rollup", 31 | "modules", 32 | "images" 33 | ], 34 | "author": "Rich Harris", 35 | "license": "MIT", 36 | "bugs": { 37 | "url": "https://github.com/rollup/rollup-plugin-image/issues" 38 | }, 39 | "homepage": "https://github.com/rollup/rollup-plugin-image#readme" 40 | } 41 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import buble from 'rollup-plugin-buble'; 2 | 3 | export default { 4 | entry: 'src/index.js', 5 | plugins: [ buble() ] 6 | }; 7 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { readFileSync } from 'fs'; 2 | import { extname } from 'path'; 3 | import { createFilter } from 'rollup-pluginutils'; 4 | 5 | const mimeTypes = { 6 | '.jpg': 'image/jpeg', 7 | '.jpeg': 'image/jpeg', 8 | '.png': 'image/png', 9 | '.gif': 'image/gif', 10 | '.svg': 'image/svg+xml' 11 | }; 12 | 13 | export default function image ( options = {} ) { 14 | const filter = createFilter( options.include, options.exclude ); 15 | 16 | return { 17 | name: 'image', 18 | 19 | load ( id ) { 20 | if ( !filter( id ) ) return null; 21 | 22 | const mime = mimeTypes[ extname( id ) ]; 23 | if ( !mime ) return null; // not an image 24 | 25 | const data = readFileSync( id, 'base64' ); 26 | const code = `var img = new Image(); img.src = 'data:${mime};base64,${data}'; export default img;`; 27 | 28 | const ast = { 29 | type: 'Program', 30 | sourceType: 'module', 31 | start: 0, 32 | end: null, 33 | body: [] 34 | }; 35 | 36 | return { ast, code, map: { mappings: '' } }; 37 | } 38 | }; 39 | } 40 | --------------------------------------------------------------------------------