@iconify/react - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

dist/icon.js

@@ -12,3 +12,3 @@ "use strict";
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -71,4 +71,15 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function normalize(data) {
-  var item = Object.assign(Object.create(null), defaultAttributes, data);
+  // Object.create, compatible with IE11
+  var item = Object.create(null);
+  var key;
 
+  for (key in defaultAttributes) {
+    item[key] = defaultAttributes[key];
+  }
+
+  for (key in data) {
+    item[key] = data[key];
+  } // Attributes derived from other attributes
+
+
   if (item.inlineTop === void 0) {
@@ -606,11 +617,23 @@ item.inlineTop = item.top;
   if (props.style !== void 0) {
-    style = Object.assign(style, props.style);
+    for (var _key in props.style) {
+      style[_key] = props.style[_key];
+    }
   } // Generate element attributes
 
 
-  var attributes = Object.assign({
+  var attributes = {
     xmlns: 'http://www.w3.org/2000/svg',
     focusable: false,
     style: style
-  }, customAttributes, iconData.attributes);
+  };
+  var key;
+
+  for (key in customAttributes) {
+    attributes[key] = customAttributes[key];
+  }
+
+  for (key in iconData.attributes) {
+    attributes[key] = iconData.attributes[key];
+  }
+
   attributes.dangerouslySetInnerHTML = {
@@ -617,0 +640,0 @@ __html: iconData.body

package.json

@@ -5,3 +5,3 @@ {
 	"author": "Vjacheslav Trushkin",
-	"version": "1.1.1",
+	"version": "1.1.2",
 	"license": "MIT",
@@ -20,9 +20,9 @@ "bugs": "https://github.com/iconify/iconify-react/issues",
 	"dependencies": {
-		"react": "^16.8.3"
+		"react": "^16.12.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.5.4",
-		"@babel/preset-env": "^7.5.4",
+		"@babel/core": "^7.8.4",
+		"@babel/preset-env": "^7.8.4",
 		"babel-plugin-transform-react-jsx": "^6.24.1"
 	}
 }

readme.md

@@ -12,3 +12,4 @@ # Iconify for React
 If you are using NPM:
-```
+
+```bash
 npm install @iconify/react
@@ -18,12 +19,14 @@ ```
 If you are using Yarn:
-```
+
+```bash
 yarn add @iconify/react
 ```
 
-Package does not include icons. Icons are split into separate packages that available at NPM. See below.
+This package does not include icons. Icons are split into separate packages that available at NPM. See below.
 
 ## Usage
 
-Install `@iconify/react` and package for selected icons set, import Icon and/or InlineIcon from `@iconify/react` and icon data for icon you want to use:
-```
+Install `@iconify/react` and packages for selected icon sets. Import Icon and/or InlineIcon from `@iconify/react` and icon data for icon you want to use:
+
+```typescript
 import { Icon, InlineIcon } from "@iconify/react";
@@ -33,4 +36,6 @@ import home from "@iconify/icons-mdi-light/home";
 ```
+
 Then use Icon or InlineIcon component with icon data as "icon" parameter:
-```
+
+```html
 <Icon icon={home} />
@@ -42,3 +47,3 @@ <p>This is some text with <InlineIcon icon={faceWithMonocle} /></p>
 
-Both components are the same, the only difference is InlineIcon has negative vertical alignment, so it behaves like glyph.
+Both components are the same, the only difference is InlineIcon has negative vertical alignment, so it behaves like a glyph.
 
@@ -52,2 +57,3 @@ Use Icon for decorations, InlineIcon if you are migrating from glyph font.
 Custom properties:
+
 * icon - required property, value is icon data.
@@ -67,16 +73,14 @@ * width, height - width and/or height of icon. If one attribute is set, other attribute will be calculated using width/height ratio of icon. Default value is "1em".
 
-## Icon packages
+## Icon Packages
 
-As of version 1.1.0 this package no longer includes icons. There are over 40k icons, each in its won file. That takes a lot of disc space.
-Because of that icons were moved to multiple separate packages, one package per icon set.
+As of version 1.1.0 this package no longer includes icons. There are over 40k icons, each in its own file. That takes a lot of disc space. Because of that icons were moved to multiple separate packages, one package per icon set.
 
 You can find all available icons at https://iconify.design/icon-sets/
 
-Browse or search icons, click any icon and you will see "React" tab that will give you exact code for React component.
+Browse or search icons, click any icon and you will see a "React" tab that will give you exact code for the React component.
 
-Import format for each icon is "@iconify/icon-{prefix}/{icon}" where {prefix} is collection prefix, {icon} is icon name.
+Import format for each icon is "@iconify/icon-{prefix}/{icon}" where {prefix} is collection prefix, and {icon} is the icon name.
 
-Usage examples for few popular icon packages:
+Usage examples for a few popular icon packages:
 
-
 ### Material Design Icons
@@ -89,7 +93,10 @@
 Installation:
-```
+
+```bash
 npm install @iconify/icons-mdi
 ```
+
 Usage:
-```
+
+```typescript
 import { Icon, InlineIcon } from "@iconify/react";
@@ -99,3 +106,4 @@ import home from "@iconify/icons-mdi/home";
 ```
-```
+
+```html
 <Icon icon={home} />
@@ -105,3 +113,2 @@ <p>This is some text with <InlineIcon icon={accountCheck} /></p>
 
-
 ### Simple Icons (big collection of logos)
@@ -114,7 +121,10 @@
 Installation:
-```
+
+```bash
 npm install @iconify/icons-mdi
 ```
+
 Usage:
-```
+
+```typescript
 import { Icon, InlineIcon } from "@iconify/react";
@@ -124,3 +134,4 @@ import behanceIcon from "@iconify/icons-simple-icons/behance";
 ```
-```
+
+```html
 <Icon icon={behanceIcon} />
@@ -137,7 +148,10 @@ <p>Mozilla Firefox <InlineIcon icon={mozillafirefoxIcon} /> is the best browser!</p>
 Installation:
-```
+
+```bash
 npm install @iconify/icons-fa-solid
 ```
+
 Usage:
-```
+
+```typescript
 import { Icon, InlineIcon } from "@iconify/react";
@@ -147,3 +161,4 @@ import toggleOn from "@iconify/icons-fa-solid/toggle-on";
 ```
-```
+
+```html
 <Icon icon={chartBar} />
@@ -160,7 +175,10 @@ <p><InlineIcon icon={toggleOn} /> Click to toggle</p>
 Installation:
-```
+
+```bash
 npm install @iconify/icons-noto
 ```
+
 Usage:
-```
+
+```typescript
 import { Icon, InlineIcon } from "@iconify/react";
@@ -170,3 +188,4 @@ import greenApple from "@iconify/icons-noto/green-apple";
 ```
-```
+
+```html
 <Icon icon={greenApple} />
@@ -178,3 +197,3 @@ <p>Its time for hugs <InlineIcon icon={huggingFace} />!</p>
 
-There are over 50 icon sets. This readme shows only few examples. See [Iconify icon sets](http://iconify.design/icon-sets/) for list of available icon sets. Click any icon to see code.
+There are over 50 icon sets. This readme shows only few examples. See [Iconify icon sets](http://iconify.design/icon-sets/) for a full list of available icon sets. Click any icon to see code.
 
@@ -181,0 +200,0 @@ ## License

src/icon.js

@@ -62,3 +62,13 @@ /**
 function normalize(data) {
-    let item = Object.assign(Object.create(null), defaultAttributes, data);
+    // Object.create, compatible with IE11
+    let item = Object.create(null);
+    let key;
+    for (key in defaultAttributes) {
+        item[key] = defaultAttributes[key];
+    }
+    for (key in data) {
+        item[key] = data[key];
+    }
+
+    // Attributes derived from other attributes
     if (item.inlineTop === void 0) {
@@ -507,5 +517,5 @@ item.inlineTop = item.top;
         // Replace with unique ids
-        ids.forEach(function(id) {
+        ids.forEach(function (id) {
             let newID = prefix + idCounter;
-            idCounter ++;
+            idCounter++;
             body = strReplace('="' + id + '"', '="' + newID + '"', body);
@@ -557,14 +567,24 @@ body = strReplace('="#' + id + '"', '="#' + newID + '"', body);
     if (props.style !== void 0) {
-        style = Object.assign(style, props.style);
+        for (let key in props.style) {
+            style[key] = props.style[key];
+        }
     }
 
     // Generate element attributes
-    let attributes = Object.assign({
+    let attributes = {
         xmlns: 'http://www.w3.org/2000/svg',
         focusable: false,
         style: style
-    }, customAttributes, iconData.attributes);
+    };
 
-    attributes.dangerouslySetInnerHTML = {__html: iconData.body};
+    let key;
+    for (key in customAttributes) {
+        attributes[key] = customAttributes[key];
+    }
+    for (key in iconData.attributes) {
+        attributes[key] = iconData.attributes[key];
+    }
 
+    attributes.dangerouslySetInnerHTML = { __html: iconData.body };
+
     // Generate SVG
@@ -571,0 +591,0 @@ return React.createElement('svg', attributes, null);

No alert changes

Improved metrics

Total package byte prevSize

47521

increased by2%

Lines of code

1191

increased by3.03%

Number of lines in readme file

191

increased by11.05%

Dependency changes

• Updatedreact@^16.12.0