<p align="center">
<img width="280" src="https://raw.githubusercontent.com/fdorantesm/react-skill-icons/main/.github/skill-icons.svg">
</p>
<h1 align="center">React Skill Icons</h1>

<div align="center">
<br>

<p><i>React components for skillicons.dev</i></p>

---

<a href="https://github.com/fdorantesm/react-skill-icons/stargazers"><img src="https://img.shields.io/github/stars/fdorantesm/react-skill-icons" alt="Stars Badge"/></a>
<a href="https://github.com/fdorantesm/react-skill-icons/network/members"><img src="https://img.shields.io/github/forks/fdorantesm/react-skill-icons" alt="Forks Badge"/></a>
<a href="https://github.com/fdorantesm/react-skill-icons/pulls"><img src="https://img.shields.io/github/issues-pr/fdorantesm/react-skill-icons?color=cyan" alt="Pull Requests Badge"/></a>
<a href="https://github.com/fdorantesm/react-skill-icons/issues"><img src="https://img.shields.io/github/issues/fdorantesm/react-skill-icons?color=red" alt="Issues Badge"/></a>
<a href="https://github.com/fdorantesm/react-skill-icons/graphs/contributors"><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/fdorantesm/react-skill-icons"></a>
<a href="https://github.com/fdorantesm/react-skill-icons/blob/master/LICENSE"><img src="https://img.shields.io/github/license/fdorantesm/react-skill-icons?color=2b9348" alt="License Badge"/></a>
</div>

## Installation

Install with npm

```bash
  npm install @fdorantesm/react-skill-icons
```

Install with yarn

```bash
  yarn add @fdorantesm/react-skill-icons
```

Install with pnpm

```bash
  pnpm install @fdorantesm/react-skill-icons
```

Install with bun

```bash
  bun add @fdorantesm/react-skill-icons
```

## Usage

```ts
import { GithubDark, JavaScript, ReactDark } from "@fdorantesm/react-skill-icons";

function App() {
  return (
    <div>
      <GithubDark />
      <JavaScript />
      <ReactDark />
    </div>
  );
}

export default App;
```

## Available Icons

