devicons-react

Devicons React

https://devicons-react.vercel.app/

Devicons React is a comprehensive collection of icons representing programming languages, design tools, and development software, built on top of Devicon. Perfect for React projects!

Table of Contents

• Features
• Installation
  • Latest Version
  • Beta Version
• Usage
  • Default Behavior
  • Customize Size and Color
• License
• Support

Features

• Comprehensive: A wide range of icons for programming languages, design tools, and development software.
• React-Friendly: Designed specifically for React applications.
• Customizable: Easily change icon size and color.
• Lightweight: Optimized for performance and minimal bundle size.

Installation

Latest Version

To install the latest stable version:

# With npm
npm install --save devicons-react@latest

# With yarn
yarn add devicons-react@latest

# With pnpm
pnpm add devicons-react@latest

Beta Version

To install the beta version:

# With npm
npm install --save devicons-react@beta

# With yarn
yarn add devicons-react@beta

# With pnpm
pnpm add devicons-react@beta

Usage

Default Behavior

Render an icon with default settings:

import Aarch64Original from "devicons-react/lib/icons/Aarch64Original";

const App = () => {
  return (
    <>
      <Aarch64Original />
    </>
  );
};

export default App;

Customize Size and Color

Customize the icon's size and color:

import Aarch64Line from "devicons-react/lib/icons/Aarch64Line";
import Aarch64Original from "devicons-react/lib/icons/Aarch64Original";
import Aarch64Plain from "devicons-react/lib/icons/Aarch64Plain";

const App = () => {
  return (
    <>
      <Aarch64Line color="red" size="50" />
      <Aarch64Original color="blue" size="50" />
      <Aarch64Plain size="50" />
      <Aarch64Original className="custom-class" />
    </>
  );
};

export default App;

[!NOTE]
The color prop works only with Plain and Line icons. All SVG props are also supported for advanced customization.

[!CAUTION] Avoid importing multiple icons directly using import { Aarch64Line, Aarch64Original, Aarch64Plain } from 'devicons-react'; as it will increase the bundle size. Instead, import icons individually as shown above.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Support

For questions, issues, or contributions, please visit the GitHub repository.