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
|
31 | and plug it into Neutrino:
|
32 |
|
33 | ```js
|
34 | // Using function middleware format
|
35 | const images = require('neutrino-middleware-image-loader');
|
36 |
|
37 | // Use with default options
|
38 | neutrino.use(images);
|
39 |
|
40 | // Usage showing default options
|
41 | neutrino.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
|
53 | module.exports = {
|
54 | use: ['neutrino-middleware-image-loader']
|
55 | };
|
56 |
|
57 | // Usage showing default options
|
58 | module.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
|
78 | ready to make changes.
|
79 |
|
80 | ### Rules
|
81 |
|
82 | The 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 |
|
92 | This middleware is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
|
93 | containing 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/
|