ionicons - npm Package Compare versions

Comparing version 6.0.3 to 6.1.0-0

components/index.d.ts

 /* ionicons custom elements */
+export { Icon as IonIcon } from '../dist/types/components/icon/icon';
 
-import type { Components, JSX } from "../dist/types/components";
-
 /**
@@ -23,5 +22,2 @@ * Used to manually set the base path where assets can be found.
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-
-export type { Components, JSX };
-
 export * from '../dist/types';

components/index.js

 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-export { a as addIcons } from './utils.js';
+export { IonIcon, a as addIcons, defineCustomElement as defineCustomElementIonIcon } from './ion-icon.js';

components/ion-icon.js

@@ -1,4 +0,114 @@
-import { proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
-import { i as isStr, b as inheritAttributes, g as getUrl, c as getName } from './utils.js';
+import { getAssetPath, proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
 
+let CACHED_MAP;
+const getIconMap = () => {
+  if (typeof window === 'undefined') {
+    return new Map();
+  }
+  else {
+    if (!CACHED_MAP) {
+      const win = window;
+      win.Ionicons = win.Ionicons || {};
+      CACHED_MAP = win.Ionicons.map = win.Ionicons.map || new Map();
+    }
+    return CACHED_MAP;
+  }
+};
+const addIcons = (icons) => {
+  const map = getIconMap();
+  Object.keys(icons).forEach(name => map.set(name, icons[name]));
+};
+const getUrl = (i) => {
+  let url = getSrc(i.src);
+  if (url) {
+    return url;
+  }
+  url = getName(i.name, i.icon, i.mode, i.ios, i.md);
+  if (url) {
+    return getNamedUrl(url);
+  }
+  if (i.icon) {
+    url = getSrc(i.icon);
+    if (url) {
+      return url;
+    }
+    url = getSrc(i.icon[i.mode]);
+    if (url) {
+      return url;
+    }
+  }
+  return null;
+};
+const getNamedUrl = (iconName) => {
+  const url = getIconMap().get(iconName);
+  if (url) {
+    return url;
+  }
+  return getAssetPath(`svg/${iconName}.svg`);
+};
+const getName = (iconName, icon, mode, ios, md) => {
+  // default to "md" if somehow the mode wasn't set
+  mode = (mode && toLower(mode)) === 'ios' ? 'ios' : 'md';
+  // if an icon was passed in using the ios or md attributes
+  // set the iconName to whatever was passed in
+  if (ios && mode === 'ios') {
+    iconName = toLower(ios);
+  }
+  else if (md && mode === 'md') {
+    iconName = toLower(md);
+  }
+  else {
+    if (!iconName && icon && !isSrc(icon)) {
+      iconName = icon;
+    }
+    if (isStr(iconName)) {
+      iconName = toLower(iconName);
+    }
+  }
+  if (!isStr(iconName) || iconName.trim() === '') {
+    return null;
+  }
+  // only allow alpha characters and dash
+  const invalidChars = iconName.replace(/[a-z]|-|\d/gi, '');
+  if (invalidChars !== '') {
+    return null;
+  }
+  return iconName;
+};
+const getSrc = (src) => {
+  if (isStr(src)) {
+    src = src.trim();
+    if (isSrc(src)) {
+      return src;
+    }
+  }
+  return null;
+};
+const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
+const isStr = (val) => typeof val === 'string';
+const toLower = (val) => val.toLowerCase();
+/**
+ * Elements inside of web components sometimes need to inherit global attributes
+ * set on the host. For example, the inner input in `ion-input` should inherit
+ * the `title` attribute that developers set directly on `ion-input`. This
+ * helper function should be called in componentWillLoad and assigned to a variable
+ * that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+const inheritAttributes = (el, attributes = []) => {
+  const attributeObject = {};
+  attributes.forEach(attr => {
+    if (el.hasAttribute(attr)) {
+      const value = el.getAttribute(attr);
+      if (value !== null) {
+        attributeObject[attr] = el.getAttribute(attr);
+      }
+      el.removeAttribute(attr);
+    }
+  });
+  return attributeObject;
+};
+
 const validateContent = (svgContent) => {
@@ -80,2 +190,3 @@ const div = document.createElement('div');
 
+let parser;
 const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -147,2 +258,9 @@ 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);
@@ -154,2 +272,12 @@ 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 {
@@ -236,2 +364,2 @@ // async if it hasn't been loaded
 
-export { IonIcon, defineCustomElement };
+export { IonIcon, addIcons as a, defineCustomElement };

dist/cjs/index.cjs.js

@@ -5,4 +5,4 @@ 'use strict';
 
-const utils = require('./utils-314500db.js');
-require('./index-1bc7b418.js');
+const utils = require('./utils-a8d1f326.js');
+require('./index-53856ad1.js');
 
@@ -9,0 +9,0 @@

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

@@ -5,4 +5,4 @@ 'use strict';
 
-const index = require('./index-1bc7b418.js');
-const utils = require('./utils-314500db.js');
+const index = require('./index-53856ad1.js');
+const utils = require('./utils-a8d1f326.js');
 
@@ -85,2 +85,3 @@ const validateContent = (svgContent) => {
 
+let parser;
 const Icon = class {
@@ -150,2 +151,9 @@ 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);
@@ -157,2 +165,12 @@ 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 {
@@ -159,0 +177,0 @@ // async if it hasn't been loaded

dist/cjs/ionicons.cjs.js

 'use strict';
 
-const index = require('./index-1bc7b418.js');
+const index = require('./index-53856ad1.js');
 
 /*
- Stencil Client Patch Browser v2.16.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.18.0 | MIT Licensed | https://stenciljs.com
  */
