nuxt-svg-loader - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

CHANGELOG.md

@@ -5,2 +5,17 @@ # Change Log
 
+<a name="1.1.0"></a>
+# [1.1.0](https://github.com/Developmint/nuxt-svg-loader/compare/v1.0.1...v1.1.0) (2020-01-22)
+
+
+### Bug Fixes
+
+* use image name function when using inline query ([c90a8ed](https://github.com/Developmint/nuxt-svg-loader/commit/c90a8ed))
+
+
+### Features
+
+* proper loading svg used as background url ([#50](https://github.com/Developmint/nuxt-svg-loader/issues/50)) ([9df6300](https://github.com/Developmint/nuxt-svg-loader/commit/9df6300))
+
+
+
 <a name="1.0.1"></a>
@@ -7,0 +22,0 @@ ## [1.0.1](https://github.com/Developmint/nuxt-svg-loader/compare/v1.0.0...v1.0.1) (2019-01-11)

lib/module.js

@@ -10,3 +10,5 @@ const logger = require('consola').withScope('nuxt-svg-loader')
 
-  this.extendBuild(setupVueSvgLoader(options))
+  const fileName = this.nuxt.options.build.filenames.img(this.nuxt.options.dev)
+
+  this.extendBuild(setupVueSvgLoader(options, fileName))
 }
@@ -16,3 +18,3 @@
 
-const setupVueSvgLoader = options => (config) => {
+const setupVueSvgLoader = (options, fileName) => (config) => {
   // https://github.com/egoist/svg-to-vue-component#nuxtjs-2
@@ -28,3 +30,3 @@ const imageLoaderRule = config.module.rules.find(svgRulePredicate)
   // from https://github.com/nuxt/nuxt.js/blob/76b10d2d3f4e5352f1c9d14c52008f234e66d7d5/lib/builder/webpack/base.js#L203
-  imageLoaderRule.test = /\.(png|jpe?g|gif|webp)$/
+  imageLoaderRule.test = new RegExp(imageLoaderRule.test.toString().replace('svg', '').replace('||', '|'))
 
@@ -34,7 +36,18 @@ // Add a new rule for .svg file
     test: /\.svg$/,
-    use: [
-      'vue-loader',
+    oneOf: [
       {
-        loader: 'svg-to-vue-component/loader',
-        options
+        resourceQuery: /inline/,
+        loader: 'file-loader',
+        query: {
+          name: fileName
+        }
+      },
+      {
+        use: [
+          'vue-loader',
+          {
+            loader: 'svg-to-vue-component/loader',
+            options
+          }
+        ]
       }
@@ -41,0 +54,0 @@ ]

package.json

 {
   "name": "nuxt-svg-loader",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -40,2 +40,3 @@ # Nuxt SVG Loader - SVGs as components, also on the server side!
 - 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
 ```
@@ -56,2 +57,10 @@ <template>
     </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>
@@ -73,2 +82,7 @@ </template>
 </script>
+<style>
+.with-background-svg {
+  background: url('@/assets/svg/vue.svg?inline')
+}
+</style>
 ```
@@ -120,2 +134,23 @@
 
+## How to fix Eslint auto lint error
+If you turn on Eslint on save by server, you should exclude `.svg` files of `eslint-loader`.
+
+Example:
+```js
+// nuxt.config.js
+build: {
+    extend(config, ctx) {
+    // Run ESLint on save
+    if (ctx.isDev && ctx.isClient) {
+      config.module.rules.push({
+        enforce: 'pre',
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        exclude: /(node_modules)|(\.svg$)/ /* <--- here */
+      })
+    }
+  }
+}
+```
+
 ## Development
@@ -122,0 +157,0 @@

No alert changes

Improved metrics

Total package byte prevSize

10954

18.43%

Lines of code

44

37.5%

Number of lines in readme file

163

27.34%

No dependency changes