First create react application using create-react-app command

npx create-react-app react-feather-app
cd react-feather-app
npm start

This will create a react new application with initial folder structure, installs dependencies and start the server.

There are many ways we can integrate feather-app into react application

  • react-feather
  • feather-icons library
  • cdn javascript

This tutorials covers an react-feather tutorials with examples

react-feather npm library integration example

Next install react-feather library dependency using npm command

npm install react-feather

Once react-feather installed in your application, Next create a react component

In the component, add feather icon to your component render html component

Here we added Calendar icon,

First import icon from npm library as seen below

import { Calendar } from 'react-feather';

use the icon as seen below. you can customize the icon color and size attributes.

<Calendar color='blue' size="20" />

Here is an react feather icon library integration example

import React, { Component } from 'react';
import { Calendar } from 'react-feather';

class First extends Component {
    render() {
        return (
            <div>
                <div><Calendar color='blue' size="20" />  Calendar component</div>
                <div><Calendar color='blue' size="24" />  Calendar component</div >
                <div><Calendar color='blue' size="28" />  Calendar component</div >
                <div><Calendar color='blue' size="32" />  Calendar component</div >
                <div><Calendar color='blue' size="36" />  Calendar component</div >
                <div><Calendar color='blue' size="40" />  Calendar component</div >
            </div >
        );
    }
}
export default First;
*/}}