ionicons - npm Package Compare versions

Comparing version 6.1.1 to 6.1.2-dev.11675863592.172f0936

components/ion-icon.js

@@ -169,5 +169,8 @@ import { getAssetPath, proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
 };
+const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');
+const isEncodedDataUrl = (url) => url.indexOf(';utf8,') !== -1;
 
 const ioniconContent = new Map();
 const requests = new Map();
+let parser = new DOMParser();
 const getSvgContent = (url, sanitize) => {
@@ -178,16 +181,37 @@ // see if we already have a request for this url
     if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
-      // we don't already have a request
-      req = fetch(url).then((rsp) => {
-        if (rsp.ok) {
-          return rsp.text().then((svgContent) => {
-            if (svgContent && sanitize !== false) {
-              svgContent = validateContent(svgContent);
-            }
-            ioniconContent.set(url, svgContent || '');
-          });
+      /**
+       * If the url is a data url of an svg, then try to parse it
+       * with the DOMParser. This works with content security policies enabled.
+       */
+      if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {
+        if (!parser) {
+          /**
+           * Create an instance of the DOM parser. This creates a single
+           * parser instance for the entire app, which is more efficient.
+           */
+          parser = new DOMParser();
         }
-        ioniconContent.set(url, '');
-      });
-      // cache for the same requests
-      requests.set(url, req);
+        const doc = parser.parseFromString(url, 'text/html');
+        const svg = doc.querySelector('svg');
+        if (svg) {
+          ioniconContent.set(url, svg.outerHTML);
+        }
+        return Promise.resolve();
+      }
+      else {
+        // we don't already have a request
+        req = fetch(url).then((rsp) => {
+          if (rsp.ok) {
+            return rsp.text().then((svgContent) => {
+              if (svgContent && sanitize !== false) {
+                svgContent = validateContent(svgContent);
+              }
+              ioniconContent.set(url, svgContent || '');
+            });
+          }
+          ioniconContent.set(url, '');
+        });
+        // cache for the same requests
+        requests.set(url, req);
+      }
     }
@@ -205,3 +229,2 @@ else {
 
-let parser;
 const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -273,9 +296,2 @@ constructor() {
     if (Build.isBrowser && this.isVisible) {
-      if (!parser) {
-        /**
-         * Create an instance of the DOM parser. This creates a single
-         * parser instance for the entire app, which is more efficient.
-         */
-        parser = new DOMParser();
-      }
       const url = getUrl(this);
@@ -287,12 +303,2 @@ if (url) {
         }
-        else if (url.startsWith('data:')) {
-          const doc = parser.parseFromString(url, 'text/html');
-          const svgEl = doc.body.querySelector('svg');
-          if (svgEl !== null) {
-            this.svgContent = svgEl.outerHTML;
-          }
-          else {
-            this.svgContent = '';
-          }
-        }
         else {
@@ -304,3 +310,3 @@ // async if it hasn't been loaded
     }
-    const label = this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md);
+    const label = (this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md));
     /**
@@ -318,5 +324,3 @@ * Come up with a default label
     const flipRtl = this.flipRtl ||
-      (iconName &&
-        (iconName.indexOf('arrow') > -1 || iconName.indexOf('chevron') > -1) &&
-        this.flipRtl !== false);
+      (iconName && (iconName.indexOf('arrow') > -1 || iconName.indexOf('chevron') > -1) && this.flipRtl !== false);
     /**
@@ -336,3 +340,5 @@ * Only set the aria-label if a) we have generated
     "src": ["loadIcon"],
-    "icon": ["loadIcon"]
+    "icon": ["loadIcon"],
+    "ios": ["loadIcon"],
+    "md": ["loadIcon"]
   }; }
@@ -339,0 +345,0 @@ static get style() { return iconCss; }

dist/cjs/ion-icon.cjs.entry.js

@@ -50,5 +50,8 @@ 'use strict';
 };
+const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');
+const isEncodedDataUrl = (url) => url.indexOf(';utf8,') !== -1;
 
 const ioniconContent = new Map();
 const requests = new Map();
+let parser = new DOMParser();
 const getSvgContent = (url, sanitize) => {
@@ -59,16 +62,37 @@ // see if we already have a request for this url
     if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
-      // we don't already have a request
-      req = fetch(url).then((rsp) => {
-        if (rsp.ok) {
-          return rsp.text().then((svgContent) => {
-            if (svgContent && sanitize !== false) {
-              svgContent = validateContent(svgContent);
-            }
-            ioniconContent.set(url, svgContent || '');
-          });
+      /**
+       * If the url is a data url of an svg, then try to parse it
+       * with the DOMParser. This works with content security policies enabled.
+       */
+      if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {
+        if (!parser) {
+          /**
+           * Create an instance of the DOM parser. This creates a single
+           * parser instance for the entire app, which is more efficient.
+           */
+          parser = new DOMParser();
         }
-        ioniconContent.set(url, '');
-      });
-      // cache for the same requests
-      requests.set(url, req);
+        const doc = parser.parseFromString(url, 'text/html');
+        const svg = doc.querySelector('svg');
+        if (svg) {
+          ioniconContent.set(url, svg.outerHTML);
+        }
+        return Promise.resolve();
+      }
+      else {
+        // we don't already have a request
+        req = fetch(url).then((rsp) => {
+          if (rsp.ok) {
+            return rsp.text().then((svgContent) => {
+              if (svgContent && sanitize !== false) {
+                svgContent = validateContent(svgContent);
+              }
+              ioniconContent.set(url, svgContent || '');
+            });
+          }
+          ioniconContent.set(url, '');
+        });
+        // cache for the same requests
+        requests.set(url, req);
+      }
     }
