New icons, new screenshots.

evoluteur · Oct 8, 2020 · 2dd6e29 · 2dd6e29
1 parent 2b00f8a
commit 2dd6e29
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -4,20 +4,20 @@
 React-CRUD-Icons is a set of SVG icons for CRUD (Create, Read, Update, Delete) apps, implemented as a React component with light & dark themes and tooltip.
 
 
-### 45 SVG Icons
+### 48 SVG Icons
 
 A set of icons for CRUD applications... hand-picked among thousands at [Material Design Icons](https://materialdesignicons.com/).
 
-![Screenshot](screenshots/icons.png)
+![Screenshot](screenshots/icons.gif)
 
-Names: account, add, alert, apps, bars, browse, cards, check, collapse, comment, comments, compare, dashboard, delete, dots, dots-v, down, down2, download, drag, edit, error, expand, export, favorite, filter, help, hide, import, info, json, list, paperclip, pie, remove, save, search, settings, show, sort, stats, treemap, undo, up, up2, upload.
+Names: account, add, add2, alert, apps, bars, browse, cards, check, close, collapse, comment, comments, compare, dashboard, delete, dots, dots-v, down, down2, download, drag, edit, error, expand, export, favorite, filter, help, hide, import, info, json, list, paperclip, pie, remove, save, search, settings, show, sort, stats, treemap, undo, up, up2, upload.
 
 <a name="themes"></a>
 ### 2 Themes
 
 Themes: light, dark.
 
-![Screenshot](screenshots/hover.png)
+![Screenshot](screenshots/hover.gif)
 
 To disable the icon hover effect, set theme = "none".
 
@@ -26,7 +26,7 @@ To disable the icon hover effect, set theme = "none".
 
 Sizes: tiny, small, medium, large, big, huge.
 
-![Screenshot](screenshots/sizes.png)
+![Screenshot](screenshots/sizes.gif)
 
 
 ## Installation

diff --git a/dist/index.js b/dist/index.js
@@ -40,8 +40,11 @@ var svgPaths = {
   add: 'M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z',
   add2: 'M20 14H14V20H10V14H4V10H10V4H14V10H20V14Z',
   remove: 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z',
+  close: 'M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z',
   search: 'M9.5,3C13.09,3 16,5.91 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16C5.91,16 3,13.09 3,9.5C3,5.91 5.91,3 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z',
-  filter: 'M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z',
+  //filter: 'M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z',
+  filter: "M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z",
+  sort: "M19 17H22L18 21L14 17H17V3H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z",
   list: 'M3,4H21V8H3V4M3,10H21V14H3V10M3,16H21V20H3V16Z',
   //list4: 'M3,15H21V13H3V15M3,19H21V17H3V19M3,11H21V9H3V11M3,5V7H21V5H3Z',
   //cols: 'M4,21V3H8V21H4M10,21V3H14V21H10M16,21V3H20V21H16Z',
@@ -85,13 +88,13 @@ var keys = Object.keys(svgPaths);
 exports.keys = keys;
 
 var svgCmp = function svgCmp(path, onClick) {
-  return _react["default"].createElement("svg", {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
     focusable: "false",
     viewBox: "0 0 24 24",
     "aria-hidden": "true",
     role: "presentation",
     onClick: onClick ? onClick : null
-  }, _react["default"].createElement("path", {
+  }, /*#__PURE__*/_react["default"].createElement("path", {
     d: path
   }));
 };
@@ -126,13 +129,13 @@ function Icon(args) {
       props.onClick = onClick;
     }
 
-    return _react["default"].createElement("i", props, svgCmp(path), tooltip ? _react["default"].createElement("div", null, tooltip) : null);
+    return /*#__PURE__*/_react["default"].createElement("i", props, svgCmp(path), tooltip ? /*#__PURE__*/_react["default"].createElement("div", null, tooltip) : null);
   }
 }
 
 Icon.propTypes = {
-  //name: PropTypes.anyOf(["account", "add", "add2", "alert", "apps", "bars", "browse", "cards", "check", "collapse", "comment", "comments", "compare", "dashboard", "delete", "dots", "dots-v", "down", "down2", "download", "drag", "edit", "error", "expand", "export", "favorite", "filter", "help", "hide", "import", "info", "json", "list", "paperclip", "pie", "remove", "save", "search", "settings", "show", "stats", "treemap", "undo", "up", "up2", "upload"]).isRequired,
-  name: _propTypes["default"].string.isRequired,
+  name: _propTypes["default"].oneOf(["account", "add", "add2", "alert", "apps", "bars", "browse", "cards", "check", "collapse", "comment", "comments", "compare", "dashboard", "delete", "dots", "dots-v", "down", "down2", "download", "drag", "edit", "error", "expand", "export", "favorite", "filter", "help", "hide", "import", "info", "json", "list", "paperclip", "pie", "remove", "save", "search", "settings", "show", "stats", "treemap", "undo", "up", "up2", "upload"]).isRequired,
+  //name: PropTypes.string.isRequired,
   size: _propTypes["default"].string,
   theme: _propTypes["default"].string,
   // 'light' or 'dark'

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-crud-icons",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Set of SVG icons for CRUD applications packaged as a React component",
   "repository": {
     "type": "git",

diff --git a/screenshots/hover.gif b/screenshots/hover.gif
diff --git a/screenshots/hover.png b/screenshots/hover.png
diff --git a/screenshots/icons.gif b/screenshots/icons.gif
diff --git a/screenshots/icons.png b/screenshots/icons.png
diff --git a/screenshots/sizes.gif b/screenshots/sizes.gif
diff --git a/screenshots/sizes.png b/screenshots/sizes.png
diff --git a/src/Icon.js b/src/Icon.js
@@ -35,9 +35,11 @@ const svgPaths = {
   add: 'M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z',
   add2: 'M20 14H14V20H10V14H4V10H10V4H14V10H20V14Z',
   remove: 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z',
+  close: 'M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z',
   search: 'M9.5,3C13.09,3 16,5.91 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16C5.91,16 3,13.09 3,9.5C3,5.91 5.91,3 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z',
-  filter: 'M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z',
-
+  //filter: 'M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z',
+  filter: "M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z",
+  sort: "M19 17H22L18 21L14 17H17V3H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z",
   list: 'M3,4H21V8H3V4M3,10H21V14H3V10M3,16H21V20H3V16Z',
   //list4: 'M3,15H21V13H3V15M3,19H21V17H3V19M3,11H21V9H3V11M3,5V7H21V5H3Z',
   //cols: 'M4,21V3H8V21H4M10,21V3H14V21H10M16,21V3H20V21H16Z',
@@ -121,8 +123,8 @@ export default function Icon(args) {
 }
 
 Icon.propTypes = {
-	//name: PropTypes.anyOf(["account", "add", "add2", "alert", "apps", "bars", "browse", "cards", "check", "collapse", "comment", "comments", "compare", "dashboard", "delete", "dots", "dots-v", "down", "down2", "download", "drag", "edit", "error", "expand", "export", "favorite", "filter", "help", "hide", "import", "info", "json", "list", "paperclip", "pie", "remove", "save", "search", "settings", "show", "stats", "treemap", "undo", "up", "up2", "upload"]).isRequired,
-  name: PropTypes.string.isRequired,
+	name: PropTypes.oneOf(["account", "add", "add2", "alert", "apps", "bars", "browse", "cards", "check", "collapse", "comment", "comments", "compare", "dashboard", "delete", "dots", "dots-v", "down", "down2", "download", "drag", "edit", "error", "expand", "export", "favorite", "filter", "help", "hide", "import", "info", "json", "list", "paperclip", "pie", "remove", "save", "search", "settings", "show", "stats", "treemap", "undo", "up", "up2", "upload"]).isRequired,
+  //name: PropTypes.string.isRequired,
   size: PropTypes.string,
   theme: PropTypes.string, // 'light' or 'dark'
   tooltip: PropTypes.string,