JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 392
  • Score
    100M100P100Q92118F
  • License MIT

Set of SVG icons for CRUD applications packaged as a React component

Package Exports

  • react-crud-icons
  • react-crud-icons/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-crud-icons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React-CRUD-Icons · GitHub license npm version

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.

61 SVG Icons

A set of icons for CRUD applications... hand-picked among thousands at Material Design Icons.

Screenshot

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, 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.

2 Themes

Themes: light, dark.

Screenshot

To disable the icon hover effect, set theme = "none".

6 Sizes

Sizes: tiny, small, medium, large, big, huge.

Screenshot

Installation

The package can be installed via npm:

npm install react-crud-icons --save

You’ll need to install React and PropTypes separately since those dependencies aren't included in the package.

To rebuild the project:

npm install
npm run build

Usage

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}
  />
);

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.

License

Copyright (c) 2022 Olivier Giulieri.

React-CRUD-Icons is Open Source wih MIT license.

To suggest a feature or report a bug: https://github.com/evoluteur/react-crud-icons/issues