UNPKG

2.92 kBMarkdownView Raw
1# Neutrino Image Loader Middleware
2[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
3
4`neutrino-middleware-image-loader` is Neutrino middleware for loading and importing image files from modules.
5
6## Requirements
7
8- Node.js v6.10+
9- Yarn or npm client
10- Neutrino v6
11
12## Installation
13
14`neutrino-middleware-image-loader` can be installed via the Yarn or npm clients.
15
16#### Yarn
17
18```bash
19❯ yarn add neutrino-middleware-image-loader
20```
21
22#### npm
23
24```bash
25❯ npm install --save neutrino-middleware-image-loader
26```
27
28## Usage
29
30`neutrino-middleware-image-loader` can be consumed from the Neutrino API, middleware, or presets. Require this package
31and plug it into Neutrino:
32
33```js
34// Using function middleware format
35const images = require('neutrino-middleware-image-loader');
36
37// Use with default options
38neutrino.use(images);
39
40// Usage showing default options
41neutrino.use(images, {
42 limit: 8192,
43 svg: {},
44 img: {},
45 ico: {}
46});
47```
48
49```js
50// Using object or array middleware format
51
52// Use with default options
53module.exports = {
54 use: ['neutrino-middleware-image-loader']
55};
56
57// Usage showing default options
58module.exports = {
59 use: [
60 ['neutrino-middleware-image-loader', {
61 limit: 8192,
62 svg: {},
63 img: {},
64 ico: {}
65 }]
66 ]
67};
68```
69
70- `limit`: Return a Data URL if the file is smaller than a byte limit.
71- `svg`: Set options for the svg-url-loader used when loading svg files.
72- `img`: Set options for the url-loader used when loading png, jpeg, and gif files.
73- `ico`: Set options for the url-loader used when loading ico files.
74
75## Customization
76
77`neutrino-middleware-image-loader` creates some conventions to make overriding the configuration easier once you are
78ready to make changes.
79
80### Rules
81
82The following is a list of rules and their identifiers which can be overridden:
83
84| Name | Description | Environments |
85| ---- | ----------- | ------------ |
86| `img` | Allows importing JPEG, PNG, and GIF files from modules. Contains a single loader named `url`. | all |
87| `svg` | Allows importing SVG files from modules. Contains a single loader named `url`. | all |
88| `ico` | Allows importing ICO files from modules. Contains a single loader named `url`. | all |
89
90## Contributing
91
92This middleware is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
93containing all resources for developing Neutrino and its core presets and middleware. Follow the
94[contributing guide](https://neutrino.js.org/contributing) for details.
95
96[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-image-loader.svg
97[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-image-loader.svg
98[npm-url]: https://npmjs.org/package/neutrino-middleware-image-loader
99[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
100[slack-url]: https://neutrino-slack.herokuapp.com/