@iconify/react - npm Package Compare versions

Comparing version 4.0.0-beta.1 to 4.0.0-beta.2

dist/iconify.d.ts

@@ -31,3 +31,10 @@ import { IconifyIcon } from '@iconify/types';
 /**
- * Build icon
+ * Get SVG attributes and content from icon + customisations
+ *
+ * Does not generate style to make it compatible with frameworks that use objects for style, such as React.
+ * Instead, it generates 'inline' value. If true, rendering engine should add verticalAlign: -0.125em to icon.
+ *
+ * Customisations should be normalised by platform specific parser.
+ * Result should be converted to <svg> by platform specific parser.
+ * Use replaceIDs to generate unique IDs for body.
  */
@@ -57,3 +64,3 @@ export declare function buildIcon(icon: IconifyIcon, customisations?: IconifyIconCustomisations_2): IconifyIconBuildResult;
 /**
- * Get icon
+ * Get full icon
  */
@@ -140,3 +147,3 @@ export declare function getIcon(name: string): Required<IconifyIcon> | null;
     setFetch: (item: typeof fetch) => void;
-    getFetch: () => typeof fetch | null;
+    getFetch: () => typeof fetch | undefined;
     /**
@@ -334,3 +341,3 @@ * List all API providers (from config)
 /**
- * Cache for loadIcon promises
+ * Load one icon using Promise
  */
@@ -337,0 +344,0 @@ export declare const loadIcon: (icon: IconifyIconName | string) => Promise<Required<IconifyIcon>>;

dist/iconify.js

@@ -31,3 +31,3 @@ 'use strict';
     };
-    return validate && !validateIcon(result) ? null : result;
+    return validate && !validateIconName(result) ? null : result;
   }
@@ -42,3 +42,3 @@ const name = colonSeparated[0];
     };
-    return validate && !validateIcon(result) ? null : result;
+    return validate && !validateIconName(result) ? null : result;
   }
@@ -51,7 +51,7 @@ if (allowSimpleName && provider === "") {
     };
-    return validate && !validateIcon(result, allowSimpleName) ? null : result;
+    return validate && !validateIconName(result, allowSimpleName) ? null : result;
   }
   return null;
 };
