Merge pull request #29 from davidpelayo/master

Ability to load image resources from an URL

Author: AntonioRedondo

CHANGELOG.md

@@ -1,3 +1,7 @@
+## v2.2.0
+
+* _Ability added to load SVGs from an URL (`<img inline src="https://host.com/image.svg">`)._
+
 ## v2.0.1
 
 * added `inlineAll` option to inline all svgs the parser finds

README.md

@@ -124,6 +124,9 @@ If an alias was in place for the images directory, i.e.
 ```
 Then the svg can be inlined with: `<img inline src="~img/icons.svg">`. This method would require the use of **loaders** on your templates as shown above in point 2.
 
+#### Incorrect file paths or URLs
+If for any reason the path to a local SVG file is incorrect, or the file fails to be read, or an image retrieved with an URL fails to download, the webpack build process will fail with an error, like `ENOENT`.
+
 #### Duplicated attributes
 All the attributes of a `<img/>` element excepting `src` and `inline` will be copied to the inlined `<svg/>` element. Attributes like `id` or `class` will be copied to the resulting root of the `<svg/>` element and if the original SVG file already had these attributes they will be duplicated (and not replaced) on the resulting `<svg/>` element, though the attributes coming from the `<img/>` will appear first and [any subsequent duplicated attribute from the original SVG will be ignored by the browser](https://stackoverflow.com/questions/26341507/can-an-html-element-have-the-same-attribute-twice).
 
@@ -185,7 +188,15 @@ The plugin accepts three options:
    </div>
    ```
 