@@ -8,0 +8,0 @@ const patchBrowser = () => {

dist/cjs/loader.cjs.js

@@ -5,6 +5,6 @@ 'use strict';
 
-const index = require('./index-1bc7b418.js');
+const index = require('./index-53856ad1.js');
 
 /*
- Stencil Client Patch Esm v2.16.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.18.0 | MIT Licensed | https://stenciljs.com
  */
@@ -11,0 +11,0 @@ const patchEsm = () => {

dist/collection/collection-manifest.json

@@ -7,4 +7,4 @@ {
     "name": "@stencil/core",
-    "version": "2.16.0",
-    "typescriptVersion": "4.5.4"
+    "version": "2.18.0",
+    "typescriptVersion": "4.7.4"
   },
@@ -11,0 +11,0 @@ "collections": [],

dist/collection/components/icon/icon.js

@@ -1,4 +0,5 @@
-import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
+import { Build, Host, h } from '@stencil/core';
 import { getSvgContent, ioniconContent } from './request';
 import { getName, getUrl, inheritAttributes } from './utils';
+let parser;
 export class Icon {
@@ -67,2 +68,9 @@ 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);
@@ -74,2 +82,12 @@ 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 {
@@ -108,220 +126,230 @@ // async if it hasn't been loaded
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["icon.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["icon.css"]
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["icon.css"]
+    };
+  }
   static get assetsDirs() { return ["svg"]; }
-  static get properties() { return {
-    "mode": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get properties() {
+    return {
+      "mode": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The mode determines which platform styles to use."
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "getIonMode()"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The mode determines which platform styles to use."
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The color to use for the background of the item."
+        },
+        "attribute": "color",
+        "reflect": false
       },
-      "attribute": "mode",
-      "reflect": false,
-      "defaultValue": "getIonMode()"
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
+      "ios": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies which icon to use on `ios` mode."
+        },
+        "attribute": "ios",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The color to use for the background of the item."
+      "md": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies which icon to use on `md` mode."
+        },
+        "attribute": "md",
+        "reflect": false
       },
-      "attribute": "color",
-      "reflect": false
-    },
-    "ios": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
+      "flipRtl": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`."
+        },
+        "attribute": "flip-rtl",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies which icon to use on `ios` mode."
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies which icon to use from the built-in set of icons."
+        },
+        "attribute": "name",
+        "reflect": true
       },
-      "attribute": "ios",
-      "reflect": false
-    },
-    "md": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the exact `src` of an SVG file to use."
+        },
+        "attribute": "src",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies which icon to use on `md` mode."
+      "icon": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A combination of both `name` and `src`. If a `src` url is detected\nit will set the `src` property. Otherwise it assumes it's a built-in named\nSVG and set the `name` property."
+        },
+        "attribute": "icon",
+        "reflect": false
       },
-      "attribute": "md",
-      "reflect": false
-    },
-    "flipRtl": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The size of the icon.\nAvailable options are: `\"small\"` and `\"large\"`."
+        },
+        "attribute": "size",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`."
+      "lazy": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If enabled, ion-icon will be loaded lazily when it's visible in the viewport.\nDefault, `false`."
+        },
+        "attribute": "lazy",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "flip-rtl",
-      "reflect": false
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies which icon to use from the built-in set of icons."
-      },
-      "attribute": "name",
-      "reflect": true
-    },
-    "src": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the exact `src` of an SVG file to use."
-      },
-      "attribute": "src",
-      "reflect": false
-    },
-    "icon": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "A combination of both `name` and `src`. If a `src` url is detected\nit will set the `src` property. Otherwise it assumes it's a built-in named\nSVG and set the `name` property."
-      },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The size of the icon.\nAvailable options are: `\"small\"` and `\"large\"`."
-      },
-      "attribute": "size",
-      "reflect": false
-    },
-    "lazy": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If enabled, ion-icon will be loaded lazily when it's visible in the viewport.\nDefault, `false`."
-      },
-      "attribute": "lazy",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "sanitize": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "true"
-          }],
-        "text": "When set to `false`, SVG content that is HTTP fetched will not be checked\nif the response SVG content has any `<script>` elements, or any attributes\nthat start with `on`, such as `onclick`."
-      },
-      "attribute": "sanitize",
-      "reflect": false,
-      "defaultValue": "true"
-    }
-  }; }
-  static get states() { return {
-    "svgContent": {},
-    "isVisible": {},
-    "ariaLabel": {}
-  }; }
+      "sanitize": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "true"
+            }],
+          "text": "When set to `false`, SVG content that is HTTP fetched will not be checked\nif the response SVG content has any `<script>` elements, or any attributes\nthat start with `on`, such as `onclick`."
+        },
+        "attribute": "sanitize",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "svgContent": {},
+      "isVisible": {},
+      "ariaLabel": {}
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "name",
-      "methodName": "loadIcon"
-    }, {
-      "propName": "src",
-      "methodName": "loadIcon"
-    }, {
-      "propName": "icon",
-      "methodName": "loadIcon"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "name",
+        "methodName": "loadIcon"
+      }, {
+        "propName": "src",
+        "methodName": "loadIcon"
+      }, {
+        "propName": "icon",
+        "methodName": "loadIcon"
+      }];
+  }
 }
