UNPKG

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