-const validateIcon = (icon, allowSimpleName) => {
+const validateIconName = (icon, allowSimpleName) => {
   if (!icon) {
@@ -137,3 +137,3 @@ return false;
 
-function internalGetIconData(data, name, tree, full) {
+function internalGetIconData(data, name, tree) {
   const icons = data.icons;
@@ -147,4 +147,3 @@ const aliases = data.aliases || {};
   tree.forEach(parse);
-  currentProps = mergeIconData(data, currentProps);
-  return full ? Object.assign({}, defaultIconProps, currentProps) : currentProps;
+  return mergeIconData(data, currentProps);
 }
@@ -167,3 +166,3 @@
     if (item) {
-      callback(name, internalGetIconData(data, name, item, true));
+      callback(name, internalGetIconData(data, name, item));
       names.push(name);
@@ -246,6 +245,3 @@ }
     if (typeof icon.body === "string") {
-      storage.icons[name] = Object.freeze({
-        ...defaultIconProps,
-        ...icon
-      });
+      storage.icons[name] = { ...icon };
       return true;
@@ -279,8 +275,7 @@ }
   const icon = typeof name === "string" ? stringToIcon(name, true, simpleNames) : name;
-  if (!icon) {
-    return;
+  if (icon) {
+    const storage = getStorage(icon.provider, icon.prefix);
+    const iconName = icon.name;
+    return storage.icons[iconName] || (storage.missing.has(iconName) ? null : void 0);
   }
-  const storage = getStorage(icon.provider, icon.prefix);
-  const iconName = icon.name;
-  return storage.icons[iconName] || (storage.missing.has(iconName) ? null : void 0);
 }
@@ -314,3 +309,3 @@ function addIcon(name, data) {
   }
-  if (typeof data.prefix !== "string" || !validateIcon({
+  if (typeof data.prefix !== "string" || !validateIconName({
     provider,
@@ -330,3 +325,6 @@ prefix: data.prefix,
   const result = getIconData(name);
-  return result ? { ...result } : null;
+  return result ? {
+    ...defaultIconProps,
+    ...result
+  } : null;
 }
@@ -343,20 +341,2 @@
 
-function mergeCustomisations(defaults, item) {
-  const result = {
-    ...defaults
-  };
-  for (const key in item) {
-    const value = item[key];
-    const valueType = typeof value;
-    if (key in defaultIconSizeCustomisations) {
-      if (value === null || value && (valueType === "string" || valueType === "number")) {
-        result[key] = value;
-      }
-    } else if (valueType === typeof result[key]) {
-      result[key] = key === "rotate" ? value % 4 : value;
-    }
-  }
-  return result;
-}
-
 const unitsSplit = /(-?[0-9.]*[0-9]+[0-9.]*)/g;
@@ -402,10 +382,18 @@ const unitsTest = /^-?[0-9.]*[0-9]+[0-9.]*$/g;
 function iconToSVG(icon, customisations) {
+  const fullIcon = {
+    ...defaultIconProps,
+    ...icon
+  };
+  const fullCustomisations = {
+    ...defaultIconCustomisations,
+    ...customisations
+  };
   const box = {
-    left: icon.left,
-    top: icon.top,
-    width: icon.width,
-    height: icon.height
+    left: fullIcon.left,
+    top: fullIcon.top,
+    width: fullIcon.width,
+    height: fullIcon.height
   };
-  let body = icon.body;
-  [icon, customisations].forEach((props) => {
+  let body = fullIcon.body;
+  [fullIcon, fullCustomisations].forEach((props) => {
     const transformations = [];
@@ -462,4 +450,4 @@ const hFlip = props.hFlip;
   });
-  const customisationsWidth = customisations.width;
-  const customisationsHeight = customisations.height;
+  const customisationsWidth = fullCustomisations.width;
+  const customisationsHeight = fullCustomisations.height;
   const boxWidth = box.width;
@@ -487,6 +475,2 @@ const boxHeight = box.height;
 
-function buildIcon(icon, customisations) {
-  return iconToSVG({ ...defaultIconProps, ...icon }, mergeCustomisations(defaultIconCustomisations, customisations || {}));
-}
-
 const regex = /\sid="(\S+)"/g;
@@ -842,4 +826,4 @@ const randomPrefix = "IconifyId" + Date.now().toString(16) + (Math.random() * 16777216 | 0).toString(16);
   list.forEach((item) => {
-    const icon = typeof item === "string" ? stringToIcon(item, false, simpleNames) : { ...item };
-    if (!validate || validateIcon(icon, simpleNames)) {
+    const icon = typeof item === "string" ? stringToIcon(item, validate, simpleNames) : { ...item };
+    if (icon) {
       result.push(icon);
@@ -1406,2 +1390,3 @@ }
           fulfill({
+            ...defaultIconProps,
             ...data
@@ -1431,2 +1416,20 @@ });
 
+function mergeCustomisations(defaults, item) {
+  const result = {
+    ...defaults
+  };
+  for (const key in item) {
+    const value = item[key];
+    const valueType = typeof value;
+    if (key in defaultIconSizeCustomisations) {
+      if (value === null || value && (valueType === "string" || valueType === "number")) {
+        result[key] = value;
+      }
+    } else if (valueType === typeof result[key]) {
+      result[key] = key === "rotate" ? value % 4 : value;
+    }
+  }
+  return result;
+}
+
 const separator = /[\s,]+/;
@@ -1804,3 +1807,3 @@ function flipFromString(custom, flip) {
                 this._setData({
-                    data: { ...defaultIconProps, ...icon },
+                    data: icon,
                 });
@@ -1903,3 +1906,6 @@ }
         // Render icon
-        return render(icon.data, newProps, props._inline, props._ref);
+        return render({
+            ...defaultIconProps,
+            ...icon.data,
+        }, newProps, props._inline, props._ref);
     }
@@ -1947,3 +1953,3 @@ }
 exports.addIcon = addIcon;
-exports.buildIcon = buildIcon;
+exports.buildIcon = iconToSVG;
 exports.calculateSize = calculateSize;
@@ -1950,0 +1956,0 @@ exports.disableCache = disableCache;

dist/offline.js

@@ -85,3 +85,3 @@ 'use strict';
 
-function internalGetIconData(data, name, tree, full) {
+function internalGetIconData(data, name, tree) {
   const icons = data.icons;
@@ -95,4 +95,3 @@ const aliases = data.aliases || {};
   tree.forEach(parse);
-  currentProps = mergeIconData(data, currentProps);
-  return full ? Object.assign({}, defaultIconProps, currentProps) : currentProps;
+  return mergeIconData(data, currentProps);
 }
@@ -115,3 +114,3 @@
     if (item) {
-      callback(name, internalGetIconData(data, name, item, true));
+      callback(name, internalGetIconData(data, name, item));
       names.push(name);
@@ -282,10 +281,18 @@ }
 function iconToSVG(icon, customisations) {
+  const fullIcon = {
+    ...defaultIconProps,
+    ...icon
+  };
+  const fullCustomisations = {
+    ...defaultIconCustomisations,
+    ...customisations
+  };
   const box = {
-    left: icon.left,
-    top: icon.top,
-    width: icon.width,
-    height: icon.height
+    left: fullIcon.left,
+    top: fullIcon.top,
+    width: fullIcon.width,
+    height: fullIcon.height
   };
-  let body = icon.body;
-  [icon, customisations].forEach((props) => {
+  let body = fullIcon.body;
+  [fullIcon, fullCustomisations].forEach((props) => {
     const transformations = [];
@@ -342,4 +349,4 @@ const hFlip = props.hFlip;
   });
-  const customisationsWidth = customisations.width;
-  const customisationsHeight = customisations.height;
+  const customisationsWidth = fullCustomisations.width;
+  const customisationsHeight = fullCustomisations.height;
   const boxWidth = box.width;
@@ -602,6 +609,7 @@ const boxHeight = box.height;
     // Split properties
-    const icon = typeof props.icon === 'string'
-        ? storage[props.icon]
-        : typeof props.icon === 'object'
-            ? { ...defaultIconProps, ...props.icon }
+    const propsIcon = props.icon;
+    const icon = typeof propsIcon === 'string'
+        ? storage[propsIcon]
+        : typeof propsIcon === 'object'
+            ? propsIcon
             : null;
@@ -617,3 +625,6 @@ // Validate icon object
     // Valid icon: render it
-    return render(icon, props, inline, ref);
+    return render({
+        ...defaultIconProps,
+        ...icon,
+    }, props, inline, ref);
 }
@@ -643,3 +654,3 @@ /**
 function addIcon(name, data) {
-    storage[name] = { ...defaultIconProps, ...data };
+    storage[name] = data;
 }
@@ -646,0 +657,0 @@ /**

package.json

@@ -5,3 +5,3 @@ {
   "author": "Vjacheslav Trushkin",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0-beta.2",
   "license": "MIT",
@@ -43,4 +43,4 @@ "bugs": "https://github.com/iconify/iconify/issues",
     "@babel/preset-react": "^7.17.12",
-    "@iconify/core": "^2.0.0-beta.1",
-    "@iconify/utils": "^2.0.0-beta.3",
+    "@iconify/core": "^2.0.0-beta.3",
+    "@iconify/utils": "^2.0.0-beta.4",
     "@microsoft/api-extractor": "^7.25.2",
@@ -47,0 +47,0 @@ "@rollup/plugin-node-resolve": "^13.3.0",

No alert changes

Improved metrics

Total package byte prevSize

173908

increased by0.34%

Lines of code

5508

increased by0.79%

No dependency changes