@@ -328,0 +356,0 @@ const getIonMode = () => (Build.isBrowser && typeof document !== 'undefined' && document.documentElement.getAttribute('mode')) || 'md';

dist/esm-es5/index.js

@@ -1,1 +0,1 @@
-export{a as addIcons}from"./utils-40a8b8f4.js";import"./index-14843ae0.js";
+export{a as addIcons}from"./utils-de37ab82.js";import"./index-5514a13d.js";

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

@@ -1,1 +0,1 @@
-import{r as registerInstance,h,H as Host,a as getElement}from"./index-14843ae0.js";import{i as isStr,b as inheritAttributes,g as getUrl,c as getName}from"./utils-40a8b8f4.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 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.inheritedAttributes;var s=this.mode||"md";var a=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[s]=true,e),createColorClasses(this.color)),(t={},t["icon-".concat(this.size)]=!!this.size,t["flip-rtl"]=!!a&&this.el.ownerDocument.dir==="rtl",t))},r),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}from"./utils-de37ab82.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.inheritedAttributes;var s=this.mode||"md";var a=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[s]=true,e),createColorClasses(this.color)),(t={},t["icon-".concat(this.size)]=!!this.size,t["flip-rtl"]=!!a&&this.el.ownerDocument.dir==="rtl",t))},r),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};

dist/esm-es5/ionicons.js

@@ -1,1 +0,1 @@
-import{p as promiseResolve,b as bootstrapLazy}from"./index-14843ae0.js";var patchBrowser=function(){var r=import.meta.url;var o={};if(r!==""){o.resourcesUrl=new URL(".",r).href}return promiseResolve(o)};patchBrowser().then((function(r){return bootstrapLazy([["ion-icon",[[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]}]]]],r)}));
+import{p as promiseResolve,b as bootstrapLazy}from"./index-5514a13d.js";var patchBrowser=function(){var r=import.meta.url;var o={};if(r!==""){o.resourcesUrl=new URL(".",r).href}return promiseResolve(o)};patchBrowser().then((function(r){return bootstrapLazy([["ion-icon",[[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]}]]]],r)}));

dist/esm-es5/loader.js

