feat: update script for copying mui-icons and add additional docs

icons/.svgrrc.js

@@ -1,5 +1,62 @@
 const path = require('path');
 
+function humanizeNumber(numString){
+  const ones = ['Zero', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine',
+                'Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen',
+                'Seventeen', 'Eighteen', 'Nineteen'];
+  const tens = ['', '', 'Twenty', 'Thirty', 'Forty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety'];
+
+  const num = parseInt(numString);
+
+  if (num < 20) {
+    return ones[num];
+  }
+
+  if (numString.length === 2) {
+    if (numString.endsWith('0')) {
+      return tens[numString[0]];
+    }
+    return `${tens[numString[0]]}${ones[numString[1]]}`;
+  }
+
+  if (num === 360) {
+    return 'ThreeSixty';
+  }
+
+  if (num === 123) {
+    return 'OneTwoThree';
+  }
+}
+
+/**
+ * Checks whether SVG name starts with number, and if it does - replace number with humanized string
+ * (e.g. '11M' => 'ElevenM'), only 2-digit numbers are fully supported, (e.g. '11111M' would become 'Eleven111M'),
+ * and only two cases for 3-digit numbers are covered (360 and 123).
+ *
+ * The reason for this is that material-icons repository from where we copy icons contains icons with names like
+ * 5G, 2K etc., which by default transforms to 'export { default as 5G } from './5G'' which is invalid js
+ * (component name cannot start with number), this function will transform this export to
+ * 'export { default as FiveG } from './5G'', which is valid.
+ * Only two icons have 3 digits in them, so no need to fully support conversion to words for such numbers.
+ *
+ * @param {string} basename - name of the SVG component.
+ * @returns {string} - formatted name of the SVG component.
+ */
+function getComponentName(basename) {
+  if (!isNaN(basename.charAt(0))) {
+    if (basename.length > 1 && !isNaN(basename.charAt(1))) {
+      if (basename.length > 2 && !isNaN(basename.charAt(2))) {
+        return `${humanizeNumber(basename.slice(0, 3))}${basename.slice(3)}`;
+      } else {
+        return `${humanizeNumber(basename.slice(0, 2))}${basename.slice(2)}`;
+      }
+    } else {
+      return `${humanizeNumber(basename.charAt(0))}${basename.slice(1)}`;
+    }
+  }
+  return basename;
+}
+
 module.exports = {
   "icon": false,
   "expandProps": "end",
@@ -9,8 +66,8 @@ module.exports = {
   "ext": "jsx",
   indexTemplate: filePaths => {
     const exportEntries = filePaths.map((filePath) => {
-      const basename = path.basename(filePath, path.extname(filePath))
-      return `export { default as ${basename} } from './${basename}';`
+      const basename = path.basename(filePath, path.extname(filePath));
+      return `export { default as ${getComponentName(basename)} } from './${basename}';`
     })
     return exportEntries.join('\n')
   },

icons/README.md

@@ -17,3 +17,7 @@ npm install
 ```sh
 npm run build
 ```
+
+Note that most of the icons are taken from [MUI icons](https://github.com/material-icons/material-icons), this is achieved through `copy-mui-icons.js` script located in this directory which is part of `npm run build` command. There are a couple of things to keep in mind:
+- the script currently does not override existing files, so if you need updated version of the icon you will need to update it manually (copy the icon to `svg` directory and run build command)
+- if new version of the `material-icons` package is published with new icons, the version needs to be updated in `package.json` before running the build command to include new icons

icons/es5/AddChart.js → icons/es5/Addchart.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import * as React from "react";
 
-function SvgAddChart(props) {
+function SvgAddchart(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -15,4 +15,4 @@ function SvgAddChart(props) {
   }));
 }
 
-export default SvgAddChart;
+export default SvgAddchart;

icons/es5/Fluorescent.js

@@ -0,0 +1,16 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from "react";
+
+function SvgFluorescent(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M5 9h14v6H5zm6-7h2v3h-2zm6.286 4.399l1.79-1.803 1.42 1.41-1.79 1.802zM11 19h2v3h-2zm6.29-1.29l1.79 1.8 1.42-1.42-1.8-1.79zM3.495 6.01l1.407-1.408L6.69 6.391 5.284 7.798zm-.003 12.066l1.803-1.79 1.409 1.42-1.803 1.79z"
+  }));
+}
+
+export default SvgFluorescent;

icons/es5/QrCode.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import * as React from "react";
 
-function SvgQrCode(props) {
+function SvgQrcode(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -13,4 +13,4 @@ function SvgQrCode(props) {
   }));
 }
 
-export default SvgQrCode;
+export default SvgQrcode;

icons/es5/VideoChat.js

@@ -0,0 +1,16 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from "react";
+
+function SvgVideoChat(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M2 2v20l4-4h16V2H2zm15 11l-2-1.99V14H7V6h8v2.99L17 7v6z"
+  }));
+}
+
+export default SvgVideoChat;