-- `svgoConfig`: to configure SVGO (module used to optimise your SVGs), add an `svgoConfig` object to your `html-webpack-plugin` config:
+- `allowFromUrl`: defaults to `false`. It allows to use SVG images coming from an URL online in addition to local files. For example:
+
+    ```html
+   <div>
+       <img inline src="https://badge.fury.io/js/html-webpack-inline-svg-plugin.svg"> <!-- it will be inlined from the online SVG -->
+   </div>
+   ```
+
+- `svgoConfig`: defaults to `undefinded`. to configure SVGO (module used to optimise your SVGs), add an `svgoConfig` object to your `html-webpack-plugin` config:
 
    ```javascript
    plugins: [

index.js

@@ -8,6 +8,7 @@ const fs = require('fs')
 const SVGO = require('svgo')
 const svgoDefaultConfig = require(path.resolve(__dirname, 'svgo-config.js'))
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const axios = require('axios')
 
 
 /**
@@ -20,6 +21,7 @@ class HtmlWebpackInlineSVGPlugin {
 
         this.runPreEmit = _.get(options, 'runPreEmit', false)
         this.inlineAll = _.get(options, 'inlineAll', false)
+        this.allowFromUrl = _.get(options, 'allowFromUrl', false)
         this.userConfig = ''
         this.outputPath = ''
 
@@ -412,7 +414,6 @@ class HtmlWebpackInlineSVGPlugin {
                 || _.filter(node.attrs, { name: 'inline' }).length)
             && this.getImagesSrc(node))
 
-
     }
 
 
@@ -426,7 +427,6 @@ class HtmlWebpackInlineSVGPlugin {
 
         const svgSrcObject = _.find(inlineImage.attrs, { name: 'src' })
 
-
         // image does not have a src attribute
 
         if (!svgSrcObject) return ''
@@ -443,58 +443,85 @@ class HtmlWebpackInlineSVGPlugin {
 
     }
 
-
     /**
      * append the inlineImages SVG data to the output HTML and remove the original img
-     * @param {string} html
-     * @param {Object} inlineImage - parse5 document
+     * @param {Object{}} html
+     * @param {Object{}} inlineImage - parse5 document
+     * @param {Object{}} data - SVG data
+     * @param {Object{}} resolve - Consumer's Promise resolve hook
      * @returns {Promise}
      *
      */
-    processOutputHtml (html, inlineImage) {
+    optimizeSvg ({ html, inlineImage, data, resolve }) {
+        const configObj = Object.assign(svgoDefaultConfig, this.userConfig)
 
-        return new Promise((resolve, reject) => {
+        const config = {}
 
-            const svgSrc = this.getImagesSrc(inlineImage)
 
+        // pass all objects to the config.plugins array
 
-            // if the image isn't valid resolve
+        config.plugins = _.map(configObj, (value, key) => ({ [key]: value }));
 
-            if (!svgSrc) return resolve(html)
 
+        // create a new instance of SVGO
+        // passing it the merged config, to optimize the svg
 
-            // read in the svg
-
-            fs.readFile(path.resolve(this.outputPath, svgSrc), 'utf8', (err, data) => {
+        const svgo = new SVGO(config)
 
-                if (err) reject(err)
+        svgo.optimize(data)
+            .then((result) => {
 
-                const configObj = Object.assign(svgoDefaultConfig, this.userConfig)
+                const optimisedSVG = result.data
 
-                const config = {}
+                html = this.replaceImageWithSVG(html, inlineImage, optimisedSVG)
 
+                resolve(html)
 
-                // pass all objects to the config.plugins array
+            })
+            .catch((err) => console.log(chalk.red(err)))
+    }
 
-                config.plugins = _.map(configObj, (value, key) => ({ [key]: value }));
 
+    /**
+     * append the inlineImages SVG data to the output HTML and remove the original img by
+     * loading the SVG data from the filesystem or from an URL
+     * @param {string} html
+     * @param {Object} inlineImage - parse5 document
+     * @returns {Promise}
+     *
+     */
+    processOutputHtml (html, inlineImage) {
 
-                // create a new instance of SVGO
-                // passing it the merged config, to optimize the svg
+        return new Promise((resolve, reject) => {
 
-                const svgo = new SVGO(config)
+            const svgSrc = this.getImagesSrc(inlineImage)
 
-                svgo.optimize(data)
-                    .then((result) => {
 
-                        const optimisedSVG = result.data
+            // if the image isn't valid resolve
+            if (!svgSrc) return resolve(html)
 
-                        html = this.replaceImageWithSVG(html, inlineImage, optimisedSVG)
+            // read in the svg
+            fs.readFile(path.resolve(this.outputPath, svgSrc), 'utf8', (err, data) => {
+                if (!err) {
+                    this.optimizeSvg({ html, inlineImage, data, resolve })
+                    return
+                }
 
-                        resolve(html)
+                // loading from the filesystem failed
+                if (!this.allowFromUrl) {
+                    reject(err)
+                    return
+                }
 
+                axios.get(svgSrc)
+                    .then(({ data, status }) => {
+                        if (status !== 200) {
+                            throw new Error(`Error when retrieving image from URL: ${status} status`)
+                        }
+                        this.optimizeSvg({ html, inlineImage, svgSrc, data, resolve })
                     })
-                    .catch((err) => console.log(chalk.red(err)))
+                    .catch((err) => reject(err))
+
 
             })
 
@@ -504,7 +531,7 @@ class HtmlWebpackInlineSVGPlugin {
 
 
     /**
-     * replace the img with the optimised SVG
+     * replace the img with the optimized SVG
      * @param {string} html
      * @param {Object} inlineImage - parse5 document
      * @param {Object} svg

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "html-webpack-inline-svg-plugin",
-    "version": "2.1.1",
+    "version": "2.2.0",
     "description": "Embed svg inline when using the html webpack plugin",
     "main": "index.js",
     "files": [
@@ -30,6 +30,7 @@
     },
     "homepage": "https://github.com/thegc/html-webpack-inline-svg-plugin",
     "devDependencies": {
+        "axios-mock-adapter": "^1.18.1",
         "file-loader": "^6.0.0",
         "html-loader": "^1.1.0",
         "html-webpack-plugin": "^4.3.0",
@@ -38,7 +39,8 @@
         "webpack": "^4.43.0"
     },
     "dependencies": {
-        "chalk": "^4.0.0",
+        "axios": "^0.19.2",
+        "chalk": "^4.1.0",
         "cheerio": "^1.0.0-rc.3",
         "lodash": "^4.17.15",
         "parse5": "^6.0.0",

package.json

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <title>Allow From URL SVG Tests index</title>
+  <style>
+    .icon {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      stroke-width: 0;
+      stroke: currentColor;
+      fill: currentColor;
+    }
+
+  </style>
+
+</head>
+
+<body>
+
+  <div>
+    <p>should not touch this: <img width="20px" height="auto" class="leave-me" src="~img/face.svg"></p>
+    <p>
+      <span>if below SVG is inlined correctly we can reference its content:</span>
+      <svg class="icon mood-good">
+        <use xlink:href="#icon-mood-good"></use>
+      </svg>
+      <img id="find-and-replace-me" src="images/face.svg">
+    </p>
+  </div>
+
+  <img id="replace-me" inline src="https://badge.fury.io/js/html-webpack-inline-svg-plugin.svg" />
+
+  <!-- These three images, if uncommented, will make fail the webpack build process, as expected -->
+
+  <!-- <img id="not-found" inline src="https://notFound/typoInExtension/html-webpack-inline-svg-plugin-typoInNaming.svg" />
+
+  <img id="error-loading" inline src="https://errorLoading/someIconWhichDoesNotExist.svg" />
+
+  <img id="timeout-loading" inline src="https://timeoutLoading/someIconWhichDoesNotExist-timeout.svg" /> -->
+
+  <img id="replace-me-too" inline src="https://badge.fury.io/js/html-webpack-inline-svg-plugin.svg" />
+
+  <img id="not-an-svg" inline src="images/not-an-svg.png" />
+
+  <div id="do-not-decode"><?= $foo->bar; ?></div>
+
+</body>
+
+</html>
+
+</body>
+
+</html>