init

Author: danielstgt

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+*.log
+package-lock.json
+yarn.lock

index.js

@@ -0,0 +1,92 @@
+let mix = require('laravel-mix');
+
+class SvgVue {
+
+    name() {
+        return 'svgVue';
+    }
+
+    dependencies() {
+        return ['img-loader', 'imagemin-svgo', 'raw-loader', 'fs', 'svg-vue'];
+    }
+
+    register(options) {
+        this.options = Object.assign({
+            extract: false,
+            path: './resources/svg/',
+            svgoSettings: [
+                { removeTitle: true },
+                { removeViewBox: false },
+                { removeDimensions: true }
+            ]
+        }, options);
+    }
+
+    boot() {
+        Mix.listen('configReady', config => {
+            let search = [
+                /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/.toString(),
+                /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/.toString()
+            ];
+
+            config.module.rules.map(r => {
+                if (search.includes(r.test.toString())) r.exclude = /\.svg$/;
+            });
+        });
+    }
+
+    webpackRules() {
+        return {
+            test: /\.svg$/,
+            loaders: [
+                {
+                    loader: 'raw-loader'
+                },
+
+                {
+                    loader: 'img-loader',
+                    options: {
+                        plugins: [
+                            require('imagemin-svgo')({ plugins: this.options.svgoSettings })
+                        ]
+                    }
+                }
+            ]
+        }
+    }
+
+    webpackConfig(webpackConfig) {
+        let fs = require('fs');
+        let svgPath = path.resolve(__dirname, process.cwd() + '/' + this.options.path);
+
+        fs.mkdir(svgPath, error => {
+            if (error && error.code === 'EEXIST') return null;
+        });
+
+        webpackConfig.resolve.alias['svg-files-path'] = svgPath;
+
+        if (this.options.extract) {
+            let svgAssetsObj = {
+                test: svgPath,
+                name: '/js/svg',
+                chunks: 'all',
+                enforce: true
+            }
+
+            if (webpackConfig.optimization.hasOwnProperty('splitChunks')) {
+                webpackConfig.optimization.splitChunks.cacheGroups['svgAssets'] = svgAssetsObj;
+            } else {
+                webpackConfig.optimization = {
+                    splitChunks: {
+                        cacheGroups: {
+                            svgAssets: svgAssetsObj
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}
+
+mix.extend('svgVue', new SvgVue());

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "laravel-mix-svg-vue",
+  "version": "0.1.0",
+  "description": "A Laravel Mix extension to inline SVG files with Vue.js and automatically optimize them with SVGO",
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "package.json"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/danielstgt/laravel-mix-svg-vue.git"
+  },
+  "keywords": [
+    "laravel mix",
+    "svg",
+    "vue",
+    "svgo"
+  ],
+  "author": "Daniel Hartmann",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/danielstgt/laravel-mix-svg-vue/issues"
+  },
+  "homepage": "https://github.com/danielstgt/laravel-mix-svg-vue",
+  "peerDependencies": {
+    "laravel-mix": "^4.0.15"
+  },
+  "dependencies": {
+    "fs": "0.0.1-security",
+    "imagemin-svgo": "^7.0.0",
+    "img-loader": "^3.0.1",
+    "raw-loader": "^2.0.0",
+    "svg-vue": "^0.1.1"
+  }
+}