react-oui-icons - npm Package Compare versions

Comparing version 2.11.3 to 2.11.4

CHANGELOG.md

@@ -9,2 +9,5 @@ # Change Log
 
+## 2.11.4 - 2020-09-25
+- [Patch] Updated component to be memoized to improve usage performance across all uses ([#60](https://github.com/optimizely/react-oui-icons/pull/60))
+
 ## 2.11.3 - 2020-09-02
@@ -11,0 +14,0 @@ - [Patch] Update svg for `hash`

package.json

 {
   "name": "react-oui-icons",
-  "version": "2.11.3",
+  "version": "2.11.4",
   "main": "dist/index.js",
@@ -98,4 +98,4 @@ "module": "module/index.js",
     "gulp": "^4.0.2",
-    "gulp-svg-symbols": "^1.0.0",
-    "gulp-svgo": "^1.0.3",
+    "gulp-svg-symbols": "^3.0.0",
+    "gulp-svgo": "^2.1.1",
     "jest": "21.2.1",
@@ -102,0 +102,0 @@ "object-assign": "4.1.1",

README.md

@@ -9,3 +9,3 @@ # React OUI Icons
 
-[View all the icons](https://github.com/optimizely/react-oui-icons).
+[View all the icons](http://optimizely.github.io/oui/storybook/?path=/story/icons--everything).
 
@@ -33,3 +33,3 @@ ## Using the icons
 
-[View all the icons](http://optimizely.github.io/oui/storybook/?knob-href=http%3A%2F%2Fgoogle.com&knob-defaultValue=some%20default%20value&knob-direction=up&knob-default=Link&knob-reverse=Link%20Reverse&knob-color=black&knob-dark=Link%20Dark&knob-max=50&knob-type=text&knob-bad-news=Link%20Bad%20News&knob-isDropdown=true&knob-maxLength=250&knob-muted=Link%20Muted&knob-children=Link&knob-size=medium&knob-style=default&knob-min=10&knob-placeholder=just%20a%20placeholder&knob-Label=&selectedKind=Icons&selectedStory=all%20icons&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybook%2Factions%2Factions-panel).
+[View all the icons](http://optimizely.github.io/oui/storybook/?path=/story/icons--everything).
 
@@ -36,0 +36,0 @@ ## Storybook

src/Icon/index.js

@@ -1,7 +0,7 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import PropTypes from "prop-types";
+import React from "react";
 
-import icons from './icons.json';
+import icons from "./icons.json";
 
-const HELP_ICON_TITLE = 'help';
+const HELP_ICON_TITLE = "help";
 
@@ -20,5 +20,8 @@ const propTypes = {
 function findIcon(name, iconsObj = icons) {
-  const icon = iconsObj.filter(obj => obj.title.split(' ').join('-') === name);
-  if(icon.length > 1) throw new Error(`More than one icon was found with same name ${name}`);
-  if(icon.length < 1) throw new Error(`No icon found with that name ${name}`);
+  const icon = iconsObj.filter(
+    (obj) => obj.title.split(" ").join("-") === name
+  );
+  if (icon.length > 1)
+    throw new Error(`More than one icon was found with same name ${name}`);
+  if (icon.length < 1) throw new Error(`No icon found with that name ${name}`);
   const iconObj = icon.length === 0 ? false : icon[0];
@@ -29,28 +32,20 @@ return iconObj;
 function buildSvg(iconData) {
-  const svgElements = iconData.map( (prop, index) => {
-    if(prop.name === 'path') {
-      return <path {...prop.attrs} key={ `path-${index}` } />
-    }
-    else if(prop.name === 'circle') {
-      return <circle {...prop.attrs} key={ `circle-${index}` } />
-    }
-    else if(prop.name === 'polygon') {
-      return <polygon {...prop.attrs} key={ `polygon-${index}` } />
-    }
-    else if(prop.name === 'polyline') {
-      return <polyline {...prop.attrs} key={ `polyline-${index}` } />
-    }
-    else if(prop.name === 'line') {
-      return <line {...prop.attrs} key={ `line-${index}` } />
-    }
-    else if(prop.name === 'rect') {
-      return <rect {...prop.attrs} key={ `rect-${index}` } />
-    }
-    else if(prop.name === 'ellipse') {
-      return <ellipse {...prop.attrs} key={ `ellipse-${index}` } />
-    }
-    else if(prop.name === 'g') {
-      return buildSvg(prop.childs)
-    }
-    else {
+  const svgElements = iconData.map((prop, index) => {
+    if (prop.name === "path") {
+      return <path {...prop.attrs} key={`path-${index}`} />;
+    } else if (prop.name === "circle") {
+      return <circle {...prop.attrs} key={`circle-${index}`} />;
+    } else if (prop.name === "polygon") {
+      return <polygon {...prop.attrs} key={`polygon-${index}`} />;
+    } else if (prop.name === "polyline") {
+      return <polyline {...prop.attrs} key={`polyline-${index}`} />;
+    } else if (prop.name === "line") {
+      return <line {...prop.attrs} key={`line-${index}`} />;
+    } else if (prop.name === "rect") {
+      return <rect {...prop.attrs} key={`rect-${index}`} />;
+    } else if (prop.name === "ellipse") {
+      return <ellipse {...prop.attrs} key={`ellipse-${index}`} />;
+    } else if (prop.name === "g") {
+      return buildSvg(prop.childs);
+    } else {
       return null;
@@ -64,9 +59,9 @@ }
 const Icon = ({
-  description = 'icon',
-  fill = 'currentColor',
+  description = "icon",
+  fill = "currentColor",
   name,
   role,
-  size = 'medium',
-  stroke = 'none',
-  style = {}
+  size = "medium",
+  stroke = "none",
+  style = {},
 }) => {
@@ -76,8 +71,8 @@ const icon = findIcon(`${name}`);
 
-  if(size === 'small') {
-    sizeNumber = '12'
-  } else if(size === 'medium') {
-    sizeNumber = '16'
-  } else if(size === 'large') {
-    sizeNumber = '24'
+  if (size === "small") {
+    sizeNumber = "12";
+  } else if (size === "medium") {
+    sizeNumber = "16";
+  } else if (size === "large") {
+    sizeNumber = "24";
   }
@@ -87,3 +82,3 @@
 
-  const svgClass = `oui-icon display--inline oui-icon--${sizeNumber}`
+  const svgClass = `oui-icon display--inline oui-icon--${sizeNumber}`;
   const props = {
@@ -98,16 +93,12 @@ className: svgClass,
     viewBox: icon.attrs.viewBox,
-    width: sizeNumber
+    width: sizeNumber,
   };
 
-  const content = icon ? buildSvg(icon.childs) : '';
+  const content = icon ? buildSvg(icon.childs) : "";
 
   return (
-    <svg
-      data-oui-component={ true }
-      {...props}>
-      { icon.title !== HELP_ICON_TITLE && (
-          <title>{icon.title}</title>
-      ) }
-      <desc>{ description }</desc>
-      { content }
+    <svg data-oui-component={true} {...props}>
+      {icon.title !== HELP_ICON_TITLE && <title>{icon.title}</title>}
+      <desc>{description}</desc>
+      {content}
     </svg>
@@ -119,2 +110,2 @@ );
 
-export default Icon;
+export default React.memo(Icon);

No alert changes

Worsened metrics

Total package byte prevSize

437371

decreased by-0.47%

Lines of code

6917

decreased by-0.13%

No dependency changes