nuxt-svg-loader - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

CHANGELOG.md

@@ -5,3 +5,13 @@ # Change Log
 
+<a name="0.1.0"></a>
+# [0.1.0](https://github.com/Developmint/nuxt-svg-loader/compare/v0.0.1...v0.1.0) (2018-11-05)
+
+
+### Features
+
+* pass custom loader options if needed ([071edce](https://github.com/Developmint/nuxt-svg-loader/commit/071edce))
+
+
+
 <a name="0.0.1"></a>
 ## 0.0.1 (2018-10-14)

lib/module.js

 const logger = require('consola').withScope('nuxt-svg-loader')
 
 export default function nuxtSvgLoader() {
-  const oldExtendFunction = this.options.build.extend
-
-  this.options.build.extend = (...args) => {
-    setupVueSvgLoader(...args)
-    if (oldExtendFunction) {
-      oldExtendFunction(...args)
-    }
-  }
+  const { svgLoader: options } = this.options
+  this.extendBuild(setupVueSvgLoader(options))
 }
 
-const setupVueSvgLoader = (config) => {
+const setupVueSvgLoader = options => (config) => {
   const imageLoaderRule = config.module.rules.find(rule => rule.test && /svg/.test(rule.test.toString()))
@@ -26,3 +20,4 @@
     test: /\.svg$/,
-    loader: 'vue-svg-loader'
+    loader: 'vue-svg-loader',
+    options
   })
@@ -29,0 +24,0 @@ }

package.json

 {
   "name": "nuxt-svg-loader",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "",
@@ -62,12 +62,12 @@ "license": "MIT",
   "devDependencies": {
-    "@commitlint/cli": "^6.1.3",
-    "@commitlint/config-conventional": "^6.1.3",
+    "@commitlint/cli": "^7.2.1",
+    "@commitlint/config-conventional": "^7.1.2",
     "@nuxtjs/eslint-config": "^0.0.1",
     "babel-eslint": "^10.0.1",
     "codecov": "^3.1.0",
-    "eslint": "^5.7.0",
+    "eslint": "^5.8.0",
     "eslint-config-standard": "^12.0.0",
     "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jest": "^21.24.1",
-    "eslint-plugin-node": "^7.0.1",
+    "eslint-plugin-jest": "^21.26.2",
+    "eslint-plugin-node": "^8.0.0",
     "eslint-plugin-promise": "^4.0.1",
@@ -77,6 +77,6 @@ "eslint-plugin-standard": "^4.0.0",
     "get-port": "^4.0.0",
-    "husky": "^1.0.0-rc.1",
+    "husky": "^1.1.2",
     "jest": "^23.6.0",
-    "jsdom": "^12.2.0",
-    "nuxt": "^2.2.0",
+    "jsdom": "^13.0.0",
+    "nuxt-edge": "^2.3.0-25680860",
     "standard-version": "^4.4.0"
@@ -83,0 +83,0 @@ },

README.md

 # Nuxt SVG Loader - SVGs as components, also on the server side!
 [![npm (scoped with tag)](https://img.shields.io/npm/v/nuxt-svg-loader/latest.svg?style=flat-square)](https://npmjs.com/package/nuxt-svg-loader)
 [![npm](https://img.shields.io/npm/dt/nuxt-svg-loader.svg?style=flat-square)](https://npmjs.com/package/nuxt-svg-loader)
-[![Build Status](https://travis-ci.org/Developmint/nuxt-svg-loader.svg?branch=master)](https://travis-ci.org/Developmint/nuxt-svg-loader)
+[![Build Status](https://travis-ci.com/Developmint/nuxt-svg-loader.svg?branch=master)](https://travis-ci.com/Developmint/nuxt-svg-loader)
 [![codecov](https://codecov.io/gh/Developmint/nuxt-svg-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/Developmint/nuxt-svg-loader)
 [![Dependencies](https://david-dm.org/Developmint/nuxt-svg-loader/status.svg?style=flat-square)](https://david-dm.org/Developmint/nuxt-svg-loader)
 [![js-standard-style](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com)
+ [![thanks](https://img.shields.io/badge/thanks-%E2%99%A5-ff69b4.svg)](https://thanks.lichter.io/)
 
@@ -26,3 +27,3 @@ >
 
-- Add `nuxt-svg-loader` dependency using yarn or npm to your project
+- Add `nuxt-svg-loader` as a dependency using yarn or npm to your project
 - Add `nuxt-svg-loader` to `modules` section of `nuxt.config.js`
@@ -38,4 +39,60 @@
 
+- Now you can use your svg files like regular Vue components
+```
+<template>
+  <nav>
+    <a href="https://github.com/vuejs/vue">
+      <VueLogo />
+      Vue
+    </a>
+    <a href="https://github.com/svg/svgo">
+      <SVGOLogo />
+      SVGO
+    </a>
+    <a href="https://github.com/webpack/webpack">
+      <WebpackLogo />
+      webpack
+    </a>
+  </nav>
+</template>
+<script>
+import VueLogo from '@/assets/svg/vue.svg';
+import SVGOLogo from '@/assets/svg/svgo.svg';
+import WebpackLogo from '@/assets/svg/webpack.svg';
+
+export default {
+  name: 'Example',
+  components: {
+    VueLogo,
+    SVGOLogo,
+    WebpackLogo,
+  },
+};
+</script>
+```
+
 - No more options are needed. It'll simply work
 
+## Configuration
+
+The plugin will work seamlessly out of the box. If you are in need of
+configuring the loader options (eg for [id prefixing](https://vue-svg-loader.js.org/faq.html#how-to-use-both-inline-and-external-svgs)),
+you can do that:
+
+```js
+// file: nuxt.config.js
+
+export default {
+  // ...
+  // Your loader options as svgLoader object
+  svgLoader: {
+    svgo: {
+      plugins: [
+        { prefixIds: true },
+      ]
+    }
+  }
+}
+```
+
 ## Development
@@ -42,0 +99,0 @@

No alert changes

Improved metrics

Total package byte prevSize

7399

22.38%

Number of lines in readme file

107

114%

Worsened metrics

Lines of code

20

-16.67%

No dependency changes