feat: replaced vue-svg-loader with svg-to-vue-component (#19)

wagerfield · TheAlexLichter · commit 606110939246 · 2019-01-09T15:19:33.000Z
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -6,5 +6,10 @@ module.exports = {
   },
   extends: [
     '@nuxtjs'
-  ]
+  ],
+  rules: {
+    'vue/attribute-hyphenation': ['error', 'always', {
+      ignore: ['viewBox']
+    }]
+  }
 }
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@
 ## Features
 
 * Full support of SVGs as components. Import them like your Vue SFCs
-* Built on top of [vue-svg-loader](https://github.com/visualfanatic/vue-svg-loader)
+* Built on top of [svg-to-vue-component](https://github.com/egoist/svg-to-vue-component)
 * Nuxt 2 (and only Nuxt 2) support
 * Fully tested!
 
diff --git a/lib/module.js b/lib/module.js
@@ -6,19 +6,34 @@ export default function nuxtSvgLoader() {
 }
 
 const setupVueSvgLoader = options => (config) => {
-  const imageLoaderRule = config.module.rules.find(rule => rule.test && /svg/.test(rule.test.toString()))
+  // https://github.com/egoist/svg-to-vue-component#nuxtjs-2
+  const svgRulePredicate = rule => rule.test && rule.test.test('.svg')
+  const imageLoaderRule = config.module.rules.find(svgRulePredicate)
 
   if (!imageLoaderRule) {
     logger.error('Could not modify image loader rule!')
     return
   }
+
+  // Don't process .svg files in default image rule
   // from https://github.com/nuxt/nuxt.js/blob/76b10d2d3f4e5352f1c9d14c52008f234e66d7d5/lib/builder/webpack/base.js#L203
   imageLoaderRule.test = /\.(png|jpe?g|gif|webp)$/
 
+  // Override svg-to-vue-component default options for prefixing ids
+  const svgoConfig = Object.assign({}, {
+    plugins: [{ prefixIds: false }]
+  }, options && options.svgo)
+
+  // Add a new rule for .svg file
   config.module.rules.push({
     test: /\.svg$/,
-    loader: 'vue-svg-loader',
-    options
+    use: [
+      'vue-loader',
+      {
+        loader: 'svg-to-vue-component/loader',
+        options: { svgoConfig }
+      }
+    ]
   })
 }
 
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "consola": "^1.4.5",
-    "vue-svg-loader": "^0.11.0"
+    "svg-to-vue-component": "^0.2.6"
   },
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
diff --git a/test/__snapshots__/module.test.js.snap b/test/__snapshots__/module.test.js.snap
@@ -13,7 +13,7 @@ exports[`ssr correctly register SVG loader and load SVG correctly 1`] = `
 }</style>
   </head>
   <body data-n-head=\\"\\">
-    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1000 1000\\"><style></style><g id=\\"nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/index.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
+    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><svg viewBox=\\"1 2 3 4\\" width=\\"100\\"><g id=\\"nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/index.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
   </body>
 </html>
 "
@@ -32,7 +32,7 @@ exports[`ssr honor custom build.extend function 1`] = `
 }</style>
   </head>
   <body data-n-head=\\"\\">
-    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1000 1000\\"><style></style><g id=\\"nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/index.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
+    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><svg viewBox=\\"1 2 3 4\\" width=\\"100\\"><g id=\\"nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/index.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
   </body>
 </html>
 "
@@ -51,7 +51,7 @@ exports[`ssr honor custom loader options 1`] = `
 }</style>
   </head>
   <body data-n-head=\\"\\">
-    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1000 1000\\"><style></style><g id=\\"Nuxt_svg__nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/index.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
+    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><svg viewBox=\\"1 2 3 4\\" width=\\"100\\"><g id=\\"Nuxt_svg__nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/index.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
   </body>
 </html>
 "
diff --git a/test/fixture/pages/index.vue b/test/fixture/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <nuxt-logo/>
+  <nuxt-logo viewBox="1 2 3 4" width="100" />
 </template>
 
 <script>
diff --git a/yarn.lock b/yarn.lock
