Socket
Socket
Sign inDemoInstall

vue-inline-svg

Package Overview
Dependencies
0
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.0.0 to 2.1.0

types/index.d.ts

3

CHANGELOG.md

@@ -0,1 +1,4 @@

## 2.1.0 - 2021-10-04
- Add .d.ts types
## 2.0.0 - 2020-07-25

@@ -2,0 +5,0 @@ - Add: `title` prop

8

dist/vue-inline-svg.js

@@ -5,3 +5,3 @@ (function (global, factory) {

(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VueInlineSvg = {}));
}(this, (function (exports) { 'use strict';
})(this, (function (exports) { 'use strict';

@@ -26,3 +26,3 @@ /** @type Object{string: Promise<Element>} */

var InlineSvgComponent = {
// name: 'inline-svg',
name: 'InlineSvg',
inheritAttrs: false,

@@ -245,6 +245,6 @@ render: function render(createElement) {

exports.InlineSvgPlugin = InlineSvgPlugin;
exports.default = InlineSvgComponent;
exports["default"] = InlineSvgComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));
}));

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueInlineSvg={})}(this,(function(e){"use strict";var t={};var n={inheritAttrs:!1,render:function(e){return this.svgElSource?e("svg",{on:this.$listeners,attrs:Object.assign(this.getSvgAttrs(this.svgElSource),(t=this.$attrs,Object.keys(t).reduce((function(e,n){return!1!==t[n]&&null!==t[n]&&void 0!==t[n]&&(e[n]=t[n]),e}),{}))),domProps:{innerHTML:this.getSvgContent(this.svgElSource)}}):null;var t},props:{src:{type:String,required:!0},title:{type:String},transformSource:{type:Function,default:function(e){return e}},keepDuringLoading:{type:Boolean,default:!0}},data:function(){return{svgElSource:null}},watch:{src:function(e){this.getSource(e)}},mounted:function(){this.getSource(this.src)},methods:{getSvgAttrs:function(e){var t={},n=e.attributes;if(!n)return t;for(var r=n.length-1;r>=0;r--)t[n[r].name]=n[r].value;return t},getSvgContent:function(e){return e=e.cloneNode(!0),e=this.transformSource(e),this.title&&function(e,t){var n=e.getElementsByTagName("title");if(n.length)n[0].textContent=t;else{var r=document.createElementNS("http://www.w3.org/2000/svg","title");r.textContent=t,e.appendChild(r)}}(e,this.title),e.innerHTML},getSource:function(e){var n=this;t[e]||(t[e]=this.download(e)),this.svgElSource&&t[e].isPending()&&!this.keepDuringLoading&&(this.svgElSource=null,this.$emit("unloaded")),t[e].then((function(e){n.svgElSource=e,n.$nextTick((function(){n.$emit("loaded",n.$el)}))})).catch((function(r){n.svgElSource&&(n.svgElSource=null,n.$emit("unloaded")),delete t[e],n.$emit("error",r)}))},download:function(e){return function(e){if(e.isPending)return e;var t=!0,n=e.then((function(e){return t=!1,e}),(function(e){throw t=!1,e}));return n.isPending=function(){return t},n}(new Promise((function(t,n){var r=new XMLHttpRequest;r.open("GET",e,!0),r.onload=function(){if(r.status>=200&&r.status<400)try{var e=(new DOMParser).parseFromString(r.responseText,"text/xml").getElementsByTagName("svg")[0];e?t(e):n(new Error('Loaded file is not valid SVG"'))}catch(e){n(e)}else n(new Error("Error loading SVG"))},r.onerror=n,r.send()})))}}};var r={install:function(e){e.component("inline-svg",n)}};e.InlineSvgComponent=n,e.InlineSvgPlugin=r,e.default=n,Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueInlineSvg={})}(this,(function(e){"use strict";var t={};var n={name:"InlineSvg",inheritAttrs:!1,render:function(e){return this.svgElSource?e("svg",{on:this.$listeners,attrs:Object.assign(this.getSvgAttrs(this.svgElSource),(t=this.$attrs,Object.keys(t).reduce((function(e,n){return!1!==t[n]&&null!==t[n]&&void 0!==t[n]&&(e[n]=t[n]),e}),{}))),domProps:{innerHTML:this.getSvgContent(this.svgElSource)}}):null;var t},props:{src:{type:String,required:!0},title:{type:String},transformSource:{type:Function,default:function(e){return e}},keepDuringLoading:{type:Boolean,default:!0}},data:function(){return{svgElSource:null}},watch:{src:function(e){this.getSource(e)}},mounted:function(){this.getSource(this.src)},methods:{getSvgAttrs:function(e){var t={},n=e.attributes;if(!n)return t;for(var r=n.length-1;r>=0;r--)t[n[r].name]=n[r].value;return t},getSvgContent:function(e){return e=e.cloneNode(!0),e=this.transformSource(e),this.title&&function(e,t){var n=e.getElementsByTagName("title");if(n.length)n[0].textContent=t;else{var r=document.createElementNS("http://www.w3.org/2000/svg","title");r.textContent=t,e.appendChild(r)}}(e,this.title),e.innerHTML},getSource:function(e){var n=this;t[e]||(t[e]=this.download(e)),this.svgElSource&&t[e].isPending()&&!this.keepDuringLoading&&(this.svgElSource=null,this.$emit("unloaded")),t[e].then((function(e){n.svgElSource=e,n.$nextTick((function(){n.$emit("loaded",n.$el)}))})).catch((function(r){n.svgElSource&&(n.svgElSource=null,n.$emit("unloaded")),delete t[e],n.$emit("error",r)}))},download:function(e){return function(e){if(e.isPending)return e;var t=!0,n=e.then((function(e){return t=!1,e}),(function(e){throw t=!1,e}));return n.isPending=function(){return t},n}(new Promise((function(t,n){var r=new XMLHttpRequest;r.open("GET",e,!0),r.onload=function(){if(r.status>=200&&r.status<400)try{var e=(new DOMParser).parseFromString(r.responseText,"text/xml").getElementsByTagName("svg")[0];e?t(e):n(new Error('Loaded file is not valid SVG"'))}catch(e){n(e)}else n(new Error("Error loading SVG"))},r.onerror=n,r.send()})))}}};var r={install:function(e){e.component("inline-svg",n)}};e.InlineSvgComponent=n,e.InlineSvgPlugin=r,e.default=n,Object.defineProperty(e,"__esModule",{value:!0})}));
{
"name": "vue-inline-svg",
"version": "2.0.0",
"version": "2.1.0",
"description": "Replace SVG images with inline SVG element",

@@ -9,4 +9,6 @@ "main": "dist/vue-inline-svg.js",

"unpkg": "dist/vue-inline-svg.min.js",
"types": "types/index.d.ts",
"files": [
"/src/",
"/types/",
"/dist/"

@@ -16,3 +18,3 @@ ],

"build": "rollup -c rollup.conf.js",
"test": "npm run lint",
"test": "npm run lint && npm i vue@2 --no-save && check-dts test/*.ts",
"lint": "eslint src/*.js",

@@ -43,12 +45,13 @@ "lint:fix": "eslint src/*.js --fix",

"devDependencies": {
"@babel/core": "^7.10.5",
"@babel/preset-env": "^7.10.4",
"eslint": "^7.5.0",
"eslint-config-airbnb-base": "^14.2.0",
"eslint-plugin-import": "^2.22.0",
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"@rollup/plugin-babel": "^5.3.0",
"check-dts": "^0.5.6",
"eslint": "^7.32.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.24.2",
"pre-commit": "^1.2.2",
"rollup": "^2.23.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-terser": "^6.1.0"
"rollup": "^2.58.0",
"rollup-plugin-terser": "^7.0.2"
}
}

@@ -18,2 +18,3 @@ # Vue Inline SVG

- [CDN](#cdn)
- [Vue v3](#vue-v3)
- [Usage](#usage)

@@ -31,2 +32,4 @@ - [props](#props)

- [Comparison](#comparison)
- [Changelog](#changelog)
- [Contributing](#contributing)
- [License](#license)

@@ -89,3 +92,14 @@

### Vue v3
Version of `vue-inline-svg` with support of Vue v3 is available under `next` tag
```bash
npm install vue-inline-svg@next
```
```html
<script src="https://unpkg.com/vue-inline-svg@next"></script>
```
## Usage

@@ -206,4 +220,12 @@

## Changelog
[CHANGELOG.md](https://github.com/shrpne/vue-inline-svg/blob/master/CHANGELOG.md)
## Contributing
[CONTRIBUTING.md](https://github.com/shrpne/vue-inline-svg/blob/master/CONTRIBUTING.md)
## License
MIT License

@@ -18,3 +18,3 @@ /** @type Object{string: Promise<Element>} */

const InlineSvgComponent = {
// name: 'inline-svg',
name: 'InlineSvg',
inheritAttrs: false,

@@ -21,0 +21,0 @@ render(createElement) {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc