feat: proper loading svg used as background url (#50)

3b3ziz · TheAlexLichter · commit 9df630024f20 · 2020-01-22T15:44:12.000+01:00
diff --git a/README.md b/README.md
@@ -37,6 +37,7 @@ A live demo is available through the [CodeSandBox](https://codesandbox.io/s/gith
 ```
 
 - Now you can use your svg files like regular Vue components
+- You can use inline svg as well by adding `?inline` at the end of the file path
 ```
 <template>
   <nav>
@@ -52,6 +53,14 @@ A live demo is available through the [CodeSandBox](https://codesandbox.io/s/gith
       <WebpackLogo />
       webpack
     </a>
+    <!-- Inline svg -->
+    <a class="with-background-svg" href="https://github.com/webpack/webpack">
+      webpack
+    </a>
+    <a href="https://github.com/webpack/webpack">
+      <img src="../components/NuxtTwo.svg?inline">
+      webpack>
+    </a>
   </nav>
 </template>
 <script>
@@ -68,6 +77,11 @@ export default {
   }
 };
 </script>
+<style>
+.with-background-svg {
+  background: url('@/assets/svg/vue.svg?inline')
+}
+</style>
 ```
 
 - No more options are needed. It'll simply work
diff --git a/lib/module.js b/lib/module.js
@@ -28,11 +28,22 @@ const setupVueSvgLoader = options => (config) => {
   // Add a new rule for .svg file
   config.module.rules.push({
     test: /\.svg$/,
-    use: [
-      'vue-loader',
+    oneOf: [
       {
-        loader: 'svg-to-vue-component/loader',
-        options
+        resourceQuery: /inline/,
+        loader: 'file-loader',
+        query: {
+          name: '[name].[ext]'
+        }
+      },
+      {
+        use: [
+          'vue-loader',
+          {
+            loader: 'svg-to-vue-component/loader',
+            options
+          }
+        ]
       }
     ]
   })
diff --git a/test/__snapshots__/module.test.js.snap b/test/__snapshots__/module.test.js.snap
@@ -1,13 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ssr correctly load SVG as background image 1`] = `
+"<!doctype html>
+<html data-n-head-ssr data-n-head=\\"\\">
+  <head data-n-head=\\"\\">
+    <title data-n-head=\\"true\\"></title><style data-vue-ssr-id=\\"17cfdfa9:0\\">.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}</style><style data-vue-ssr-id=\\"7bcfa2f0:0\\">h1{background:url(/_nuxt/NuxtTwo.svg)}</style>
+  </head>
+  <body data-n-head=\\"\\">
+    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><div><h1>-</h1> <h2>-</h2></div></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/background-image.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
+  </body>
+</html>
+"
+`;
+
 exports[`ssr correctly load two lazy-loaded SVGs 1`] = `
 "<!doctype html>
 <html data-n-head-ssr data-n-head=\\"\\">
   <head data-n-head=\\"\\">
     <title data-n-head=\\"true\\"></title><style data-vue-ssr-id=\\"17cfdfa9:0\\">.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}</style>
   </head>
   <body data-n-head=\\"\\">
-    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><div><svg xmlns=\\"http://www.w3.org/2000/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> <svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1000 1000\\"><g id=\\"NuxtTwo_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></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/two.js\\" defer></script><script src=\\"/_nuxt/6.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\\"><div><svg xmlns=\\"http://www.w3.org/2000/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> <svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1000 1000\\"><g id=\\"NuxtTwo_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></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/two.js\\" defer></script><script src=\\"/_nuxt/7.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/modules/main.css b/test/fixture/modules/main.css
@@ -0,0 +1,3 @@
+h2 {
+  background: url('../components/NuxtTwo.svg?inline')
+}
diff --git a/test/fixture/pages/background-image.vue b/test/fixture/pages/background-image.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h1>-</h1>
+    <h2>-</h2>
+  </div>
+</template>
+
+<script>
+import '../modules/main.css'
+export default {
+  loading: false,
+}
+</script>
+
+<style>
+h1 {
+  background: url('../components/NuxtTwo.svg?inline')
+}
+</style>
+
diff --git a/test/module.test.js b/test/module.test.js
@@ -45,6 +45,12 @@ describe('ssr', () => {
     expect(html).toMatchSnapshot()
   })
 
+  test('correctly load SVG as background image', async () => {
+    const nuxt = await setupNuxt(require('./fixture/configs/default'))
+    const { html } = await nuxt.renderRoute('/background-image')
+    expect(html).toMatchSnapshot()
+  })
+
   afterEach(async () => {
     if (nuxt) {
       await nuxt.close()

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+h2 {`
	`2`	`+ background: url('../components/NuxtTwo.svg?inline')`
	`3`	`+}`