icons/es5/index.js

@@ -72,14 +72,13 @@ export { default as AccountCircle } from './AccountCircle';
 export { default as AccountTree } from './AccountTree';
 export { default as AdUnits } from './AdUnits';
 export { default as Adb } from './Adb';
-export { default as AddAlert } from './AddAlert';
 export { default as Add } from './Add';
 export { default as AddAPhoto } from './AddAPhoto';
 export { default as AddAlarm } from './AddAlarm';
+export { default as AddAlert } from './AddAlert';
 export { default as AddBox } from './AddBox';
 export { default as AddBusiness } from './AddBusiness';
 export { default as AddCard } from './AddCard';
-export { default as AddChart } from './AddChart';
 export { default as AddCircle } from './AddCircle';
 export { default as AddCircleOutline } from './AddCircleOutline';
 export { default as AddComment } from './AddComment';
@@ -99,6 +98,7 @@ export { default as AddToDrive } from './AddToDrive';
 export { default as AddToHomeScreen } from './AddToHomeScreen';
 export { default as AddToPhotos } from './AddToPhotos';
 export { default as AddToQueue } from './AddToQueue';
+export { default as Addchart } from './Addchart';
 export { default as AdfScanner } from './AdfScanner';
 export { default as Adjust } from './Adjust';
 export { default as AdminPanelSettings } from './AdminPanelSettings';
@@ -255,7 +255,7 @@ export { default as BatteryFull } from './BatteryFull';
 export { default as BatterySaver } from './BatterySaver';
 export { default as BatteryStd } from './BatteryStd';
 export { default as BatteryUnknown } from './BatteryUnknown';
-export { default as Bbb } from './Bbb'
+export { default as Bbb } from './Bbb';
 export { default as BeachAccess } from './BeachAccess';
 export { default as Bed } from './Bed';
 export { default as BedroomBaby } from './BedroomBaby';
@@ -816,6 +816,7 @@ export { default as FlipToBack } from './FlipToBack';
 export { default as FlipToFront } from './FlipToFront';
 export { default as Flood } from './Flood';
 export { default as Flourescent } from './Flourescent';
+export { default as Fluorescent } from './Fluorescent';
 export { default as FlutterDash } from './FlutterDash';
 export { default as FmdBad } from './FmdBad';
 export { default as FmdGood } from './FmdGood';
@@ -1150,9 +1151,9 @@ export { default as LockOpen } from './LockOpen';
 export { default as LockPerson } from './LockPerson';
 export { default as LockReset } from './LockReset';
 export { default as Locked } from './Locked';
-export { default as Login } from './LogIn';
+export { default as Login } from './Login';
 export { default as LogoDev } from './LogoDev';
-export { default as Logout } from './LogOut';
+export { default as Logout } from './Logout';
 export { default as Looks } from './Looks';
 export { default as Looks3 } from './Looks3';
 export { default as Looks4 } from './Looks4';
@@ -1540,8 +1541,9 @@ export { default as Publish } from './Publish';
 export { default as PublishedWithChanges } from './PublishedWithChanges';
 export { default as PunchClock } from './PunchClock';
 export { default as PushPin } from './PushPin';
-export { default as QrCode } from './QrCode';
+export { default as QrCode2 } from './QrCode2';
 export { default as QrCodeScanner } from './QrCodeScanner';
+export { default as Qrcode } from './Qrcode';
 export { default as QueryBuilder } from './QueryBuilder';
 export { default as QueryStats } from './QueryStats';
 export { default as Question } from './Question';
@@ -2099,6 +2101,7 @@ export { default as VideoCall } from './VideoCall';
 export { default as VideoCamera } from './VideoCamera';
 export { default as VideoCameraBack } from './VideoCameraBack';
 export { default as VideoCameraFront } from './VideoCameraFront';
+export { default as VideoChat } from './VideoChat';
 export { default as VideoFile } from './VideoFile';
 export { default as VideoLabel } from './VideoLabel';
 export { default as VideoLibrary } from './VideoLibrary';
@@ -2225,4 +2228,4 @@ export { default as Zoom } from './Zoom';
 export { default as ZoomIn } from './ZoomIn';
 export { default as ZoomInMap } from './ZoomInMap';
 export { default as ZoomOut } from './ZoomOut';
-export { default as ZoomOutMap } from './ZoomOutMap';
+export { default as ZoomOutMap } from './ZoomOutMap';

