An open API service indexing awesome lists of open source software.

https://github.com/mkabumattar/devicons-react

Devicons React is a collection of icons that symbolize programming languages, design tools, and development software.
https://github.com/mkabumattar/devicons-react

devicons-react icons npm-package react react-package typescript

Last synced: 11 months ago
JSON representation

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

Awesome Lists containing this project

README

          



Devicon Logo

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!




Latest NPM Version


Beta NPM Version


GitHub Repository


GitHub Release


GitHub License


GitHub Stars

## 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/lib/icons/Aarch64Original";

const App = () => {
return (
<>

>
);
};

export default App;
```

### Customize Size and Color

Customize the icon's size and color:

```jsx
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 (
<>




>
);
};

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