@@ -86,3 +110,2 @@ else {
 
-let parser;
 const Icon = class {
@@ -152,9 +175,2 @@ constructor(hostRef) {
     if (this.isVisible) {
-      if (!parser) {
-        /**
-         * Create an instance of the DOM parser. This creates a single
-         * parser instance for the entire app, which is more efficient.
-         */
-        parser = new DOMParser();
-      }
       const url = utils.getUrl(this);
@@ -166,12 +182,2 @@ if (url) {
         }
-        else if (url.startsWith('data:')) {
-          const doc = parser.parseFromString(url, 'text/html');
-          const svgEl = doc.body.querySelector('svg');
-          if (svgEl !== null) {
-            this.svgContent = svgEl.outerHTML;
-          }
-          else {
-            this.svgContent = '';
-          }
-        }
         else {
@@ -183,3 +189,3 @@ // async if it hasn't been loaded
     }
-    const label = this.iconName = utils.getName(this.name, this.icon, this.mode, this.ios, this.md);
+    const label = (this.iconName = utils.getName(this.name, this.icon, this.mode, this.ios, this.md));
     /**
@@ -197,5 +203,3 @@ * Come up with a default label
     const flipRtl = this.flipRtl ||
-      (iconName &&
-        (iconName.indexOf('arrow') > -1 || iconName.indexOf('chevron') > -1) &&
-        this.flipRtl !== false);
+      (iconName && (iconName.indexOf('arrow') > -1 || iconName.indexOf('chevron') > -1) && this.flipRtl !== false);
     /**
@@ -215,3 +219,5 @@ * Only set the aria-label if a) we have generated
     "src": ["loadIcon"],
-    "icon": ["loadIcon"]
+    "icon": ["loadIcon"],
+    "ios": ["loadIcon"],
+    "md": ["loadIcon"]
   }; }
@@ -218,0 +224,0 @@ };

dist/collection/components/icon/icon.js

 import { Build, Host, h } from '@stencil/core';
 import { getSvgContent, ioniconContent } from './request';
 import { getName, getUrl, inheritAttributes, isRTL } from './utils';
-let parser;
 export class Icon {
@@ -68,9 +67,2 @@ constructor() {
     if (Build.isBrowser && this.isVisible) {
-      if (!parser) {
-        /**
-         * Create an instance of the DOM parser. This creates a single
-         * parser instance for the entire app, which is more efficient.
-         */
-        parser = new DOMParser();
-      }
       const url = getUrl(this);
@@ -82,12 +74,2 @@ if (url) {
         }
-        else if (url.startsWith('data:')) {
-          const doc = parser.parseFromString(url, 'text/html');
-          const svgEl = doc.body.querySelector('svg');
-          if (svgEl !== null) {
-            this.svgContent = svgEl.outerHTML;
-          }
-          else {
-            this.svgContent = '';
-          }
-        }
         else {
@@ -99,3 +81,3 @@ // async if it hasn't been loaded
     }
-    const label = this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md);
+    const label = (this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md));
     /**
@@ -113,5 +95,3 @@ * Come up with a default label
     const flipRtl = this.flipRtl ||
-      (iconName &&
-        (iconName.indexOf('arrow') > -1 || iconName.indexOf('chevron') > -1) &&
-        this.flipRtl !== false);
+      (iconName && (iconName.indexOf('arrow') > -1 || iconName.indexOf('chevron') > -1) && this.flipRtl !== false);
     /**
@@ -354,2 +334,8 @@ * Only set the aria-label if a) we have generated
         "methodName": "loadIcon"
+      }, {
+        "propName": "ios",
+        "methodName": "loadIcon"
+      }, {
+        "propName": "md",
+        "methodName": "loadIcon"
       }];
@@ -356,0 +342,0 @@ }

dist/collection/components/icon/request.js

@@ -1,4 +0,5 @@
-import { validateContent } from './validate';
+import { isEncodedDataUrl, isSvgDataUrl, validateContent } from './validate';
 export const ioniconContent = new Map();
 const requests = new Map();
+let parser = new DOMParser();
 export const getSvgContent = (url, sanitize) => {
@@ -9,16 +10,37 @@ // see if we already have a request for this url
     if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
-      // we don't already have a request
-      req = fetch(url).then((rsp) => {
-        if (rsp.ok) {
-          return rsp.text().then((svgContent) => {
-            if (svgContent && sanitize !== false) {
-              svgContent = validateContent(svgContent);
-            }
-            ioniconContent.set(url, svgContent || '');
-          });
+      /**
+       * If the url is a data url of an svg, then try to parse it
+       * with the DOMParser. This works with content security policies enabled.
+       */
+      if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {
+        if (!parser) {
+          /**
+           * Create an instance of the DOM parser. This creates a single
+           * parser instance for the entire app, which is more efficient.
+           */
+          parser = new DOMParser();
         }
-        ioniconContent.set(url, '');
-      });
-      // cache for the same requests
-      requests.set(url, req);
+        const doc = parser.parseFromString(url, 'text/html');
+        const svg = doc.querySelector('svg');
+        if (svg) {
+          ioniconContent.set(url, svg.outerHTML);
+        }
+        return Promise.resolve();
+      }
+      else {
+        // we don't already have a request
+        req = fetch(url).then((rsp) => {
+          if (rsp.ok) {
+            return rsp.text().then((svgContent) => {
+              if (svgContent && sanitize !== false) {
+                svgContent = validateContent(svgContent);
+              }
+              ioniconContent.set(url, svgContent || '');
+            });
+          }
+          ioniconContent.set(url, '');
+        });
+        // cache for the same requests
+        requests.set(url, req);
+      }
     }