To see all Icons visit [skillicons.dev](https://skillicons.dev/)

| Icon Name           | Usage                     |
| ------------------- | ------------------------- |
| AWSDark             |  `<AWSDark />`            |
| AWSLight            |  `<AWSLight />`           |
| AbletonDark         | `<AbletonDark />`         |
| AbletonLight        | `<AbletonLight />`        |
| ActivityPubDark     | `<ActivityPubDark />`     |
| ActivityPubLight    | `<ActivityPubLight />`    |
| ActixDark           | `<ActixDark />`           |
| ActixLight          | `<ActixLight />`          |
| Adonis              | `<Adonis />`              |
| AfterEffects        | `<AfterEffects />`        |
| AiScriptDark        | `<AiScriptDark />`        |
| AiScriptLight       | `<AiScriptLight />`       |
| AlpineJSDark        | `<AlpineJSDark />`        |
| AlpineJSLight       | `<AlpineJSLight />`       |
| AndroidStudioDark   | `<AndroidStudioDark />`   |
| AndroidStudioLight  | `<AndroidStudioLight />`  |
| AngularDark         | `<AngularDark />`         |
| AngularLight        | `<AngularLight />`        |
| Ansible             | `<Ansible />`             |
| Apollo              | `<Apollo />`              |
| Appwrite            | `<Appwrite />`            |
| Arduino             | `<Arduino />`             |
| Astro               | `<Astro />`               |
| Atom                | `<Atom />`                |
| Audition            | `<Audition />`            |
| AutoCADDark         | `<AutoCADDark />`         |
| AutoCADLight        | `<AutoCADLight />`        |
| Azul                | `<Azul />`                |
| AzureDark           | `<AzureDark />`           |
| AzureLight          | `<AzureLight />`          |
| BSDDark             | `<BSDDark />`             |
| BSDLight            | `<BSDLight />`            |
| Babel               | `<Babel />`               |
| BashDark            | `<BashDark />`            |
| BashLight           | `<BashLight />`           |
| BevyDark            | `<BevyDark />`            |
| BevyLight           | `<BevyLight />`           |
| BlenderDark         | `<BlenderDark />`         |
| BlenderLight        | `<BlenderLight />`        |
| Bootstrap           | `<Bootstrap />`           |
| C                   | `<C />`                   |
| CMakeDark           | `<CMakeDark />`           |
| CMakeLight          | `<CMakeLight />`          |
| CPP                 | `<CPP />`                 |
| CS                  | `<CS />`                  |
| CSS                 | `<CSS />`                 |
| CassandraDark       | `<CassandraDark />`       |
| CassandraLight      | `<CassandraLight />`      |
| ClojureDark         | `<ClojureDark />`         |
| ClojureLight        | `<ClojureLight />`        |
| CloudflareDark      | `<CloudflareDark />`      |
| CloudflareLight     | `<CloudflareLight />`     |
| CodePenDark         | `<CodePenDark />`         |
| CodePenLight        | `<CodePenLight />`        |
| CoffeeScriptDark    | `<CoffeeScriptDark />`    |
| CoffeeScriptLight   | `<CoffeeScriptLight />`   |
| CrystalDark         | `<CrystalDark />`         |
| CrystalLight        | `<CrystalLight />`        |
| D3Dark              | `<D3Dark />`              |
| D3Light             | `<D3Light />`             |
| DENODark            | `<DENODark />`            |
| DENOLight           | `<DENOLight />`           |
| DartDark            | `<DartDark />`            |
| DartLight           | `<DartLight />`           |
| DevToDark           | `<DevToDark />`           |
| DevToLight          | `<DevToLight />`          |
| Discord             | `<Discord />`             |
| DiscordBots         | `<DiscordBots />`         |
| Django              | `<Django />`              |
| Docker              | `<Docker />`              |
| DotNet              | `<DotNet />`              |
| DynamoDBDark        | `<DynamoDBDark />`        |
| DynamoDBLight       | `<DynamoDBLight />`       |
| EclipseDark         | `<EclipseDark />`         |
| EclipseLight        | `<EclipseLight />`        |
| Electron            | `<Electron />`            |
| ElixirDark          | `<ElixirDark />`          |
| ElixirLight         | `<ElixirLight />`         |
| Emacs               | `<Emacs />`               |
| Ember               | `<Ember />`               |
| EmotionDark         | `<EmotionDark />`         |
| EmotionLight        | `<EmotionLight />`        |
| ExpressJSDark       | `<ExpressJSDark />`       |
| ExpressJSLight      | `<ExpressJSLight />`      |
| FastAPI             | `<FastAPI />`             |
| FediverseDark       | `<FediverseDark />`       |
| FediverseLight      | `<FediverseLight />`      |
| FigmaDark           | `<FigmaDark />`           |
| FigmaLight          | `<FigmaLight />`          |
| FirebaseDark        | `<FirebaseDark />`        |
| FirebaseLight       | `<FirebaseLight />`       |
| FlaskDark           | `<FlaskDark />`           |
| FlaskLight          | `<FlaskLight />`          |
| FlutterDark         | `<FlutterDark />`         |
| FlutterLight        | `<FlutterLight />`        |
| Forth               | `<Forth />`               |
| Fortran             | `<Fortran />`             |
| GCPDark             | `<GCPDark />`             |
| GCPLight            | `<GCPLight />`            |
| GTKDark             | `<GTKDark />`             |
| GTKLight            | `<GTKLight />`            |
| GameMakerStudio     | `<GameMakerStudio />`     |
| Gatsby              | `<Gatsby />`              |
| GherkinDark         | `<GherkinDark />`         |
| GherkinLight        | `<GherkinLight />`        |
| Git                 | `<Git />`                 |
| GitLabDark          | `<GitLabDark />`          |
| GitLabLight         | `<GitLabLight />`         |
| GithubActionsDark   | `<GithubActionsDark />`   |
| GithubActionsLight  | `<GithubActionsLight />`  |
| GithubDark          | `<GithubDark />`          |
| GithubLight         | `<GithubLight />`         |
| GoLang              | `<GoLang />`              |
| GodotDark           | `<GodotDark />`           |
| GodotLight          | `<GodotLight />`          |
| GradleDark          | `<GradleDark />`          |
| GradleLight         | `<GradleLight />`         |
| GrafanaDark         | `<GrafanaDark />`         |
| GrafanaLight        | `<GrafanaLight />`        |
| GraphQLDark         | `<GraphQLDark />`         |
| GraphQLLight        | `<GraphQLLight />`        |
| Gulp                | `<Gulp />`                |
| HTML                | `<HTML />`                |
| HaskellDark         | `<HaskellDark />`         |
| HaskellLight        | `<HaskellLight />`        |
| HaxeFlixelDark      | `<HaxeFlixelDark />`      |
| HaxeFlixelLight     | `<HaxeFlixelLight />`     |
| HaxeDark            | `<HaxeDark />`            |
| HaxeLight           | `<HaxeLight />`           |
| Heroku              | `<Heroku />`              |
| HibernateDark       | `<HibernateDark />`       |
| HibernateLight      | `<HibernateLight />`      |
| IPFSDark            | `<IPFSDark />`            |
| IPFSLight           | `<IPFSLight />`           |
| IdeaDark            | `<IdeaDark />`            |
| IdeaLight           | `<IdeaLight />`           |
| Illustrator         | `<Illustrator />`         |
| Instagram           | `<Instagram />`           |
| JQuery              | `<JQuery />`              |
| JavaScript          | `<JavaScript />`          |
| JavaDark            | `<JavaDark />`            |
| JavaLight           | `<JavaLight />`           |
| JenkinsDark         | `<JenkinsDark />`         |
| JenkinsLight        | `<JenkinsLight />`        |
| Jest                | `<Jest />`                |
| JuliaDark           | `<JuliaDark />`           |
| JuliaLight          | `<JuliaLight />`          |
| Kafka               | `<Kafka />`               |
| KotlinDark          | `<KotlinDark />`          |
| KotlinLight         | `<KotlinLight />`         |
| KtorDark            | `<KtorDark />`            |
| KtorLight           | `<KtorLight />`           |
| Kubernetes          | `<Kubernetes />`          |
| LaTeXDark           | `<LaTeXDark />`           |
| LaTeXLight          | `<LaTeXLight />`          |
| LaravelDark         | `<LaravelDark />`         |
| LaravelLight        | `<LaravelLight />`        |
| LinkedIn            | `<LinkedIn />`            |
| LinuxDark           | `<LinuxDark />`           |
| LinuxLight          | `<LinuxLight />`          |
| LitDark             | `<LitDark />`             |
| LitLight            | `<LitLight />`            |
| LuaDark             | `<LuaDark />`             |
| LuaLight            | `<LuaLight />`            |
| MarkdownDark        | `<MarkdownDark />`        |
| MarkdownLight       | `<MarkdownLight />`       |
| MastodonDark        | `<MastodonDark />`        |
| MastodonLight       | `<MastodonLight />`       |
| MaterialUIDark      | `<MaterialUIDark />`      |
| MaterialUILight     | `<MaterialUILight />`     |
| MatlabDark          | `<MatlabDark />`          |
| MatlabLight         | `<MatlabLight />`         |
| MavenDark           | `<MavenDark />`           |
| MavenLight          | `<MavenLight />`          |
| MisskeyDark         | `<MisskeyDark />`         |
| MisskeyLight        | `<MisskeyLight />`        |
| MongoDB             | `<MongoDB />`             |
| MySQLDark           | `<MySQLDark />`           |
| MySQLLight          | `<MySQLLight />`          |
| NeoVimDark          | `<NeoVimDark />`          |
| NeoVimLight         | `<NeoVimLight />`         |
| NestJSDark          | `<NestJSDark />`          |
| NestJSLight         | `<NestJSLight />`         |
| NetlifyDark         | `<NetlifyDark />`         |
| NetlifyLight        | `<NetlifyLight />`        |
| NextJSDark          | `<NextJSDark />`          |
| NextJSLight         | `<NextJSLight />`         |
| Nginx               | `<Nginx />`               |
| NimDark             | `<NimDark />`             |
| NimLight            | `<NimLight />`            |
| NodeJSDark          | `<NodeJSDark />`          |
| NodeJSLight         | `<NodeJSLight />`         |
| NuxtJSDark          | `<NuxtJSDark />`          |
| NuxtJSLight         | `<NuxtJSLight />`         |
| OCaml               | `<OCaml />`               |
| OctaveDark          | `<OctaveDark />`          |
| OctaveLight         | `<OctaveLight />`         |
| OpenShift           | `<OpenShift />`           |
| OpenStackDark       | `<OpenStackDark />`       |
| OpenStackLight      | `<OpenStackLight />`      |
| PHPDark             | `<PHPDark />`             |
| PHPLight            | `<PHPLight />`            |
| Perl                | `<Perl />`                |
| Photoshop           | `<Photoshop />`           |
| Plan9Dark           | `<Plan9Dark />`           |
| Plan9Light          | `<Plan9Light />`          |
| PlanetScaleDark     | `<PlanetScaleDark />`     |
| PlanetScaleLight    | `<PlanetScaleLight />`    |
| PostgreSQLDark      | `<PostgreSQLDark />`      |
| PostgreSQLLight     | `<PostgreSQLLight />`     |
| Postman             | `<Postman />`             |
| PowershellDark      | `<PowershellDark />`      |
| PowershellLight     | `<PowershellLight />`     |
| Premiere            | `<Premiere />`            |
| Prisma              | `<Prisma />`              |
| ProcessingDark      | `<ProcessingDark />`      |
| ProcessingLight     | `<ProcessingLight />`     |
| Prometheus          | `<Prometheus />`          |
| PugDark             | `<PugDark />`             |
| PugLight            | `<PugLight />`            |
| PyTorchDark         | `<PyTorchDark />`         |
| PyTorchLight        | `<PyTorchLight />`        |
| PythonDark          | `<PythonDark />`          |
| PythonLight         | `<PythonLight />`         |
| QTDark              | `<QTDark />`              |
| QTLight             | `<QTLight />`             |
| ROSDark             | `<ROSDark />`             |
| ROSLight            | `<ROSLight />`            |
| RDark               | `<RDark />`               |
| RLight              | `<RLight />`              |
| RabbitMQDark        | `<RabbitMQDark />`        |
| RabbitMQLight       | `<RabbitMQLight />`       |
| Rails               | `<Rails />`               |
| RaspberryPiDark     | `<RaspberryPiDark />`     |
| RaspberryPiLight    | `<RaspberryPiLight />`    |
| ReactDark           | `<ReactDark />`           |
| ReactLight          | `<ReactLight />`          |
| ReactiveXDark       | `<ReactiveXDark />`       |
| ReactiveXLight      | `<ReactiveXLight />`      |
| RedisDark           | `<RedisDark />`           |
| RedisLight          | `<RedisLight />`          |
| Redux               | `<Redux />`               |
| RegexDark           | `<RegexDark />`           |
| RegexLight          | `<RegexLight />`          |
| RemixDark           | `<RemixDark />`           |
| RemixLight          | `<RemixLight />`          |
| ReplitDark          | `<ReplitDark />`          |
| ReplitLight         | `<ReplitLight />`         |
| Rocket              | `<Rocket />`              |
| RollupJSDark        | `<RollupJSDark />`        |
| RollupJSLight       | `<RollupJSLight />`       |
| Ruby                | `<Ruby />`                |
| Rust                | `<Rust />`                |
| SQLite              | `<SQLite />`              |
| SVGDark             | `<SVGDark />`             |
| SVGLight            | `<SVGLight />`            |
| Sass                | `<Sass />`                |
| ScalaDark           | `<ScalaDark />`           |
| ScalaLight          | `<ScalaLight />`          |
| Selenium            | `<Selenium />`            |
| Sentry              | `<Sentry />`              |
| SequelizeDark       | `<SequelizeDark />`       |
| SequelizeLight      | `<SequelizeLight />`      |
| SketchupDark        | `<SketchupDark />`        |
| SketchupLight       | `<SketchupLight />`       |
| SolidJSDark         | `<SolidJSDark />`         |
| SolidJSLight        | `<SolidJSLight />`        |
| Solidity            | `<Solidity />`            |
| SpringDark          | `<SpringDark />`          |
| SpringLight         | `<SpringLight />`         |
| StackOverflowDark   | `<StackOverflowDark />`   |
| StackOverflowLight  | `<StackOverflowLight />`  |
| StyledComponents    | `<StyledComponents />`    |
| SupabaseDark        | `<SupabaseDark />`        |
| SupabaseLight       | `<SupabaseLight />`       |
| Svelte              | `<Svelte />`              |
| Swift               | `<Swift />`               |
| SymfonyDark         | `<SymfonyDark />`         |
| SymfonyLight        | `<SymfonyLight />`        |
| TailwindCSSDark     | `<TailwindCSSDark />`     |
| TailwindCSSLight    | `<TailwindCSSLight />`    |
| TauriDark           | `<TauriDark />`           |
| TauriLight          | `<TauriLight />`          |
| TensorFlowDark      | `<TensorFlowDark />`      |
| TensorFlowLight     | `<TensorFlowLight />`     |
| ThreeJSDark         | `<ThreeJSDark />`         |
| ThreeJSLight        | `<ThreeJSLight />`        |
| Twitter             | `<Twitter />`             |
| TypeScript          | `<TypeScript />`          |
| UnityDark           | `<UnityDark />`           |
| UnityLight          | `<UnityLight />`          |
| UnrealEngine        | `<UnrealEngine />`        |
| VIMDark             | `<VIMDark />`             |
| VIMLight            | `<VIMLight />`            |
| VSCodeDark          | `<VSCodeDark />`          |
| VSCodeLight         | `<VSCodeLight />`         |
| VDark               | `<VDark />`               |
| VLight              | `<VLight />`              |
| Vala                | `<Vala />`                |
| VercelDark          | `<VercelDark />`          |
| VercelLight         | `<VercelLight />`         |
| VisualStudioDark    | `<VisualStudioDark />`    |
| VisualStudioLight   | `<VisualStudioLight />`   |
| ViteDark            | `<ViteDark />`            |
| ViteLight           | `<ViteLight />`           |
| VueJSDark           | `<VueJSDark />`           |
| VueJSLight          | `<VueJSLight />`          |
| WebAssembly         | `<WebAssembly />`         |
| Webflow             | `<Webflow />`             |
| WebpackDark         | `<WebpackDark />`         |
| WebpackLight        | `<WebpackLight />`        |
| WindiCSSDark        | `<WindiCSSDark />`        |
| WindiCSSLight       | `<WindiCSSLight />`       |
| Wordpress           | `<Wordpress />`           |
| WorkersDark         | `<WorkersDark />`         |
| WorkersLight        | `<WorkersLight />`        |
| XD                  | `<XD />`                  |
| ZigDark             | `<ZigDark />`             |
| ZigLight            | `<ZigLight />`            |

## Props

`className`: Apply custom properties supported by SVGSVGElement type.

```jsx
<GithubDark className="icon" />
```

## Credits

Authors of skillicons.dev and react-skillicons

- [Tandpfun](https://github.com/tandpfun) tandpfun/skill-icons
- [willywdev](https://github.com/willywdev) willywdev/react-skillicons

## Changes

I make some improvements like pull the icons from the original source `github:tandpfun/skill-icons` and then generate automatically all the components to avoid import svg files.

Feel free to fork this repo to generate more svg packages.

---
<br>
<br>

<div align="center">
    <a href="https://github.com/fdorantesm" target="_blank">
        <img src="https://img.shields.io/badge/github-%2324292e.svg?&style=for-the-badge&logo=github&logoColor=white" alt="github" style="margin-bottom: 5px;" />
    </a>
    <a href="https://twitter.com/fdorantesm" target="_blank">
        <img src="https://img.shields.io/badge/twitter-%2300acee.svg?&style=for-the-badge&logo=twitter&logoColor=white" alt="twitter" style="margin-bottom: 5px;" />
    </a>
    <a href="https://linkedin.com/in/fdorantesm" target="_blank">
        <img src="https://img.shields.io/badge/linkedin-%231E77B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white" alt="linkedin" style="margin-bottom: 5px;" />
    </a>
    <a href="https://www.youtube.com/user/FernandoDorantes" target="_blank">
        <img src="https://img.shields.io/badge/youtube-%23EE4831.svg?&style=for-the-badge&logo=youtube&logoColor=white" alt="youtube" style="margin-bottom: 5px;" />
    </a>
</div>
