@iconify/react - npm Package Compare versions

Comparing version 4.1.0 to 4.1.1-beta.1

dist/iconify.js

@@ -21,2 +21,3 @@ 'use strict';
     const result = {
+      // Allow provider without '@': "provider:prefix:name"
       provider: colonSeparated.length > 0 ? colonSeparated[0] : provider,
@@ -338,3 +339,5 @@ prefix,
 const defaultIconCustomisations = Object.freeze({
+  // Dimensions
   ...defaultIconSizeCustomisations,
+  // Transformations
   ...defaultIconTransformations
@@ -506,2 +509,4 @@ });
     body = body.replace(
+      // Allowed characters before id: [#;"]
+      // Allowed characters after id: [)"], .[a-z]
       new RegExp('([#;"])(' + escapedID + ')([")]|\\.[a-z])', "g"),
@@ -534,9 +539,17 @@ "$1" + newID + suffix + "$3"
   const result = {
+    // API hosts
     resources,
+    // Root path
     path: source.path || "/",
+    // URL length limit
     maxURL: source.maxURL || 500,
+    // Timeout before next host is used.
     rotate: source.rotate || 750,
+    // Timeout before failing query.
     timeout: source.timeout || 5e3,
+    // Randomise default API end point.
     random: source.random === true,
+    // Start index
     index: source.index || 0,
+    // Receive data after time out (used if time out kicks in first, then API module sends data anyway).
     dataAfterTimeout: source.dataAfterTimeout !== false
@@ -1201,3 +1214,4 @@ };
       const data = JSON.parse(item);
-      if (typeof data === "object" && typeof data.cached === "number" && data.cached > minTime && typeof data.provider === "string" && typeof data.data === "object" && typeof data.data.prefix === "string" && callback(data, index)) {
+      if (typeof data === "object" && typeof data.cached === "number" && data.cached > minTime && typeof data.provider === "string" && typeof data.data === "object" && typeof data.data.prefix === "string" && // Valid item: run callback
+      callback(data, index)) {
         return true;
@@ -1248,3 +1262,6 @@ }
   const lastValue = storage.lastModifiedCached;
-  if (lastValue && lastValue >= lastModified) {
+  if (
+    // Matches or newer
+    lastValue && lastValue >= lastModified
+  ) {
     return lastValue === lastModified;
@@ -1536,6 +1553,27 @@ }
 }
+function svgToData(svg) {
+  return "data:image/svg+xml," + encodeSVGforURL(svg);
+}
 function svgToURL(svg) {
-  return 'url("data:image/svg+xml,' + encodeSVGforURL(svg) + '")';
+  return 'url("' + svgToData(svg) + '")';
 }
 
+let policy;
+function createPolicy() {
+  try {
+    policy = window.trustedTypes.createPolicy("iconify", {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      createHTML: (s) => s
+    });
+  } catch (err) {
+    policy = null;
+  }
+}
+function cleanUpInnerHTML(html) {
+  if (policy === void 0) {
+    createPolicy();
+  }
+  return policy ? policy.createHTML(html) : html;
+}
+
 const defaultExtendedIconCustomisations = {
@@ -1574,3 +1612,3 @@ ...defaultIconCustomisations,
 const propsToAddTo = {
-    webkitMask: monotoneProps,
+    WebkitMask: monotoneProps,
     mask: monotoneProps,
@@ -1706,3 +1744,3 @@ background: coloredProps,
         componentProps.dangerouslySetInnerHTML = {
-            __html: replaceIDs(item.body, id ? () => id + 'ID' + localCounter++ : 'iconifyReact'),
+            __html: cleanUpInnerHTML(replaceIDs(item.body, id ? () => id + 'ID' + localCounter++ : 'iconifyReact')),
         };
@@ -1709,0 +1747,0 @@ return React.createElement('svg', componentProps);

dist/offline.js

@@ -174,3 +174,5 @@ 'use strict';
 const defaultIconCustomisations = Object.freeze({
+  // Dimensions
   ...defaultIconSizeCustomisations,
+  // Transformations
   ...defaultIconTransformations
@@ -407,2 +409,4 @@ });
     body = body.replace(
+      // Allowed characters before id: [#;"]
+      // Allowed characters after id: [)"], .[a-z]
       new RegExp('([#;"])(' + escapedID + ')([")]|\\.[a-z])', "g"),
@@ -427,6 +431,27 @@ "$1" + newID + suffix + "$3"
 }
+function svgToData(svg) {
+  return "data:image/svg+xml," + encodeSVGforURL(svg);
+}
 function svgToURL(svg) {
-  return 'url("data:image/svg+xml,' + encodeSVGforURL(svg) + '")';
+  return 'url("' + svgToData(svg) + '")';
 }
 
+let policy;
+function createPolicy() {
+  try {
+    policy = window.trustedTypes.createPolicy("iconify", {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      createHTML: (s) => s
+    });
+  } catch (err) {
+    policy = null;
+  }
+}
+function cleanUpInnerHTML(html) {
+  if (policy === void 0) {
+    createPolicy();
+  }
+  return policy ? policy.createHTML(html) : html;
+}
+
 const defaultExtendedIconCustomisations = {
@@ -465,3 +490,3 @@ ...defaultIconCustomisations,
 const propsToAddTo = {
-    webkitMask: monotoneProps,
+    WebkitMask: monotoneProps,
     mask: monotoneProps,
@@ -597,3 +622,3 @@ background: coloredProps,
         componentProps.dangerouslySetInnerHTML = {
-            __html: replaceIDs(item.body, id ? () => id + 'ID' + localCounter++ : 'iconifyReact'),
+            __html: cleanUpInnerHTML(replaceIDs(item.body, id ? () => id + 'ID' + localCounter++ : 'iconifyReact')),
         };
@@ -600,0 +625,0 @@ return React.createElement('svg', componentProps);

license.txt

 MIT License
 
-Copyright (c) 2019 - 2022 Vjacheslav Trushkin / Iconify OÜ
+Copyright (c) 2019-PRESENT Vjacheslav Trushkin
 
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

package.json

@@ -5,3 +5,3 @@ {
   "author": "Vjacheslav Trushkin",
-  "version": "4.1.0",
+  "version": "4.1.1-beta.1",
   "license": "MIT",
@@ -41,16 +41,16 @@ "bugs": "https://github.com/iconify/iconify/issues",
   "devDependencies": {
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@microsoft/api-extractor": "^7.33.7",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@types/react": "^18.0.26",
-    "babel-jest": "^29.3.1",
-    "jest": "^29.3.1",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
+    "@microsoft/api-extractor": "^7.35.1",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@types/react": "^18.2.8",
+    "babel-jest": "^29.5.0",
+    "jest": "^29.5.0",
     "react": "^18.2.0",
     "react-test-renderer": "^18.2.0",
-    "rimraf": "^3.0.2",
-    "rollup": "^3.8.1",
-    "typescript": "^4.9.4",
+    "rimraf": "^4.4.1",
+    "rollup": "^3.23.1",
+    "typescript": "^5.1.3",
     "@iconify/core": "^2.0.1",
-    "@iconify/utils": "^2.1.0"
+    "@iconify/utils": "^2.1.6"
   },
@@ -57,0 +57,0 @@ "peerDependencies": {

readme.md

@@ -14,3 +14,3 @@ # Iconify for React
 
--   One syntax for over 100,000 icons from 100+ icon sets.
+-   One syntax for over 150,000 icons from 100+ icon sets.
 -   Renders SVG. Many components simply render icon fonts, which look ugly. Iconify renders pixel perfect SVG.
@@ -21,3 +21,3 @@ -   Loads icons on demand. No need to bundle icons, component will automatically load icon data for icons that you use from Iconify API.
 
-For extended documentation visit [Iconify for React documentation](https://docs.iconify.design/icon-components/react/).
+For extended documentation visit [Iconify for React documentation](https://iconify.design/docs/icon-components/react/).
 
@@ -52,16 +52,10 @@ ## Installation
 
-Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 100,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
+Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 150,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
 
-## Offline Usage
+## Offline usage
 
-Retrieving icon data from Iconify API requires visitor to be online. What if you want to use component offline or on local network?
+This icon component is designed to be used with Iconify API, loading icon data on demand instead of bundling it.
 
-If you want to use icon component without relying on public Iconify API, there are several options:
+If you want to use icons without Iconify API, [there are many other options available](https://iconify.design/docs/usage/).
 
-1. You can import icon data from Iconify Icons packages.
-2. You can create custom icon bundles (more efficient, but requires more coding).
-3. You can host your own Iconify API instead of relying on third party service.
-
-See [Iconify for React offline use documentation](https://docs.iconify.design/icon-components/react/offline.html) or [Iconify API documentation](https://docs.iconify.design/sources/api/).
-
 ## Icon Names
@@ -80,3 +74,3 @@
 
-See [Iconify for React icon names documentation](https://docs.iconify.design/icon-components/react/icon-name.html) for more detailed explanation.
+See [Iconify for React icon names documentation](https://iconify.design/docs/icon-components/react/icon-name.html) for more detailed explanation.
 
@@ -96,3 +90,3 @@ ## Using icon data
 
-See [icon packages documentation](https://docs.iconify.design/sources/npm/) for more details.
+See [icon packages documentation](https://iconify.design/docs/icons/) for more details.
 
@@ -117,5 +111,5 @@ ### Next.js notice
 
-For more details, see [icon packages documentation](https://docs.iconify.design/sources/npm/).
+For more details, see [icon packages documentation](https://iconify.design/docs/icons/).
 
-## Inline icon
+## Vertical alignment
 
@@ -310,3 +304,3 @@ Icons have 2 modes: inline and block. Difference between modes is `vertical-align` that is added to inline icons.
 
-See [icon transformations documentation](https://docs.iconify.design/icon-components/react/transform.html) for more details.
+See [icon transformations documentation](https://iconify.design/docs/icon-components/react/transform.html) for more details.
 
@@ -376,3 +370,3 @@ #### Flipping an icon
 
-For extended documentation visit [Iconify for React documentation](https://docs.iconify.design/icon-components/react/).
+For extended documentation visit [Iconify for React documentation](https://iconify.design/docs/icon-components/react/).
 
@@ -383,4 +377,4 @@ ## License
 
-© 2019 - 2022 Vjacheslav Trushkin / Iconify OÜ
+© 2019-PRESENT Vjacheslav Trushkin
 
 See [Iconify icon sets page](https://icon-sets.iconify.design/) for list of collections and their licenses.

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

179271

increased by1.6%

Lines of code

5847

increased by2.13%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

372

decreased by-1.59%

No dependency changes