Let vue-loader compile the SVGs

Author: visualfanatic

README.md

@@ -8,9 +8,9 @@
 
 ## Installation
 ``` bash
-npm i -D vue-svg-loader vue-template-compiler
+npm i -D vue-svg-loader
 
-yarn add --dev vue-svg-loader vue-template-compiler
+yarn add --dev vue-svg-loader
 ```
 
 ## Basic configuration
@@ -22,7 +22,7 @@ module.exports = {
       {
         test: /\.svg$/,
         use: [
-          'babel-loader',
+          'vue-loader',
           'vue-svg-loader',
         ],
       },
@@ -39,8 +39,8 @@ module.exports = {
     svgRule.uses.clear();
 
     svgRule
-      .use('babel-loader')
-      .loader('babel-loader')
+      .use('vue-loader')
+      .loader('vue-loader')
       .end()
       .use('vue-svg-loader')
       .loader('vue-svg-loader');
@@ -60,7 +60,7 @@ module.exports = {
       config.module.rules.push({
         test: /\.svg$/,
         use: [
-          'babel-loader',
+          'vue-loader',
           'vue-svg-loader',
         ],
       });

docs/README.md

@@ -49,7 +49,7 @@ module.exports = {
     rules: [
       {
         test: /\.svg$/,
-        use: ['babel-loader', 'vue-svg-loader'],
+        use: ['vue-loader', 'vue-svg-loader'],
       },
     ],
   },
@@ -69,8 +69,8 @@ module.exports = {
     svgRule.uses.clear();
 
     svgRule
-      .use('babel-loader')
-      .loader('babel-loader')
+      .use('vue-loader')
+      .loader('vue-loader')
       .end()
       .use('vue-svg-loader')
       .loader('vue-svg-loader');
@@ -93,7 +93,7 @@ module.exports = {
 
       config.module.rules.push({
         test: /\.svg$/,
-        use: ['babel-loader', 'vue-svg-loader'],
+        use: ['vue-loader', 'vue-svg-loader'],
       });
     },
   },

docs/faq.md

@@ -19,7 +19,7 @@ module.exports = {
           {
             resourceQuery: /inline/,
             use: [
-              'babel-loader',
+              'vue-loader',
               'vue-svg-loader',
             ],
           },
@@ -49,8 +49,8 @@ module.exports = {
     svgRule
       .oneOf('inline')
       .resourceQuery(/inline/)
-      .use('babel-loader')
-      .loader('babel-loader')
+      .use('vue-loader')
+      .loader('vue-loader')
       .end()
       .use('vue-svg-loader')
       .loader('vue-svg-loader')
@@ -83,7 +83,7 @@ module.exports = {
           {
             resourceQuery: /inline/,
             use: [
-              'babel-loader',
+              'vue-loader',
               'vue-svg-loader',
             ],
           },
@@ -147,7 +147,7 @@ module.exports = {
       {
         test: /\.svg$/,
         use: [
-          'babel-loader',
+          'vue-loader',
           {
             loader: 'vue-svg-loader',
             options: {
@@ -176,8 +176,8 @@ module.exports = {
     svgRule.uses.clear();
 
     svgRule
-      .use('babel-loader')
-      .loader('babel-loader')
+      .use('vue-loader')
+      .loader('vue-loader')
       .end()
       .use('vue-svg-loader')
       .loader('vue-svg-loader')
@@ -206,7 +206,7 @@ module.exports = {
       config.module.rules.push({
         test: /\.svg$/,
         use: [
-          'babel-loader',
+          'vue-loader',
           {
             loader: 'vue-svg-loader',
             options: {
@@ -242,7 +242,7 @@ module.exports = {
       {
         test: /\.svg$/,
         use: [
-          'babel-loader',
+          'vue-loader',
           {
             loader: 'vue-svg-loader',
             options: {
@@ -278,8 +278,8 @@ module.exports = {
     svgRule.uses.clear();
 
     svgRule
-      .use('babel-loader')
-      .loader('babel-loader')
+      .use('vue-loader')
+      .loader('vue-loader')
       .end()
       .use('vue-svg-loader')
       .loader('vue-svg-loader')
@@ -315,7 +315,7 @@ module.exports = {
       config.module.rules.push({
         test: /\.svg$/,
         use: [
-          'babel-loader',
+          'vue-loader',
           {
             loader: 'vue-svg-loader',
             options: {

index.js

@@ -1,14 +1,22 @@
-const svgToVue = require('svg-to-vue');
+const SVGO = require('svgo');
 const { getOptions } = require('loader-utils');
 
-module.exports = function (content) {
+module.exports = async function (svg) {
   const callback = this.async();
-  const { svgo } = getOptions(this) || {};
-
-  svgToVue(content, {
-    svgoPath: this.resourcePath,
-    svgoConfig: svgo,
-  })
-    .then(component => callback(null, component))
-    .catch(callback);
+  const { svgo: svgoConfig } = getOptions(this) || {};
+
+  if (svgoConfig !== false) {
+    const svgo = new SVGO(svgoConfig);
+
+    try {
+      ({ data: svg } = await svgo.optimize(svg, {
+        path: this.resourcePath,
+      }));
+    } catch (error) {
+      callback(error);
+      return;
+    }
+  }
+
+  callback(null, `<template>${svg.replace('<svg', '<svg v-on="$listeners"')}</template>`)
 };

package.json

@@ -20,14 +20,10 @@
   "author": "Damian Stasik <[email protected]>",
   "main": "index.js",
   "dependencies": {
-    "loader-utils": "^2.0.0",
-    "svg-to-vue": "^0.7.0"
+    "loader-utils": "^2.0.0"
   },
   "devDependencies": {
     "vue-tabs-component": "^1.5.0",
-    "vuepress": "^1.2.0"
-  },
-  "peerDependencies": {
-    "vue-template-compiler": "^2.0.0"
+    "vuepress": "^1.5.3"
   }
 }