react-icons

react-icons is a popular library that allows you to easily include a vast collection of customizable vector icons from various well-known icon libraries directly into your React applications. Instead of managing separate SVG files or font icon packages, react-icons provides these icons as standard React components, making them simple to import, render, and style using React's prop system.

Key Features and Benefits:
* Extensive Collection: It aggregates icons from popular libraries like Font Awesome, Ant Design Icons, Material Design Icons, Ionicons, Feather Icons, VS Code Icons, and many more, all under one package.
* React Components: Each icon is exported as a React component, which means they seamlessly integrate into your component tree and can be manipulated with props just like any other React component.
* Tree-shaking: The library is designed to be tree-shakeable. This means your final bundle will only include the icons you actually use, helping to keep your application's size small.
* Easy Styling: Icons can be styled using standard CSS properties (e.g., `color`, `size`, `className`) passed as props, or by applying external CSS classes.
* Consistent API: Regardless of the original icon library, react-icons provides a consistent API for importing and using all icons.

Installation:
To use react-icons, you first need to install it in your React project:
`npm install react-icons`
or
`yarn add react-icons`

Usage:
Icons are imported from specific sub-modules, usually prefixed with the first letter(s) of the original icon library (e.g., `Fa` for Font Awesome, `Ai` for Ant Design Icons, `Md` for Material Design Icons). You can find the exact import path for each icon on the react-icons documentation website (e.g., react-icons.github.io). Once imported, you render them as JSX components and can pass props like `size`, `color`, `className`, and any other valid SVG attributes.

Example Code

// Installation:
// npm install react-icons
// or
// yarn add react-icons

import React from 'react';
import { FaBeer } from 'react-icons/fa';        // Font Awesome
import { AiOutlineHeart } from 'react-icons/ai'; // Ant Design Icons
import { MdSettings } from 'react-icons/md';    // Material Design Icons
import { IoIosRocket } from 'react-icons/io';   // Ionicons
import { GoMarkGithub } from 'react-icons/go';  // Github Octicons

// Example component using react-icons
function IconShowcase() {
  return (
    <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>
      <h1>React Icons Example</h1>

      <p>Here are some icons from different libraries, styled using props:</p>

      {/* Font Awesome Icon */}
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '15px' }}>
        <FaBeer size={30} color="#ff8c00" style={{ marginRight: '10px' }} />
        <span>Cheers with a Beer! (Font Awesome - size 30, orange)</span>
      </div>

      {/* Ant Design Icon */}
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '15px' }}>
        <AiOutlineHeart size={40} color="red" style={{ marginRight: '10px' }} />
        <span>Love React Icons! (Ant Design - size 40, red)</span>
      </div>

      {/* Material Design Icon */}
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '15px' }}>
        <MdSettings className="custom-icon-class" style={{ marginRight: '10px' }} />
        <span>Adjusting Settings (Material Design - default size, custom class)</span>
      </div>

      {/* Ionicons */}
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '15px' }}>
        <IoIosRocket size={35} color="purple" style={{ marginRight: '10px' }} />
        <span>To the moon! (Ionicons - size 35, purple)</span>
      </div>

      {/* Github Octicons */}
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '15px' }}>
        <GoMarkGithub size={25} color="#333" style={{ marginRight: '10px' }} />
        <span>GitHub Profile (Octicons - size 25, dark gray)</span>
      </div>

      <p>
        You can also apply CSS classes to icons. For instance, the 'MdSettings' icon above
        has a class named "custom-icon-class".
        <br />
        <br />
        A simple CSS for `custom-icon-class` might look like this:
      </p>
      <pre>
        {`.custom-icon-class {
  color: blue;
  font-size: 2em; /* This will be overridden by the inline style if both are present */
  transition: transform 0.3s ease-in-out;
}
.custom-icon-class:hover {
  transform: rotate(30deg);
}`}
      </pre>

      <p>
        Note: The `font-size` in CSS might be overridden if a `size` prop is explicitly
        provided to the React icon component. For `react-icons`, it's generally recommended
        to use the `size` prop for consistent sizing, or define `font-size` in a CSS class
        and avoid the `size` prop. The `color` prop will also take precedence over CSS `color`.
      </p>
    </div>
  );
}

export default IconShowcase;

// To use the CSS class, you would typically add it to your global CSS file (e.g., App.css)
// or a CSS module for the component.
// Example CSS (e.g., in App.css or a separate CSS module):
// .custom-icon-class {
//   color: blue;
//   font-size: 2em; /* This will be overridden by the 'size' prop if present on the component */
//   transition: transform 0.3s ease-in-out;
// }
// .custom-icon-class:hover {
//   transform: rotate(30deg);
// }

Example Code

Related Topics