Merge branch 'release/2.1.0'

Author: theGC

.gitignore

@@ -1,3 +1,4 @@
 /node_modules/
 /dist/
 npm-debug.log
+.history

README.md

@@ -124,59 +124,82 @@ 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.
 
-#### Setting `runPreEmit` option
-If you aren't using **loaders** to resolve file locations, and would prefer to reference image paths relative to the **root** of your project (where your `package.json` file resides) then set the plugins `runPreEmit` config option to `true`:
+#### 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).
 
-```javascript
-plugins: [
-    new HtmlWebpackPlugin(),
-    new HtmlWebpackInlineSVGPlugin({
-        runPreEmit: true,
-    })
-]
-```
-
-The plugin will now run prior to **html-webpack-plugin** saving your templates to your output directory. It will also expect all `<img inline` **src** attributes to be relative to your `package.json` file.
-
-Therefore with the above project structure, and `runPreEmit` set to `true`, inlining icons.svg would look like:
+For example:
 
 ```html
-<img inline src="src/images/icons.svg">
-```
-
-## Config
+<img inline src="images/icons.svg" id="myImageIMG" class="square"> <!-- img element to be replaced  -->
 
-#### HtmlWebpackInlineSVGPlugin Options
-
-```javascript
-new HtmlWebpackInlineSVGPlugin({
-    // default: false
-    // described above
-    runPreEmit: {Boolean},
-
-    // default: false
-    // if true will inline all svgs within the parsed html
-    inlineAll: {Boolean},
-})
+<svg id="myImageSVG">...</svg> <!-- icons.svg file to be inlined  -->
 ```
 
-#### SVGO
+will result in:
 
-To configure SVGO (module used to optimise your SVGs), add an `svgoConfig` object to your `html-webpack-plugin` config:
-
-```javascript
-plugins: [
-    new HtmlWebpackPlugin({
-        svgoConfig: {
-            removeTitle: false,
-            removeViewBox: true,
-        },
-    }),
-    new HtmlWebpackInlineSVGPlugin()
-]
+```html
+<svg id="myImageIMG" class="square" id="myImageSVG">...</svg>
 ```
 
-For a full list of the SVGO config (default) params we are using check out: [svgo-config.js](svgo-config.js). The config you set is merged with our defaults, it does not replace it.
+The broswer will use `id=""myImageIMG"` and not `id="myImageSVG"`. It's however a better approach if you avoid having any duplicated attribute at all and only putting the required ones on the `<img>` element.
+
+## Config options
+
+The plugin accepts three options:
+
+- `runPreEmit`: defaults to `false`. If you aren't using **loaders** to resolve file locations, and would prefer to reference image paths relative to the **root** of your project (where your `package.json` file resides) then set the plugins `runPreEmit` config option to `true`:
+
+   ```javascript
+   plugins: [
+       new HtmlWebpackPlugin(),
+       new HtmlWebpackInlineSVGPlugin({
+           runPreEmit: true,
+       })
+   ]
+   ```
+
+   The plugin will now run prior to **html-webpack-plugin** saving your templates to your output directory. It will also expect all `<img inline` **src** attributes to be relative to your `package.json` file.
+
+   Therefore with the above project structure, and `runPreEmit` set to `true`, inlining icons.svg would look like:
+
+   ```html
+   <img inline src="src/images/icons.svg">
+   ```
+
+- `inlineAll`: defaults to `false`. It will inline all SVG images on the template without the need of the `inline` attribute on every image:
+   ```javascript
+   plugins: [
+       new HtmlWebpackPlugin(),
+       new HtmlWebpackInlineSVGPlugin({
+           inlineAll: true
+       })
+   ]
+   ```
+
+   If `inlineAll` option is enabled you can use the `inline-exclude` attribute to exclude a particular image from being inlined:
+
+   ```html
+   <div>
+       <img src="src/images/icon1.svg"> <!-- it will be inlined -->
+       <img inline-exclude src="src/images/icon2.svg"> <!-- it won't be inlined -->
+   </div>
+   ```
+
+- `svgoConfig`: to configure SVGO (module used to optimise your SVGs), add an `svgoConfig` object to your `html-webpack-plugin` config:
+
+   ```javascript
+   plugins: [
+       new HtmlWebpackPlugin({
+           svgoConfig: {
+               removeTitle: false,
+               removeViewBox: true,
+           },
+       }),
+       new HtmlWebpackInlineSVGPlugin()
+   ]
+   ```
+
+   For a full list of the SVGO config (default) params we are using check out: [svgo-config.js](svgo-config.js). The config you set is merged with our defaults, it does not replace it.
 
 ## Features
 

index.js

@@ -18,14 +18,8 @@ class HtmlWebpackInlineSVGPlugin {
 
     constructor (options) {
 
-        if (options) {
-
-            if (options.runPreEmit) this.runPreEmit = true
-
-            if (options.inlineAll) this.inlineAll = true
-
-        }
-
+        this.runPreEmit = _.get(options, 'runPreEmit', false)
+        this.inlineAll = _.get(options, 'inlineAll', false)
         this.userConfig = ''
         this.outputPath = ''
 
@@ -83,8 +77,8 @@ class HtmlWebpackInlineSVGPlugin {
                     })
 
             } else {
-
-                HtmlWebpackPlugin
+                // https://github.com/jantimon/html-webpack-plugin/issues/1091
+                compiler.options.plugins.find((plugin) => plugin.constructor.name === 'HtmlWebpackPlugin').constructor
                     .getHooks(compilation)
                     .beforeEmit
                     .tapAsync('HtmlWebpackInlineSVGPlugin', (htmlPluginData, callback) => {
@@ -412,8 +406,9 @@ class HtmlWebpackInlineSVGPlugin {
      */
     isNodeValidInlineImage (node) {
 
-        return !!(node.nodeName === 'img'
-            && (this.inlineAll
+        return !!(
+            node.nodeName === 'img'
+            && ((this.inlineAll && _.filter(node.attrs, { name: 'inline-exclude' }).length === 0)
                 || _.filter(node.attrs, { name: 'inline' }).length)
             && this.getImagesSrc(node))
 
@@ -525,7 +520,7 @@ class HtmlWebpackInlineSVGPlugin {
             return name !== 'inline'
                 && name !== 'src'
                 ? acc + `${name}="${value}" `
-                : ''
+                : acc
 
         }, '')