Doc edits.

README.md

@@ -2,14 +2,12 @@
 
 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.
 
-### 62 SVG Icons
+### 65 SVG Icons
 
 A set of icons for CRUD applications... hand-picked among thousands at [Material Design Icons](https://materialdesignicons.com/).
 
 ![Screenshot](screenshots/react-crud-icons.png)
 
-Icon keys: account, add, add2, alert, apps, bars, browse, calendar, cards, check, chevron-down, chevron-up, clone, close, collapse, comment, comments, compare, copy, dashboard, delete, dots, dots-v, down, download, drag, edit, error, expand, export, favorite, filter, help, hide, history, home, image, import, info, json, list, list-bulleted, lock, lock-open, map-marker, moon, paperclip, pie, print, remove, save, search, settings, show, sort, stats, sun, treemap, undo, up, upload, wand.
-
 <a name="themes"></a>
 
 ### 2 Themes
@@ -69,6 +67,19 @@ Notes:
 - Icons only take focus on tab when the "onClick" property is set and they are not disabled.
 - The component uses inline SVG for faster display.
 
+## Properties
+
+| Prop     | Description              |
+|------------|-----------------------------|
+| name | Possible values: "account", "add", "add2", "alert", "apps", "arrow-left", "arrow-right", "bars", "browse", "calendar", "cards", "check", "chevron-down", "chevron-up", "clone", "close", "collapse", "comment", "comments", "compare", "copy", "dashboard", "delete", "dots", "dots-v", "down", "download", "drag", "edit", "error", "expand", "export", "favorite", "filter", "help", "hide", "history", "home", "home-circle", "image", "import", "info", "json", "list", "list-bulleted", "lock", "lock-open", "map-marker", "moon", "paperclip", "pie", "print", "remove", "save", "search", "settings", "show", "sort", "stats", "sun", "treemap", "undo", "up", "upload", "wand". |
+| size | Possible values: "tiny", "small", "medium", "large", "big", "huge". |
+| theme | Possible values: "light", "dark". |
+| tooltip | Icon tooltip shown on hover. |
+| disabled | Disable click event (icon in grey). |
+| onClick | Callback function triggered when icon is clicked. If empty, there will be no hover effect on the icon. |
+| className | Additional CSS class name. |
+
+
 ## License
 
 Copyright (c) 2022 [Olivier Giulieri](https://evoluteur.github.io/).

dist/index.js

@@ -120,15 +120,15 @@ var svgCmp = function svgCmp(path, onClick, css) {
   }));
 };
 
-function Icon(args) {
-  var id = args.id,
-      name = args.name,
-      size = args.size,
-      theme = args.theme,
-      tooltip = args.tooltip,
-      disabled = args.disabled,
-      onClick = args.onClick,
-      className = args.className;
+function Icon(_ref) {
+  var id = _ref.id,
+      name = _ref.name,
+      size = _ref.size,
+      theme = _ref.theme,
+      tooltip = _ref.tooltip,
+      disabled = _ref.disabled,
+      onClick = _ref.onClick,
+      className = _ref.className;
   var path = svgPaths[name] || null;
 
   if (!path) {
@@ -139,7 +139,7 @@ function Icon(args) {
     return svgCmp(path, onClick, className);
   } else {
     var props = {
-      className: "crud-icon " + size + " " + args.className + " " + theme + (!!disabled ? " disabled" : ""),
+      className: "crud-icon " + size + " " + className + " " + theme + (!!disabled ? " disabled" : ""),
       "data-id": id || name
     };
 
@@ -166,7 +166,7 @@ Icon.propTypes = {
   /** Name of the icon (i.e. "home") */
   name: _propTypes["default"].oneOf(keys).isRequired,
 
-  /** Name of the icon (i.e. "medium") */
+  /** Icon size (i.e. "medium") */
   size: _propTypes["default"].oneOf(["tiny", "small", "medium", "large", "big", "huge"]),
 
   /** Light or dark theme */
@@ -179,10 +179,14 @@ Icon.propTypes = {
   disabled: _propTypes["default"].bool,
 
   /** Callback function triggered when icon is clicked */
-  onClick: _propTypes["default"].func
+  onClick: _propTypes["default"].func,
+
+  /** Extra CSS class */
+  className: _propTypes["default"].string
 };
 Icon.defaultProps = {
   size: "medium",
   theme: "light",
-  disabled: false
+  disabled: false,
+  className: null
 };