vue-inline-svg - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

CHANGELOG.md

@@ -0,1 +1,4 @@
+## 1.2.0 - 2019-11-26
+- Add: `transformSource` prop [#9](https://github.com/shrpne/vue-inline-svg/pull/9)
+
 ## 1.1.3 - 2019-09-06
@@ -2,0 +5,0 @@ - Fixed: don't fail on invalid SVG file parse

dist/vue-inline-svg.js

@@ -5,3 +5,3 @@ (function (global, factory) {
     (global = global || self, factory(global.VueInlineSvg = {}));
-}(this, function (exports) { 'use strict';
+}(this, (function (exports) { 'use strict';
 
@@ -45,2 +45,8 @@ /** @type Object{string: Promise<Element>} */
           required: true
+        },
+        transformSource: {
+          type: Function,
+          "default": function _default(svg) {
+            return svg;
+          }
         }
@@ -115,2 +121,4 @@ },
         download: function download(url) {
+          var _this2 = this;
+
           return new Promise(function (resolve, reject) {
@@ -120,3 +128,3 @@ var request = new XMLHttpRequest();
 
-            request.onload = function requestOnload() {
+            request.onload = function () {
               if (request.status >= 200 && request.status < 400) {
@@ -130,2 +138,3 @@ try {
                   if (svgEl) {
+                    svgEl = _this2.transformSource(svgEl);
                     resolve(svgEl);
@@ -161,2 +170,2 @@ } else {
 
-}));
+})));

dist/vue-inline-svg.min.js

@@ -1,1 +0,1 @@
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t=t||self).VueInlineSvg={})}(this,function(t){"use strict";var n={};var e={inheritAttrs:!1,render:function(t){return this.isLoaded?t("svg",{on:this.$listeners,attrs:Object.assign(this.initialAttrs,(n=this.$attrs,Object.keys(n).reduce(function(t,e){return!1!==n[e]&&null!==n[e]&&void 0!==n[e]&&(t[e]=n[e]),t},{}))),domProps:{innerHTML:this.initialContent}}):null;var n},props:{src:{type:String,required:!0}},data:function(){return{isLoaded:!1,initialAttrs:{},initialContent:""}},watch:{src:function(t){this.inline(t)}},mounted:function(){this.inline(this.src)},methods:{inline:function(t){var e=this;n[t]||(this.isLoaded&&(this.isLoaded=!1,this.$emit("unloaded")),n[t]=this.download(t)),n[t].then(function(t){e.initialAttrs={};for(var n=t.attributes,i=n.length-1;i>=0;i--)e.initialAttrs[n[i].name]=n[i].value;e.initialContent=t.innerHTML,e.isLoaded=!0,e.$emit("loaded")}).catch(function(i){delete n[t],e.$emit("error",i)})},download:function(t){return new Promise(function(n,e){var i=new XMLHttpRequest;i.open("GET",t,!0),i.onload=function(){if(i.status>=200&&i.status<400)try{var t=(new DOMParser).parseFromString(i.responseText,"text/xml").getElementsByTagName("svg")[0];t?n(t):e(new Error('Loaded file is not valid SVG"'))}catch(t){e(t)}else e(new Error("Error loading SVG"))},i.onerror=e,i.send()})}}},i={install:function(t){t.component("inline-svg",e)}};t.InlineSvgComponent=e,t.InlineSvgPlugin=i,t.default=e,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t=t||self).VueInlineSvg={})}(this,(function(t){"use strict";var n={};var e={inheritAttrs:!1,render:function(t){return this.isLoaded?t("svg",{on:this.$listeners,attrs:Object.assign(this.initialAttrs,(n=this.$attrs,Object.keys(n).reduce((function(t,e){return!1!==n[e]&&null!==n[e]&&void 0!==n[e]&&(t[e]=n[e]),t}),{}))),domProps:{innerHTML:this.initialContent}}):null;var n},props:{src:{type:String,required:!0},transformSource:{type:Function,default:function(t){return t}}},data:function(){return{isLoaded:!1,initialAttrs:{},initialContent:""}},watch:{src:function(t){this.inline(t)}},mounted:function(){this.inline(this.src)},methods:{inline:function(t){var e=this;n[t]||(this.isLoaded&&(this.isLoaded=!1,this.$emit("unloaded")),n[t]=this.download(t)),n[t].then((function(t){e.initialAttrs={};for(var n=t.attributes,i=n.length-1;i>=0;i--)e.initialAttrs[n[i].name]=n[i].value;e.initialContent=t.innerHTML,e.isLoaded=!0,e.$emit("loaded")})).catch((function(i){delete n[t],e.$emit("error",i)}))},download:function(t){var n=this;return new Promise((function(e,i){var r=new XMLHttpRequest;r.open("GET",t,!0),r.onload=function(){if(r.status>=200&&r.status<400)try{var t=(new DOMParser).parseFromString(r.responseText,"text/xml").getElementsByTagName("svg")[0];t?(t=n.transformSource(t),e(t)):i(new Error('Loaded file is not valid SVG"'))}catch(t){i(t)}else i(new Error("Error loading SVG"))},r.onerror=i,r.send()}))}}},i={install:function(t){t.component("inline-svg",e)}};t.InlineSvgComponent=e,t.InlineSvgPlugin=i,t.default=e,Object.defineProperty(t,"__esModule",{value:!0})}));

package.json

 {
   "name": "vue-inline-svg",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "Replace SVG images with inline SVG element",
@@ -36,4 +36,4 @@ "main": "dist/vue-inline-svg.js",
   "devDependencies": {
-    "@babel/core": "^7.6.0",
-    "@babel/preset-env": "^7.6.0",
+    "@babel/core": "^7.7.4",
+    "@babel/preset-env": "^7.7.4",
     "eslint": "^6",
@@ -43,6 +43,6 @@ "eslint-config-airbnb-base": "^14.0.0",
     "pre-commit": "^1.2.2",
-    "rollup": "^1.20.3",
+    "rollup": "^1.27.5",
     "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-terser": "^5.1.1"
+    "rollup-plugin-terser": "^5.1.2"
   }
 }

README.md

@@ -73,2 +73,3 @@ # Vue Inline SVG
     src="image.svg" 
+    transformSource="transformSvg"
     @loaded="svgLoaded()"
@@ -83,18 +84,48 @@ @unloaded="svgUnloaded()"
 ``` 
-[Example](https://github.com/shrpne/vue-inlinse-svg/blob/master/demo/index.html)
+[Example](https://github.com/shrpne/vue-inline-svg/blob/master/demo/index.html)
 
 ### props
-#### src
-path to SVG file
+#### - `src`
+Path to SVG file
 
+Note: if you use vue-loader assets or vue-cli, then paths like '../assets/my.svg' will not be handled by file-loader automatically like vue-cli do for `<img>` tag, so you will need to use it with `require`:
+```
+<inline-svg :src="require('../assets/my.svg')"/>
+```
+Learn more:
+- https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules
+- https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
+
+#### - `transformSource`
+Function to transform SVG source
+ 
+This example create circle in svg:
+```
+<inline-svg :src="image.svg" :transformSource="transform"/>
+
+....
+
+const transform = (svg) => {
+    let point = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
+        point.setAttributeNS(null, 'cx', '20');
+        point.setAttributeNS(null, 'cy', '20');
+        point.setAttributeNS(null, 'r', '10');
+        point.setAttributeNS(null, 'fill', 'red');
+        svg.appendChild(point);
+    return svg;
+}
+// For cleaner syntax you could use https://github.com/svgdotjs/svg.js
+```
+
+### attributes
 Other attributes will be passed to inlined `<svg>`. Except attributes with `false` or `null` value.
 
 ### events
-#### loaded
+#### - `loaded`
 called when <svg> image is loaded and inlined
 
-#### unloaded
+#### - `unloaded`
 called when `src` prop was changed and another svg start loading
 
-#### error
+#### - `error`
 called when svg failed to load
@@ -104,4 +135,4 @@
 
-- This module: **1.5 kB minified**
-- [`vue-simple-svg`](https://github.com/seiyable/vue-simple-svg): 21KB minified, does not cache network requests, has wrapper around svg, attrs passed to `<svg>` are limited, converts `<style>` tag into `style=""` attr
+- This module: [![Minified Size](https://img.shields.io/bundlephobia/min/vue-inline-svg.svg?style=flat-square)](https://bundlephobia.com/result?p=vue-inline-svg)
+- [`vue-simple-svg`](https://github.com/seiyable/vue-simple-svg): [![Minified Size](https://img.shields.io/bundlephobia/min/vue-simple-svg.svg?style=flat-square)](https://bundlephobia.com/result?p=vue-simple-svg), does not cache network requests, has wrapper around svg, attrs passed to `<svg>` are limited, converts `<style>` tag into `style=""` attr
 
@@ -108,0 +139,0 @@

src/index.js

@@ -41,2 +41,6 @@ /** @type Object{string: Promise<Element>} */
         },
+        transformSource: {
+            type: Function,
+            default: (svg) => svg,
+        },
     },
@@ -110,3 +114,3 @@ data() {
 
-                request.onload = function requestOnload() {
+                request.onload = () => {
                     if (request.status >= 200 && request.status < 400) {
@@ -117,4 +121,5 @@ try {
                             const result = parser.parseFromString(request.responseText, 'text/xml');
-                            const svgEl = result.getElementsByTagName('svg')[0];
+                            let svgEl = result.getElementsByTagName('svg')[0];
                             if (svgEl) {
+                                svgEl = this.transformSource(svgEl);
                                 resolve(svgEl);
@@ -121,0 +126,0 @@ } else {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48487

increased by4.16%

Lines of code

440

increased by3.04%

Number of lines in readme file

140

increased by28.44%

No dependency changes