@@ -1,1 +0,1 @@
-import{p as promiseResolve,b as bootstrapLazy}from"./index-14843ae0.js";var patchEsm=function(){return promiseResolve()};var defineCustomElements=function(e,o){if(typeof window==="undefined")return Promise.resolve();return patchEsm().then((function(){return bootstrapLazy([["ion-icon",[[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]}]]]],o)}))};export{defineCustomElements};
+import{p as promiseResolve,b as bootstrapLazy}from"./index-5514a13d.js";var patchEsm=function(){return promiseResolve()};var defineCustomElements=function(e,o){if(typeof window==="undefined")return Promise.resolve();return patchEsm().then((function(){return bootstrapLazy([["ion-icon",[[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]}]]]],o)}))};export{defineCustomElements};

dist/esm/index.js

@@ -1,2 +0,2 @@
-export { a as addIcons } from './utils-40a8b8f4.js';
-import './index-14843ae0.js';
+export { a as addIcons } from './utils-de37ab82.js';
+import './index-5514a13d.js';

dist/esm/ion-icon.entry.js

@@ -1,3 +0,3 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-14843ae0.js';
-import { i as isStr, b as inheritAttributes, g as getUrl, c as getName } from './utils-40a8b8f4.js';
+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 } from './utils-de37ab82.js';
 
@@ -80,2 +80,3 @@ const validateContent = (svgContent) => {
 
+let parser;
 const Icon = class {
@@ -145,2 +146,9 @@ 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);
@@ -152,2 +160,12 @@ 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 {
@@ -154,0 +172,0 @@ // async if it hasn't been loaded

dist/esm/ionicons.js

@@ -1,5 +0,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-14843ae0.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-5514a13d.js';
 
 /*
- Stencil Client Patch Browser v2.16.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.18.0 | MIT Licensed | https://stenciljs.com
  */
@@ -6,0 +6,0 @@ const patchBrowser = () => {

dist/esm/loader.js

@@ -1,5 +0,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-14843ae0.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-5514a13d.js';
 
 /*
- Stencil Client Patch Esm v2.16.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.18.0 | MIT Licensed | https://stenciljs.com
  */
@@ -6,0 +6,0 @@ const patchEsm = () => {

dist/ionicons/index.esm.js

@@ -1,1 +0,1 @@
-export{a as addIcons}from"./p-3812b620.js";import"./p-9857dedb.js";
+export{a as addIcons}from"./p-1e4a4451.js";import"./p-d15ec307.js";

dist/ionicons/ionicons.esm.js

@@ -1,1 +0,1 @@
-import{p as i,b as o}from"./p-9857dedb.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),i(s)})().then((i=>o([["p-cb0fdd1a",[[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-6d01f562",[[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/loader/package.json

 {
   "name": "ionicons-loader",
+  "private": true,
   "typings": "./index.d.ts",
@@ -4,0 +5,0 @@ "module": "./index.js",

icons/index.d.ts

@@ -1,2 +0,2 @@
-/* Ionicons v6.0.3, Types */
+/* Ionicons v6.1.0-0, Types */
 
@@ -3,0 +3,0 @@ export declare var accessibility: string;

icons/package.json

 {
   "name": "ionicons/icons",
-  "version": "6.0.3",
+  "version": "6.1.0-0",
   "module": "index.mjs",
@@ -5,0 +5,0 @@ "main": "index.js",

package.json

 {
   "name": "ionicons",
-  "version": "6.0.3",
+  "version": "6.1.0-0",
   "description": "Premium icons for Ionic.",
@@ -27,5 +27,6 @@ "files": [
   "dependencies": {
-    "@stencil/core": "~2.16.0"
+    "@stencil/core": "^2.18.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.26.1",
     "@types/fs-extra": "^9.0.6",
@@ -39,2 +40,4 @@ "@types/jest": "^26.0.20",
     "np": "^7.2.0",
+    "serve": "^14.0.1",
+    "puppeteer": "^10.4.0",
     "svgo": "1.3.2",
@@ -41,0 +44,0 @@ "typescript": "^4.1.3"

readme.md

@@ -29,3 +29,3 @@ # Ionicons
 ```html
-<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
+<script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>
 ```
@@ -32,0 +32,0 @@

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

Improved metrics

Total package byte prevSize

6379782

increased by0.46%

Number of package files

4091

increased by0.22%

Lines of code

27461

increased by1.95%

Worsened metrics

Dev dependency count

13

increased by30%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@stencil/core@2.22.3(transitive)

• - Removed@stencil/core@2.16.1(transitive)

• Updated@stencil/core@^2.18.0