devicons-react

KO | EN

gitlite — search

#react #ai #llm #go #machine-learning #deep-learning #linux #macos #nodejs #java #awesome #vue #security #ios

(★ 26)

Devicons React is a collection of icons that symbolize programming languages, design tools, and development software.

devicons-react Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1>Devicons React</h1>

<a href="https://devicons-react.mkabumattar.com/">https://devicons-react.mkabumattar.com/</a>

<p>Devicons React is a comprehensive collection of icons representing programming languages, design tools, and development software, built on top of <a href="https://github.com/devicons/devicon">Devicon</a>. Perfect for React projects!</p>
</div>

## Table of Contents

- [Features](#features)
- [Installation](#installation)
  - [Latest Version](#latest-version)
  - [Beta Version](#beta-version)
- [Usage](#usage)
  - [Default Behavior](#default-behavior)
  - [Customize Size and Color](#customize-size-and-color)
- [License](#license)
- [Support](#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:

```sh
# 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:

```sh
# 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:

```jsx
import Aarch64Original from "devicons-react/icons/Aarch64Original";

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

export default App;
```

### Customize Size and Color

Customize the icon's size and color:

```jsx
import Aarch64Line from "devicons-react/icons/Aarch64Line";
import Aarch64Original from "devicons-react/icons/Aarch64Original";
import Aarch64Plain from "devicons-react/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](LICENSE) file for more details.

## Support

For questions, issues, or contributions, please visit the [GitHub repository](https://github.com/MKAbuMattar/devicons-react/issues).

devicons-react

devicons-react Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

devicons-react

devicons-react Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README