Click here to Skip to main content
15,440,884 members
Articles / Web Development / React
Tip/Trick
Posted 20 Nov 2020

Stats

9.4K views
11 bookmarked

React Icon Set for CRUD Applications

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
9 Aug 2022MIT
SVG icon set for CRUD applications packaged as a React component with light & dark themes and tooltip.
This article presents a set of SVG icons for CRUD applications. It is packaged as a React component with light and dark themes and a tooltip.

Set of 57 Icons

A set of SVG icons for CRUD applications (hand-picked among thousands at Material Design Icons) packaged as a React component with light & dark themes and tooltip.

Image 1

Themes & Sizes

React-CRUD-Icons comes in Light and Dark theme.

Image 2

... and 6 sizes: Tiny, Small, Medium, Large, Big, and Huge.

Image 3

Installation

The package can be installed via npm:

npm install react-crud-icons --save

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

Using the Code

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

JavaScript
import React from "react";
import Icon from "react-crud-icons";

import "react-crud-icons/dist/react-crud-icons.css";

const Example = () => (
  <Icon
    name="edit"
    tooltip="Edit"
    theme="light"
    size="medium"
    onClick={doSomething}
  />
); 

Points of Interest

The component renders an inline SVG.

To package the code, I followed the steps from the blog post Building a React component as an NPM module by Manoj Singh Negi.

History

  • August 9th, 2022: More icons
  • November 20th, 2020: Initial version

License

This article, along with any associated source code and files, is licensed under The MIT License


Written By
United States United States
I'm a UI engineer with an eye for UX and a passion for model-driven UIs.

I usually build UIs for startups in the San Francisco Bay Area.

My hobby open source project is Evolutility, a minimalist low-code platform with a model-driven UI, a model-driven backend, and a set of models to play with.

More about me on my GitHub page.

Comments and Discussions

 
-- There are no messages in this forum --