├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── example ├── README.md ├── app.js ├── images │ ├── bridesmaid.png │ ├── hercules.jpg │ ├── homer.gif │ └── mountain.jpg ├── index.html ├── package-lock.json ├── package.json ├── styles.css └── webpack.config.js ├── lib ├── index.js └── options.json ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | yarn.lock -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | example -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 0.1.0 2 | 3 | Updated to `sqip@0.3.2`, which comes with its Go dependencies as binaries, so Go and Primitive are no longer requirements for 64bit operating systems. 4 | Added the ability to configure `mode` and `blur` through the loader options. 5 | 6 | # 0.2.0 7 | 8 | Added the `dimensions` export which contains the width, height and the type of the imported image. 9 | 10 | ```js 11 | import { src, preview, dimensions } from './image.png'; 12 | ``` 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 EmilTholin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm][npm]][npm-url] 2 | 3 | # SQIP Loader 4 | 5 | Loads images and exports tiny SQIP previews as image/svg+xml URL-encoded data 6 | 7 | ## Requirements for non-64bit operating systems 8 | 9 | * [Golang][golang-url]. 10 | * [Primitive][primitive-url]. 11 | 12 | ## Install 13 | 14 | ```bash 15 | npm install --save-dev sqip-loader 16 | ``` 17 | 18 | ## Usage 19 | 20 | The `sqip-loader` loads your image and exports the url of the image as `src`, the image/svg+xml URL-encoded data as `preview`, and a `dimensions` object containing width, height and the type of the imported image. 21 | 22 | ```js 23 | import { src, preview, dimensions } from './image.png'; 24 | ``` 25 | 26 | **webpack.config.js** 27 | 28 | ```js 29 | module.exports = { 30 | module: { 31 | rules: [ 32 | { 33 | test: /\.(gif|png|jpe?g)$/i, 34 | use: [ 35 | { 36 | loader: 'sqip-loader', 37 | options: { 38 | numberOfPrimitives: 20 39 | } 40 | } 41 | ] 42 | } 43 | ] 44 | } 45 | }; 46 | ``` 47 | 48 | It can also be used in conjunction with [url-loader][url-loader] or [file-loader][file-loader]. 49 | 50 | **webpack.config.js** 51 | 52 | ```js 53 | module.exports = { 54 | module: { 55 | rules: [ 56 | { 57 | test: /\.(gif|png|jpe?g)$/i, 58 | use: [ 59 | { 60 | loader: 'sqip-loader', 61 | options: { 62 | numberOfPrimitives: 20 63 | } 64 | }, 65 | { 66 | loader: 'url-loader', 67 | options: { 68 | limit: 8192 69 | } 70 | } 71 | ] 72 | } 73 | ] 74 | } 75 | }; 76 | ``` 77 | 78 | ## Options 79 | 80 | | Name | Type | Default | Description | 81 | | :-----------------------: | :---------: | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 82 | | **`numberOfPrimitives`** | `{Number}` | `20` | SQIP works by first approximating the image with a certain number of shapes, specified by `numberOfPrimitives`, and then adding a blur effect to it. Larger values will generate sharper previews, but will also increase the size | 83 | | **`mode`** | `{Number}` | `0` | Specifies the type of primitive shapes that will be used to generate the image. 0=combo, 1=triangle, 2=rect, 3=ellipse, 4=circle, 5=rotatedrect, 6=beziers, 7=rotatedellipse, 8=polygon | 84 | | **`blur`** | `{Number}` | `12` | Specifies the standard deviation of the Gaussian blur | 85 | | **`skipPreviewIfBase64`** | `{Boolean}` | `false` | If set to `true`, will not generate a preview if the image already is base64 encoded. Useful when the inlined base64 representation is enough, and you don't want to bloat your files with unused previews | 86 | 87 | [npm]: https://img.shields.io/npm/v/sqip-loader.svg 88 | [npm-url]: https://npmjs.com/package/sqip-loader 89 | [golang-url]: https://golang.org/doc/install 90 | [primitive-url]: https://github.com/fogleman/primitive 91 | [file-loader]: https://github.com/webpack-contrib/file-loader 92 | [url-loader]: https://github.com/webpack-contrib/url-loader 93 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | ```bash 3 | git clone git@github.com:EmilTholin/sqip-loader.git 4 | cd sqip-loader/example 5 | npm install 6 | npm start 7 | open http://localhost:8080 8 | ``` -------------------------------------------------------------------------------- /example/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./styles.css"; 4 | import { src, preview } from "!!sqip-loader?numberOfPrimitives=20!./images/bridesmaid.png"; 5 | import homer from "./images/homer.gif"; 6 | import hercules from "./images/hercules.jpg"; 7 | import mountain from "./images/mountain.jpg"; 8 | 9 | class Img extends Component { 10 | state = { imageLoaded: false }; 11 | 12 | setImageLoaded = () => { 13 | var delay = 500 + Math.random() * 1500; 14 | setTimeout(() => this.setState({ imageLoaded: true }), delay); 15 | }; 16 | 17 | render() { 18 | return ( 19 |
20 | 21 | 26 |
27 | ); 28 | } 29 | } 30 | 31 | ReactDOM.render( 32 |
33 | 34 | 35 | 36 | 37 |
, 38 | document.getElementById("app") 39 | ); 40 | -------------------------------------------------------------------------------- /example/images/bridesmaid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmilTholin/sqip-loader/63a2fde430e4d4fb68cd53d5c95f343502627dac/example/images/bridesmaid.png -------------------------------------------------------------------------------- /example/images/hercules.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmilTholin/sqip-loader/63a2fde430e4d4fb68cd53d5c95f343502627dac/example/images/hercules.jpg -------------------------------------------------------------------------------- /example/images/homer.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmilTholin/sqip-loader/63a2fde430e4d4fb68cd53d5c95f343502627dac/example/images/homer.gif -------------------------------------------------------------------------------- /example/images/mountain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmilTholin/sqip-loader/63a2fde430e4d4fb68cd53d5c95f343502627dac/example/images/mountain.jpg -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | SQIP Loader Example 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "start": "webpack-dev-server" 4 | }, 5 | "devDependencies": { 6 | "@babel/core": "^7.7.4", 7 | "@babel/plugin-proposal-class-properties": "^7.7.4", 8 | "@babel/preset-env": "^7.7.4", 9 | "@babel/preset-react": "^7.7.4", 10 | "babel-loader": "^8.0.6", 11 | "css-loader": "^3.2.0", 12 | "file-loader": "^5.0.2", 13 | "react": "^16.12.0", 14 | "react-dom": "^16.12.0", 15 | "sqip-loader": "1.0.0", 16 | "style-loader": "^1.0.0", 17 | "url-loader": "^3.0.0", 18 | "webpack": "^4.41.2", 19 | "webpack-cli": "^3.3.10", 20 | "webpack-dev-server": "^3.9.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /example/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | background-color: #2a2d37; 5 | } 6 | 7 | .image-wrapper { 8 | position: relative; 9 | display: inline-block; 10 | width: 300px; 11 | height: 300px; 12 | vertical-align: top; 13 | } 14 | 15 | img { 16 | max-width: 100%; 17 | position: absolute; 18 | top: 0; 19 | right: 0; 20 | bottom: 0; 21 | left: 0; 22 | transition: opacity 300ms; 23 | } 24 | 25 | .image { 26 | opacity: 0; 27 | } 28 | 29 | .loaded { 30 | opacity: 1; 31 | } 32 | -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./app.js", 3 | output: { 4 | filename: "bundle.js" 5 | }, 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.js$/, 10 | exclude: /node_modules/, 11 | use: { 12 | loader: "babel-loader", 13 | options: { 14 | presets: ["@babel/preset-env", "@babel/preset-react"], 15 | plugins: ["@babel/plugin-proposal-class-properties"] 16 | } 17 | } 18 | }, 19 | { 20 | test: /\.css$/, 21 | use: ["style-loader", "css-loader"] 22 | }, 23 | { 24 | test: /\.(png|jpe?g|gif)$/, 25 | loaders: [ 26 | { 27 | loader: "sqip-loader", 28 | options: { 29 | // numberOfPrimitives: 20, 30 | // mode: 0, 31 | // blur: 12, 32 | // skipPreviewIfBase64: false 33 | } 34 | }, 35 | { 36 | loader: "url-loader", 37 | options: { 38 | limit: 8000 39 | } 40 | } 41 | ] 42 | } 43 | ] 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | var loaderUtils = require("loader-utils"); 2 | var validateOptions = require("schema-utils"); 3 | var sqip = require("sqip"); 4 | var schema = require("./options.json"); 5 | 6 | // https://codepen.io/tigt/post/optimizing-svgs-in-data-uris 7 | function encodeSvgDataUri(svg) { 8 | var uriPayload = encodeURIComponent(svg) 9 | .replace(/%0A/g, "") 10 | .replace(/%20/g, " ") 11 | .replace(/%3D/g, "=") 12 | .replace(/%3A/g, ":") 13 | .replace(/%2F/g, "/") 14 | .replace(/%22/g, "'"); 15 | 16 | return "data:image/svg+xml," + uriPayload; 17 | } 18 | 19 | module.exports = function(contentBuffer) { 20 | if (this.cacheable) { 21 | this.cacheable(true); 22 | } 23 | 24 | var options = loaderUtils.getOptions(this) || {}; 25 | 26 | validateOptions(schema, options, "SQIP Loader"); 27 | 28 | var content = contentBuffer.toString("utf8"); 29 | var filePath = this.resourcePath; 30 | var contentIsUrlExport = /^(module.exports =|export default) "data:(.*)base64,(.*)/.test(content); 31 | var contentIsFileExport = /^(module.exports =|export default) (.*)/.test(content); 32 | var src = ""; 33 | 34 | if (contentIsUrlExport) { 35 | src = content.match(/^(module.exports =|export default) (.*)/)[2]; 36 | if (options.skipPreviewIfBase64) { 37 | return 'module.exports = { "src": ' + src + ', "preview": "" };'; 38 | } 39 | } else { 40 | if (!contentIsFileExport) { 41 | var fileLoader = require("file-loader"); 42 | content = fileLoader.call(this, contentBuffer); 43 | } 44 | src = content.match(/^(module.exports =|export default) (.*);/)[2]; 45 | } 46 | 47 | var numberOfPrimitives = "numberOfPrimitives" in options ? parseInt(options.numberOfPrimitives, 10) : 20; 48 | var mode = "mode" in options ? parseInt(options.mode, 10) : 0; 49 | var blur = "blur" in options ? parseInt(options.blur, 10) : 12; 50 | var sqipResult = sqip({ 51 | filename: filePath, 52 | numberOfPrimitives: numberOfPrimitives, 53 | mode: mode, 54 | blur: blur 55 | }); 56 | var encodedSvgDataUri = encodeSvgDataUri(sqipResult.final_svg); 57 | var dimensions = JSON.stringify(sqipResult.img_dimensions) 58 | 59 | return 'module.exports = { "src": ' + src + ' , "preview": "' + encodedSvgDataUri + '", "dimensions": ' + dimensions + ' };'; 60 | }; 61 | 62 | module.exports.raw = true; 63 | -------------------------------------------------------------------------------- /lib/options.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "object", 3 | "properties": { 4 | "numberOfPrimitives": { 5 | "type": ["string", "number"] 6 | }, 7 | "mode": { 8 | "type": ["string", "number"] 9 | }, 10 | "blur": { 11 | "type": ["string", "number"] 12 | }, 13 | "skipPreviewIfBase64": { 14 | "type": "boolean" 15 | } 16 | }, 17 | "additionalProperties": true 18 | } 19 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sqip-loader", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "ajv": { 8 | "version": "6.10.2", 9 | "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz", 10 | "integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==", 11 | "requires": { 12 | "fast-deep-equal": "^2.0.1", 13 | "fast-json-stable-stringify": "^2.0.0", 14 | "json-schema-traverse": "^0.4.1", 15 | "uri-js": "^4.2.2" 16 | } 17 | }, 18 | "ajv-keywords": { 19 | "version": "3.4.1", 20 | "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.1.tgz", 21 | "integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==" 22 | }, 23 | "ansi-regex": { 24 | "version": "2.1.1", 25 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", 26 | "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" 27 | }, 28 | "ansi-styles": { 29 | "version": "2.2.1", 30 | "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", 31 | "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=" 32 | }, 33 | "argparse": { 34 | "version": "1.0.10", 35 | "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", 36 | "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", 37 | "requires": { 38 | "sprintf-js": "~1.0.2" 39 | } 40 | }, 41 | "argv": { 42 | "version": "0.0.2", 43 | "resolved": "https://registry.npmjs.org/argv/-/argv-0.0.2.tgz", 44 | "integrity": "sha1-7L0W+JSbFXGDcRsb2jNPN4QBhas=" 45 | }, 46 | "big.js": { 47 | "version": "5.2.2", 48 | "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", 49 | "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==" 50 | }, 51 | "chalk": { 52 | "version": "1.1.3", 53 | "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", 54 | "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", 55 | "requires": { 56 | "ansi-styles": "^2.2.1", 57 | "escape-string-regexp": "^1.0.2", 58 | "has-ansi": "^2.0.0", 59 | "strip-ansi": "^3.0.0", 60 | "supports-color": "^2.0.0" 61 | } 62 | }, 63 | "clap": { 64 | "version": "1.2.3", 65 | "resolved": "https://registry.npmjs.org/clap/-/clap-1.2.3.tgz", 66 | "integrity": "sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==", 67 | "requires": { 68 | "chalk": "^1.1.3" 69 | } 70 | }, 71 | "coa": { 72 | "version": "1.0.4", 73 | "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz", 74 | "integrity": "sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=", 75 | "requires": { 76 | "q": "^1.1.2" 77 | } 78 | }, 79 | "colors": { 80 | "version": "1.1.2", 81 | "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz", 82 | "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=" 83 | }, 84 | "csso": { 85 | "version": "2.3.2", 86 | "resolved": "https://registry.npmjs.org/csso/-/csso-2.3.2.tgz", 87 | "integrity": "sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=", 88 | "requires": { 89 | "clap": "^1.0.9", 90 | "source-map": "^0.5.3" 91 | } 92 | }, 93 | "emojis-list": { 94 | "version": "2.1.0", 95 | "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", 96 | "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=" 97 | }, 98 | "escape-string-regexp": { 99 | "version": "1.0.5", 100 | "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", 101 | "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" 102 | }, 103 | "esprima": { 104 | "version": "2.7.3", 105 | "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz", 106 | "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=" 107 | }, 108 | "fast-deep-equal": { 109 | "version": "2.0.1", 110 | "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", 111 | "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=" 112 | }, 113 | "fast-json-stable-stringify": { 114 | "version": "2.0.0", 115 | "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz", 116 | "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=" 117 | }, 118 | "has-ansi": { 119 | "version": "2.0.0", 120 | "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", 121 | "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", 122 | "requires": { 123 | "ansi-regex": "^2.0.0" 124 | } 125 | }, 126 | "image-size": { 127 | "version": "0.6.3", 128 | "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.6.3.tgz", 129 | "integrity": "sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA==" 130 | }, 131 | "js-yaml": { 132 | "version": "3.7.0", 133 | "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz", 134 | "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=", 135 | "requires": { 136 | "argparse": "^1.0.7", 137 | "esprima": "^2.6.0" 138 | } 139 | }, 140 | "json-schema-traverse": { 141 | "version": "0.4.1", 142 | "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", 143 | "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==" 144 | }, 145 | "json5": { 146 | "version": "1.0.1", 147 | "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", 148 | "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", 149 | "requires": { 150 | "minimist": "^1.2.0" 151 | } 152 | }, 153 | "loader-utils": { 154 | "version": "1.2.3", 155 | "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz", 156 | "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==", 157 | "requires": { 158 | "big.js": "^5.2.2", 159 | "emojis-list": "^2.0.0", 160 | "json5": "^1.0.1" 161 | } 162 | }, 163 | "minimist": { 164 | "version": "1.2.0", 165 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", 166 | "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" 167 | }, 168 | "mkdirp": { 169 | "version": "0.5.1", 170 | "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", 171 | "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", 172 | "requires": { 173 | "minimist": "0.0.8" 174 | }, 175 | "dependencies": { 176 | "minimist": { 177 | "version": "0.0.8", 178 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", 179 | "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" 180 | } 181 | } 182 | }, 183 | "punycode": { 184 | "version": "2.1.1", 185 | "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", 186 | "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==" 187 | }, 188 | "q": { 189 | "version": "1.5.1", 190 | "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", 191 | "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=" 192 | }, 193 | "sax": { 194 | "version": "1.2.4", 195 | "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", 196 | "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==" 197 | }, 198 | "schema-utils": { 199 | "version": "2.5.0", 200 | "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.5.0.tgz", 201 | "integrity": "sha512-32ISrwW2scPXHUSusP8qMg5dLUawKkyV+/qIEV9JdXKx+rsM6mi8vZY8khg2M69Qom16rtroWXD3Ybtiws38gQ==", 202 | "requires": { 203 | "ajv": "^6.10.2", 204 | "ajv-keywords": "^3.4.1" 205 | } 206 | }, 207 | "source-map": { 208 | "version": "0.5.7", 209 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", 210 | "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" 211 | }, 212 | "sprintf-js": { 213 | "version": "1.0.3", 214 | "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", 215 | "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=" 216 | }, 217 | "sqip": { 218 | "version": "0.3.3", 219 | "resolved": "https://registry.npmjs.org/sqip/-/sqip-0.3.3.tgz", 220 | "integrity": "sha512-2sP0y3S1NPM+PEx85YopfSeby2LsX344LBGL8WN06X5H59ELg7HKZaH2K/A+l4qqTUDQmGeaXVvsmG3bth7dow==", 221 | "requires": { 222 | "argv": "0.0.2", 223 | "image-size": "^0.6.1", 224 | "svgo": "^0.7.2", 225 | "xmldom": "^0.1.27" 226 | } 227 | }, 228 | "strip-ansi": { 229 | "version": "3.0.1", 230 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", 231 | "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", 232 | "requires": { 233 | "ansi-regex": "^2.0.0" 234 | } 235 | }, 236 | "supports-color": { 237 | "version": "2.0.0", 238 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", 239 | "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" 240 | }, 241 | "svgo": { 242 | "version": "0.7.2", 243 | "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz", 244 | "integrity": "sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=", 245 | "requires": { 246 | "coa": "~1.0.1", 247 | "colors": "~1.1.2", 248 | "csso": "~2.3.1", 249 | "js-yaml": "~3.7.0", 250 | "mkdirp": "~0.5.1", 251 | "sax": "~1.2.1", 252 | "whet.extend": "~0.9.9" 253 | } 254 | }, 255 | "uri-js": { 256 | "version": "4.2.2", 257 | "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz", 258 | "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==", 259 | "requires": { 260 | "punycode": "^2.1.0" 261 | } 262 | }, 263 | "whet.extend": { 264 | "version": "0.9.9", 265 | "resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz", 266 | "integrity": "sha1-+HfVv2SMl+WqVC+twW1qJZucEaE=" 267 | }, 268 | "xmldom": { 269 | "version": "0.1.27", 270 | "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.27.tgz", 271 | "integrity": "sha1-1QH5ezvbQDr4757MIFcxh6rawOk=" 272 | } 273 | } 274 | } 275 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sqip-loader", 3 | "version": "1.0.0", 4 | "description": "Loads images and exports tiny SQIP previews as image/svg+xml URL-encoded data", 5 | "main": "lib", 6 | "directories": { 7 | "lib": "lib" 8 | }, 9 | "author": "Emil Tholin @tholle1234", 10 | "license": "MIT", 11 | "repository": "EmilTholin/sqip-loader", 12 | "dependencies": { 13 | "loader-utils": "^1.2.3", 14 | "schema-utils": "^2.5.0", 15 | "sqip": "^0.3.3" 16 | }, 17 | "peerDependencies": { 18 | "file-loader": "*" 19 | } 20 | } 21 | --------------------------------------------------------------------------------