@@ -25,0 +47,0 @@ else {

dist/collection/components/icon/validate.js

@@ -44,1 +44,3 @@ import { isStr } from './utils';
 };
+export const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');
+export const isEncodedDataUrl = (url) => url.indexOf(';utf8,') !== -1;

dist/esm-es5/ion-icon.entry.js

@@ -1,1 +0,1 @@
-import{r as registerInstance,h,H as Host,a as getElement}from"./index-5514a13d.js";import{i as isStr,b as inheritAttributes,g as getUrl,c as getName,d as isRTL}from"./utils-ccb924b9.js";var validateContent=function(e){var t=document.createElement("div");t.innerHTML=e;for(var i=t.childNodes.length-1;i>=0;i--){if(t.childNodes[i].nodeName.toLowerCase()!=="svg"){t.removeChild(t.childNodes[i])}}var o=t.firstElementChild;if(o&&o.nodeName.toLowerCase()==="svg"){var n=o.getAttribute("class")||"";o.setAttribute("class",(n+" s-ion-icon").trim());if(isValid(o)){return t.innerHTML}}return""};var isValid=function(e){if(e.nodeType===1){if(e.nodeName.toLowerCase()==="script"){return false}for(var t=0;t<e.attributes.length;t++){var i=e.attributes[t].name;if(isStr(i)&&i.toLowerCase().indexOf("on")===0){return false}}for(var t=0;t<e.childNodes.length;t++){if(!isValid(e.childNodes[t])){return false}}}return true};var ioniconContent=new Map;var requests=new Map;var getSvgContent=function(e,t){var i=requests.get(e);if(!i){if(typeof fetch!=="undefined"&&typeof document!=="undefined"){i=fetch(e).then((function(i){if(i.ok){return i.text().then((function(i){if(i&&t!==false){i=validateContent(i)}ioniconContent.set(e,i||"")}))}ioniconContent.set(e,"")}));requests.set(e,i)}else{ioniconContent.set(e,"");return Promise.resolve()}}return i};var iconCss=":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host .ionicon{stroke:currentColor}.ionicon-fill-none{fill:none}.ionicon-stroke-width{stroke-width:32px;stroke-width:var(--ionicon-stroke-width, 32px)}.icon-inner,.ionicon,svg{display:block;height:100%;width:100%}:host(.flip-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}:host(.ion-color){color:var(--ion-color-base) !important}:host(.ion-color-primary){--ion-color-base:var(--ion-color-primary, #3880ff)}:host(.ion-color-secondary){--ion-color-base:var(--ion-color-secondary, #0cd1e8)}:host(.ion-color-tertiary){--ion-color-base:var(--ion-color-tertiary, #f4a942)}:host(.ion-color-success){--ion-color-base:var(--ion-color-success, #10dc60)}:host(.ion-color-warning){--ion-color-base:var(--ion-color-warning, #ffce00)}:host(.ion-color-danger){--ion-color-base:var(--ion-color-danger, #f14141)}:host(.ion-color-light){--ion-color-base:var(--ion-color-light, #f4f5f8)}:host(.ion-color-medium){--ion-color-base:var(--ion-color-medium, #989aa2)}:host(.ion-color-dark){--ion-color-base:var(--ion-color-dark, #222428)}";var parser;var Icon=function(){function e(e){var t=this;registerInstance(this,e);this.iconName=null;this.inheritedAttributes={};this.isVisible=false;this.mode=getIonMode();this.lazy=false;this.sanitize=true;this.hasAriaHidden=function(){var e=t.el;return e.hasAttribute("aria-hidden")&&e.getAttribute("aria-hidden")==="true"}}e.prototype.componentWillLoad=function(){this.inheritedAttributes=inheritAttributes(this.el,["aria-label"])};e.prototype.connectedCallback=function(){var e=this;this.waitUntilVisible(this.el,"50px",(function(){e.isVisible=true;e.loadIcon()}))};e.prototype.disconnectedCallback=function(){if(this.io){this.io.disconnect();this.io=undefined}};e.prototype.waitUntilVisible=function(e,t,i){var o=this;if(this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){var n=this.io=new window.IntersectionObserver((function(e){if(e[0].isIntersecting){n.disconnect();o.io=undefined;i()}}),{rootMargin:t});n.observe(e)}else{i()}};e.prototype.loadIcon=function(){var e=this;if(this.isVisible){if(!parser){parser=new DOMParser}var t=getUrl(this);if(t){if(ioniconContent.has(t)){this.svgContent=ioniconContent.get(t)}else if(t.startsWith("data:")){var i=parser.parseFromString(t,"text/html");var o=i.body.querySelector("svg");if(o!==null){this.svgContent=o.outerHTML}else{this.svgContent=""}}else{getSvgContent(t,this.sanitize).then((function(){return e.svgContent=ioniconContent.get(t)}))}}}var n=this.iconName=getName(this.name,this.icon,this.mode,this.ios,this.md);if(n){this.ariaLabel=n.replace(/\-/g," ")}};e.prototype.render=function(){var e,t;var i=this,o=i.iconName,n=i.ariaLabel,r=i.el,s=i.inheritedAttributes;var a=this.mode||"md";var c=this.flipRtl||o&&(o.indexOf("arrow")>-1||o.indexOf("chevron")>-1)&&this.flipRtl!==false;return h(Host,Object.assign({"aria-label":n!==undefined&&!this.hasAriaHidden()?n:null,role:"img",class:Object.assign(Object.assign((e={},e[a]=true,e),createColorClasses(this.color)),(t={},t["icon-".concat(this.size)]=!!this.size,t["flip-rtl"]=!!c&&isRTL(r),t))},s),this.svgContent?h("div",{class:"icon-inner",innerHTML:this.svgContent}):h("div",{class:"icon-inner"}))};Object.defineProperty(e,"assetsDirs",{get:function(){return["svg"]},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}},enumerable:false,configurable:true});return e}();var getIonMode=function(){return typeof document!=="undefined"&&document.documentElement.getAttribute("mode")||"md"};var createColorClasses=function(e){var t;return e?(t={"ion-color":true},t["ion-color-".concat(e)]=true,t):null};Icon.style=iconCss;export{Icon as ion_icon};
+import{r as registerInstance,h,H as Host,a as getElement}from"./index-5514a13d.js";import{i as isStr,b as inheritAttributes,g as getUrl,c as getName,d as isRTL}from"./utils-ccb924b9.js";var validateContent=function(e){var t=document.createElement("div");t.innerHTML=e;for(var i=t.childNodes.length-1;i>=0;i--){if(t.childNodes[i].nodeName.toLowerCase()!=="svg"){t.removeChild(t.childNodes[i])}}var o=t.firstElementChild;if(o&&o.nodeName.toLowerCase()==="svg"){var n=o.getAttribute("class")||"";o.setAttribute("class",(n+" s-ion-icon").trim());if(isValid(o)){return t.innerHTML}}return""};var isValid=function(e){if(e.nodeType===1){if(e.nodeName.toLowerCase()==="script"){return false}for(var t=0;t<e.attributes.length;t++){var i=e.attributes[t].name;if(isStr(i)&&i.toLowerCase().indexOf("on")===0){return false}}for(var t=0;t<e.childNodes.length;t++){if(!isValid(e.childNodes[t])){return false}}}return true};var isSvgDataUrl=function(e){return e.startsWith("data:image/svg+xml")};var isEncodedDataUrl=function(e){return e.indexOf(";utf8,")!==-1};var ioniconContent=new Map;var requests=new Map;var parser=new DOMParser;var getSvgContent=function(e,t){var i=requests.get(e);if(!i){if(typeof fetch!=="undefined"&&typeof document!=="undefined"){if(isSvgDataUrl(e)&&isEncodedDataUrl(e)){if(!parser){parser=new DOMParser}var o=parser.parseFromString(e,"text/html");var n=o.querySelector("svg");if(n){ioniconContent.set(e,n.outerHTML)}return Promise.resolve()}else{i=fetch(e).then((function(i){if(i.ok){return i.text().then((function(i){if(i&&t!==false){i=validateContent(i)}ioniconContent.set(e,i||"")}))}ioniconContent.set(e,"")}));requests.set(e,i)}}else{ioniconContent.set(e,"");return Promise.resolve()}}return i};var iconCss=":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host .ionicon{stroke:currentColor}.ionicon-fill-none{fill:none}.ionicon-stroke-width{stroke-width:32px;stroke-width:var(--ionicon-stroke-width, 32px)}.icon-inner,.ionicon,svg{display:block;height:100%;width:100%}:host(.flip-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}:host(.ion-color){color:var(--ion-color-base) !important}:host(.ion-color-primary){--ion-color-base:var(--ion-color-primary, #3880ff)}:host(.ion-color-secondary){--ion-color-base:var(--ion-color-secondary, #0cd1e8)}:host(.ion-color-tertiary){--ion-color-base:var(--ion-color-tertiary, #f4a942)}:host(.ion-color-success){--ion-color-base:var(--ion-color-success, #10dc60)}:host(.ion-color-warning){--ion-color-base:var(--ion-color-warning, #ffce00)}:host(.ion-color-danger){--ion-color-base:var(--ion-color-danger, #f14141)}:host(.ion-color-light){--ion-color-base:var(--ion-color-light, #f4f5f8)}:host(.ion-color-medium){--ion-color-base:var(--ion-color-medium, #989aa2)}:host(.ion-color-dark){--ion-color-base:var(--ion-color-dark, #222428)}";var Icon=function(){function e(e){var t=this;registerInstance(this,e);this.iconName=null;this.inheritedAttributes={};this.isVisible=false;this.mode=getIonMode();this.lazy=false;this.sanitize=true;this.hasAriaHidden=function(){var e=t.el;return e.hasAttribute("aria-hidden")&&e.getAttribute("aria-hidden")==="true"}}e.prototype.componentWillLoad=function(){this.inheritedAttributes=inheritAttributes(this.el,["aria-label"])};e.prototype.connectedCallback=function(){var e=this;this.waitUntilVisible(this.el,"50px",(function(){e.isVisible=true;e.loadIcon()}))};e.prototype.disconnectedCallback=function(){if(this.io){this.io.disconnect();this.io=undefined}};e.prototype.waitUntilVisible=function(e,t,i){var o=this;if(this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){var n=this.io=new window.IntersectionObserver((function(e){if(e[0].isIntersecting){n.disconnect();o.io=undefined;i()}}),{rootMargin:t});n.observe(e)}else{i()}};e.prototype.loadIcon=function(){var e=this;if(this.isVisible){var t=getUrl(this);if(t){if(ioniconContent.has(t)){this.svgContent=ioniconContent.get(t)}else{getSvgContent(t,this.sanitize).then((function(){return e.svgContent=ioniconContent.get(t)}))}}}var i=this.iconName=getName(this.name,this.icon,this.mode,this.ios,this.md);if(i){this.ariaLabel=i.replace(/\-/g," ")}};e.prototype.render=function(){var e,t;var i=this,o=i.iconName,n=i.ariaLabel,r=i.el,s=i.inheritedAttributes;var a=this.mode||"md";var c=this.flipRtl||o&&(o.indexOf("arrow")>-1||o.indexOf("chevron")>-1)&&this.flipRtl!==false;return h(Host,Object.assign({"aria-label":n!==undefined&&!this.hasAriaHidden()?n:null,role:"img",class:Object.assign(Object.assign((e={},e[a]=true,e),createColorClasses(this.color)),(t={},t["icon-".concat(this.size)]=!!this.size,t["flip-rtl"]=!!c&&isRTL(r),t))},s),this.svgContent?h("div",{class:"icon-inner",innerHTML:this.svgContent}):h("div",{class:"icon-inner"}))};Object.defineProperty(e,"assetsDirs",{get:function(){return["svg"]},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"],ios:["loadIcon"],md:["loadIcon"]}},enumerable:false,configurable:true});return e}();var getIonMode=function(){return typeof document!=="undefined"&&document.documentElement.getAttribute("mode")||"md"};var createColorClasses=function(e){var t;return e?(t={"ion-color":true},t["ion-color-".concat(e)]=true,t):null};Icon.style=iconCss;export{Icon as ion_icon};

dist/esm/ion-icon.entry.js

@@ -46,5 +46,8 @@ import { r as registerInstance, h, H as Host, a as getElement } from './index-5514a13d.js';
 };
+const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');
+const isEncodedDataUrl = (url) => url.indexOf(';utf8,') !== -1;
 
 const ioniconContent = new Map();
 const requests = new Map();
+let parser = new DOMParser();
 const getSvgContent = (url, sanitize) => {
@@ -55,16 +58,37 @@ // see if we already have a request for this url
     if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
-      // we don't already have a request
-      req = fetch(url).then((rsp) => {
-        if (rsp.ok) {
-          return rsp.text().then((svgContent) => {
-            if (svgContent && sanitize !== false) {
-              svgContent = validateContent(svgContent);
-            }
-            ioniconContent.set(url, svgContent || '');
-          });
+      /**
+       * If the url is a data url of an svg, then try to parse it
+       * with the DOMParser. This works with content security policies enabled.
+       */
+      if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {
+        if (!parser) {
+          /**
+           * Create an instance of the DOM parser. This creates a single
+           * parser instance for the entire app, which is more efficient.
+           */
+          parser = new DOMParser();
         }
-        ioniconContent.set(url, '');
-      });
-      // cache for the same requests
-      requests.set(url, req);
+        const doc = parser.parseFromString(url, 'text/html');
+        const svg = doc.querySelector('svg');
+        if (svg) {
+          ioniconContent.set(url, svg.outerHTML);
+        }
+        return Promise.resolve();
+      }
+      else {
+        // we don't already have a request
+        req = fetch(url).then((rsp) => {
+          if (rsp.ok) {
+            return rsp.text().then((svgContent) => {
+              if (svgContent && sanitize !== false) {
+                svgContent = validateContent(svgContent);
+              }
+              ioniconContent.set(url, svgContent || '');
+            });
+          }
+          ioniconContent.set(url, '');
+        });
+        // cache for the same requests
+        requests.set(url, req);
+      }
     }
@@ -82,3 +106,2 @@ else {
 
-let parser;
 const Icon = class {
@@ -148,9 +171,2 @@ constructor(hostRef) {
     if (this.isVisible) {
-      if (!parser) {
-        /**
-         * Create an instance of the DOM parser. This creates a single
-         * parser instance for the entire app, which is more efficient.
-         */
-        parser = new DOMParser();
-      }
       const url = getUrl(this);
@@ -162,12 +178,2 @@ if (url) {
         }
-        else if (url.startsWith('data:')) {
-          const doc = parser.parseFromString(url, 'text/html');
-          const svgEl = doc.body.querySelector('svg');
-          if (svgEl !== null) {
-            this.svgContent = svgEl.outerHTML;
-          }
-          else {
-            this.svgContent = '';
-          }
-        }
         else {
@@ -179,3 +185,3 @@ // async if it hasn't been loaded
     }
-    const label = this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md);
+    const label = (this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md));
     /**
@@ -193,5 +199,3 @@ * Come up with a default label
     const flipRtl = this.flipRtl ||
-      (iconName &&
-        (iconName.indexOf('arrow') > -1 || iconName.indexOf('chevron') > -1) &&
-        this.flipRtl !== false);
+      (iconName && (iconName.indexOf('arrow') > -1 || iconName.indexOf('chevron') > -1) && this.flipRtl !== false);
     /**
@@ -211,3 +215,5 @@ * Only set the aria-label if a) we have generated
     "src": ["loadIcon"],
-    "icon": ["loadIcon"]
+    "icon": ["loadIcon"],
+    "ios": ["loadIcon"],
+    "md": ["loadIcon"]
   }; }
@@ -214,0 +220,0 @@ };

dist/ionicons/ionicons.esm.js

@@ -1,1 +0,1 @@
-import{p as i,b as o}from"./p-d15ec307.js";(()=>{const o=import.meta.url,e={};return""!==o&&(e.resourcesUrl=new URL(".",o).href),i(e)})().then((i=>o([["p-fe798b5f",[[1,"ion-icon",{mode:[1025],color:[1],ios:[1],md:[1],flipRtl:[4,"flip-rtl"],name:[513],src:[1],icon:[8],size:[1],lazy:[4],sanitize:[4],svgContent:[32],isVisible:[32],ariaLabel:[32]}]]]],i)));
+import{p as i,b as o}from"./p-d15ec307.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),i(s)})().then((i=>o([["p-b5b0395b",[[1,"ion-icon",{mode:[1025],color:[1],ios:[1],md:[1],flipRtl:[4,"flip-rtl"],name:[513],src:[1],icon:[8],size:[1],lazy:[4],sanitize:[4],svgContent:[32],isVisible:[32],ariaLabel:[32]}]]]],i)));

dist/ionicons/p-60d56620.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-ea7bbed1.system.js"],(function(e,t){"use strict";var r,n;return{setters:[function(e){r=e.p;n=e.b}],execute:function(){var e=function(){var e=t.meta.url;var n={};if(e!==""){n.resourcesUrl=new URL(".",e).href}return r(n)};e().then((function(e){return n([["p-e73df80b.system",[[1,"ion-icon",{mode:[1025],color:[1],ios:[1],md:[1],flipRtl:[4,"flip-rtl"],name:[513],src:[1],icon:[8],size:[1],lazy:[4],sanitize:[4],svgContent:[32],isVisible:[32],ariaLabel:[32]}]]]],e)}))}}}));
+System.register(["./p-ea7bbed1.system.js"],(function(e,t){"use strict";var r,n;return{setters:[function(e){r=e.p;n=e.b}],execute:function(){var e=function(){var e=t.meta.url;var n={};if(e!==""){n.resourcesUrl=new URL(".",e).href}return r(n)};e().then((function(e){return n([["p-f4bc651e.system",[[1,"ion-icon",{mode:[1025],color:[1],ios:[1],md:[1],flipRtl:[4,"flip-rtl"],name:[513],src:[1],icon:[8],size:[1],lazy:[4],sanitize:[4],svgContent:[32],isVisible:[32],ariaLabel:[32]}]]]],e)}))}}}));

dist/types/components/icon/validate.d.ts

 export declare const validateContent: (svgContent: string) => string;
 export declare const isValid: (elm: HTMLElement) => boolean;
+export declare const isSvgDataUrl: (url: string) => boolean;
+export declare const isEncodedDataUrl: (url: string) => boolean;

icons/index.d.ts

@@ -1,2 +0,2 @@
-/* Ionicons v6.1.1, Types */
+/* Ionicons v6.1.2-dev.11675863592.172f0936, Types */
 
@@ -3,0 +3,0 @@ export declare var accessibility: string;

icons/package.json

 {
   "name": "ionicons/icons",
-  "version": "6.1.1",
+  "version": "6.1.2-dev.11675863592.172f0936",
   "module": "index.mjs",
@@ -5,0 +5,0 @@ "main": "index.js",

package.json

 {
   "name": "ionicons",
-  "version": "6.1.1",
+  "version": "6.1.2-dev.11675863592.172f0936",
   "description": "Premium icons for Ionic.",
@@ -5,0 +5,0 @@ "files": [

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6147452

increased by0.04%

Lines of code

27134

increased by0.11%

Number of medium supply chain risk alerts

17

decreased by-5.56%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes