Set of 67 SVG icons for CRUD applications (hand-picked among thousands of icons at Material Design Icons), packaged as a React component with light & dark themes and tooltip.
Open Source at GitHub: evoluteur/react-crud-icons
The package can be installed via npm:
npm install react-crud-icons --saveYou’ll need to install React and PropTypes separately since those dependencies aren't included in the package.
Below is a simple example of how to use the component in a React view. You will also need to include the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).
import React from "react";
import Icon from "react-crud-icons";
import "react-crud-icons/dist/react-crud-icons.css";
const ExampleComponent = () => (
<Icon
name = "edit"
tooltip = "Edit"
theme = "light"
size = "medium"
onClick = { doSomething }/>);}
Note: Icons only take focus on tab when the "onClick" property is set and they are not disabled.
| 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", "documentation", "dots", "dots-v", "down", "download", "drag", "edit", "error", "expand", "export", "favorite", "filter", "help", "hide", "history", "home", "home-circle", "image", "import", "info", "json", "link", "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". Use theme="none" to display raw SVG without the CSS classes and hover effect. |
| tooltip | Tooltip text 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. |
React-CRUD-Icons is Open Source with MIT License.
Suggest a feature or report a bug at GitHub.
Note: React-CRUD-Icons was originaly made for Evolutility-UI-React.