icons/jsx/AddChart.jsx → icons/jsx/Addchart.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-function SvgAddChart(props) {
+function SvgAddchart(props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -15,4 +15,4 @@ function SvgAddChart(props) {
   );
 }
 
-export default SvgAddChart;
+export default SvgAddchart;

icons/jsx/Fluorescent.jsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+function SvgFluorescent(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M5 9h14v6H5zm6-7h2v3h-2zm6.286 4.399l1.79-1.803 1.42 1.41-1.79 1.802zM11 19h2v3h-2zm6.29-1.29l1.79 1.8 1.42-1.42-1.8-1.79zM3.495 6.01l1.407-1.408L6.69 6.391 5.284 7.798zm-.003 12.066l1.803-1.79 1.409 1.42-1.803 1.79z" />
+    </svg>
+  );
+}
+
+export default SvgFluorescent;

icons/jsx/QrCode.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-function SvgQrCode(props) {
+function SvgQrcode(props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -14,4 +14,4 @@ function SvgQrCode(props) {
   );
 }
 
-export default SvgQrCode;
+export default SvgQrcode;

icons/jsx/VideoChat.jsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+function SvgVideoChat(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M2 2v20l4-4h16V2H2zm15 11l-2-1.99V14H7V6h8v2.99L17 7v6z" />
+    </svg>
+  );
+}
+
+export default SvgVideoChat;

icons/jsx/index.jsx

@@ -72,14 +72,13 @@ export { default as AccountCircle } from './AccountCircle';
 export { default as AccountTree } from './AccountTree';
 export { default as AdUnits } from './AdUnits';
 export { default as Adb } from './Adb';
-export { default as AddAlert } from './AddAlert';
 export { default as Add } from './Add';
 export { default as AddAPhoto } from './AddAPhoto';
 export { default as AddAlarm } from './AddAlarm';
+export { default as AddAlert } from './AddAlert';
 export { default as AddBox } from './AddBox';
 export { default as AddBusiness } from './AddBusiness';
 export { default as AddCard } from './AddCard';
-export { default as AddChart } from './AddChart';
 export { default as AddCircle } from './AddCircle';
 export { default as AddCircleOutline } from './AddCircleOutline';
 export { default as AddComment } from './AddComment';
@@ -99,6 +98,7 @@ export { default as AddToDrive } from './AddToDrive';
 export { default as AddToHomeScreen } from './AddToHomeScreen';
 export { default as AddToPhotos } from './AddToPhotos';
 export { default as AddToQueue } from './AddToQueue';
+export { default as Addchart } from './Addchart';
 export { default as AdfScanner } from './AdfScanner';
 export { default as Adjust } from './Adjust';
 export { default as AdminPanelSettings } from './AdminPanelSettings';
@@ -816,6 +816,7 @@ export { default as FlipToBack } from './FlipToBack';
 export { default as FlipToFront } from './FlipToFront';
 export { default as Flood } from './Flood';
 export { default as Flourescent } from './Flourescent';
+export { default as Fluorescent } from './Fluorescent';
 export { default as FlutterDash } from './FlutterDash';
 export { default as FmdBad } from './FmdBad';
 export { default as FmdGood } from './FmdGood';
@@ -1150,9 +1151,9 @@ export { default as LockOpen } from './LockOpen';
 export { default as LockPerson } from './LockPerson';
 export { default as LockReset } from './LockReset';
 export { default as Locked } from './Locked';
-export { default as Login } from './LogIn';
+export { default as Login } from './Login';
 export { default as LogoDev } from './LogoDev';
-export { default as Logout } from './LogOut';
+export { default as Logout } from './Logout';
 export { default as Looks } from './Looks';
 export { default as Looks3 } from './Looks3';
 export { default as Looks4 } from './Looks4';
@@ -1540,8 +1541,9 @@ export { default as Publish } from './Publish';
 export { default as PublishedWithChanges } from './PublishedWithChanges';
 export { default as PunchClock } from './PunchClock';
 export { default as PushPin } from './PushPin';
-export { default as QrCode } from './QrCode';
+export { default as QrCode2 } from './QrCode2';
 export { default as QrCodeScanner } from './QrCodeScanner';
+export { default as Qrcode } from './Qrcode';
 export { default as QueryBuilder } from './QueryBuilder';
 export { default as QueryStats } from './QueryStats';
 export { default as Question } from './Question';
@@ -2099,6 +2101,7 @@ export { default as VideoCall } from './VideoCall';
 export { default as VideoCamera } from './VideoCamera';
 export { default as VideoCameraBack } from './VideoCameraBack';
 export { default as VideoCameraFront } from './VideoCameraFront';
+export { default as VideoChat } from './VideoChat';
 export { default as VideoFile } from './VideoFile';
 export { default as VideoLabel } from './VideoLabel';
 export { default as VideoLibrary } from './VideoLibrary';
@@ -2225,4 +2228,4 @@ export { default as Zoom } from './Zoom';
 export { default as ZoomIn } from './ZoomIn';
 export { default as ZoomInMap } from './ZoomInMap';
 export { default as ZoomOut } from './ZoomOut';
-export { default as ZoomOutMap } from './ZoomOutMap';
+export { default as ZoomOutMap } from './ZoomOutMap';