npm package: @nimr0d/react-skill-icons-vite
Description: React components for skillicons.dev by tandpfun
Author: Fernando Dorantes
Latest version: 1.0.17

<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 for Vite & Modern React</h1>

<div align="center">
<br>

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

<p>This is just a modified version of <a href="https://github.com/tandpfun/skill-icons">https://github.com/tandpfun/skill-icons</a>, so it works better with Laravel React and Vite.</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 @nimr0d/react-skill-icons
```

Install with yarn
```bash
yarn add @nimr0d/react-skill-icons
```

Install with pnpm
```bash
pnpm install @nimr0d/react-skill-icons
```

Install with bun
```bash
bun add @nimr0d/react-skill-icons
```

## Usage

```tsx
import { HTML, JavaScript } from '@nimr0d/react-skill-icons-vite';
import { FC } from 'react';

const SkillsList: FC = () => {
  return (
    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
      <JavaScript className="h-12 w-12" />
      <HTML className="h-12 w-12" />
    </div>
  );
};

export default SkillsList;
```

## Available Icons

To see all icons and their names, visit [skillicons.dev](https://skillicons.dev/).

## Credits

- Original SVG icons by [tandpfun/skill-icons](https://github.com/tandpfun/skill-icons)
- React conversion and packaging by [nimr0d](https://github.com/rs-nn/react-skill-icons-vite)


# Icons List

Here's a list of all the icons currently supported. Feel free to open an issue to suggest icons to add!

|      Icon ID       |                         Icon                          |
| :----------------: | :---------------------------------------------------: |
|     `ableton`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Ableton-Dark.svg" width="48">    |
|   `activitypub`    |  <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/ActivityPub-Dark.svg" width="48">  |
|      `actix`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Actix-Dark.svg" width="48">     |
|      `adonis`      |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Adonis.svg" width="48">       |
|        `ae`        |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/AfterEffects.svg" width="48">    |
|     `aiscript`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/AiScript-Dark.svg" width="48">    |
|     `alpinejs`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/AlpineJS-Dark.svg" width="48">    |
|     `anaconda`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Anaconda-Dark.svg" width="48">    |
|  `androidstudio`   | <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/AndroidStudio-Dark.svg" width="48"> |
|     `angular`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Angular-Dark.svg" width="48">    |
|     `ansible`      |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Ansible.svg" width="48">       |
|      `apollo`      |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Apollo.svg" width="48">       |
|      `apple`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Apple-Dark.svg" width="48">     |
|     `appwrite`     |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Appwrite.svg" width="48">      |
|       `arch`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Arch-Dark.svg" width="48">      |
|     `arduino`      |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Arduino.svg" width="48">       |
|      `astro`       |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Astro.svg" width="48">        |
|       `atom`       |        <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Atom.svg" width="48">        |
|        `au`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Audition.svg" width="48">      |
|     `autocad`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/AutoCAD-Dark.svg" width="48">    |
|       `aws`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/AWS-Dark.svg" width="48">      |
|       `azul`       |        <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Azul.svg" width="48">        |
|      `azure`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Azure-Dark.svg" width="48">     |
|      `babel`       |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Babel.svg" width="48">        |
|       `bash`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Bash-Dark.svg" width="48">      |
|       `bevy`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Bevy-Dark.svg" width="48">      |
|    `bitbucket`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/BitBucket-Dark.svg" width="48">   |
|     `blender`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Blender-Dark.svg" width="48">    |
|    `bootstrap`     |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Bootstrap.svg" width="48">      |
|       `bsd`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/BSD-Dark.svg" width="48">      |
|       `bun`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Bun-Dark.svg" width="48">      |
|        `c`         |         <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/C.svg" width="48">          |
|        `cs`        |         <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/CS.svg" width="48">         |
|       `cpp`        |        <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/CPP.svg" width="48">         |
|     `crystal`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Crystal-Dark.svg" width="48">    |
|    `cassandra`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Cassandra-Dark.svg" width="48">   |
|      `clion`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/CLion-Dark.svg" width="48">     |
|     `clojure`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Clojure-Dark.svg" width="48">    |
|    `cloudflare`    |  <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Cloudflare-Dark.svg" width="48">   |
|      `cmake`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/CMake-Dark.svg" width="48">     |
|     `codepen`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/CodePen-Dark.svg" width="48">    |
|   `coffeescript`   | <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/CoffeeScript-Dark.svg" width="48">  |
|       `css`        |        <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/CSS.svg" width="48">         |
|     `cypress`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Cypress-Dark.svg" width="48">    |
|        `d3`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/D3-Dark.svg" width="48">       |
|       `dart`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Dart-Dark.svg" width="48">      |
|      `debian`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Debian-Dark.svg" width="48">     |
|       `deno`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/DENO-Dark.svg" width="48">      |
|      `devto`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/DevTo-Dark.svg" width="48">     |
|     `discord`      |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Discord.svg" width="48">       |
|       `bots`       |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/DiscordBots.svg" width="48">     |
|    `discordjs`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/DiscordJS-Dark.svg" width="48">   |
|      `django`      |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Django.svg" width="48">       |
|      `docker`      |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Docker.svg" width="48">       |
|      `dotnet`      |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/DotNet.svg" width="48">       |
|     `dynamodb`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/DynamoDB-Dark.svg" width="48">    |
|     `eclipse`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Eclipse-Dark.svg" width="48">    |
|  `elasticsearch`   | <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Elasticsearch-Dark.svg" width="48"> |
|     `electron`     |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Electron.svg" width="48">      |
|      `elixir`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Elixir-Dark.svg" width="48">     |
|      `elysia`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Elysia-Dark.svg" width="48">     |
|      `emacs`       |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Emacs.svg" width="48">        |
|      `ember`       |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Ember.svg" width="48">        |
|     `emotion`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Emotion-Dark.svg" width="48">    |
|     `express`      |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/ExpressJS-Dark.svg" width="48">   |
|     `fastapi`      |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/FastAPI.svg" width="48">       |
|    `fediverse`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Fediverse-Dark.svg" width="48">   |
|      `figma`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Figma-Dark.svg" width="48">     |
|     `firebase`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Firebase-Dark.svg" width="48">    |
|      `flask`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Flask-Dark.svg" width="48">     |
|     `flutter`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Flutter-Dark.svg" width="48">    |
|      `forth`       |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Forth.svg" width="48">        |
|     `fortran`      |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Fortran.svg" width="48">       |
| `gamemakerstudio`  |  <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/GameMakerStudio.svg" width="48">   |
|      `gatsby`      |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Gatsby.svg" width="48">       |
|       `gcp`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/GCP-Dark.svg" width="48">      |
|       `git`        |        <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Git.svg" width="48">         |
|      `github`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Github-Dark.svg" width="48">     |
|  `githubactions`   | <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/GithubActions-Dark.svg" width="48"> |
|      `gitlab`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/GitLab-Dark.svg" width="48">     |
|      `gmail`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Gmail-Dark.svg" width="48">     |
|     `gherkin`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Gherkin-Dark.svg" width="48">    |
|        `go`        |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/GoLang.svg" width="48">       |
|      `gradle`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Gradle-Dark.svg" width="48">     |
|      `godot`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Godot-Dark.svg" width="48">     |
|     `grafana`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Grafana-Dark.svg" width="48">    |
|     `graphql`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/GraphQL-Dark.svg" width="48">    |
|       `gtk`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/GTK-Dark.svg" width="48">      |
|       `gulp`       |        <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Gulp.svg" width="48">        |
|     `haskell`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Haskell-Dark.svg" width="48">    |
|       `haxe`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Haxe-Dark.svg" width="48">      |
|    `haxeflixel`    |  <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/HaxeFlixel-Dark.svg" width="48">   |
|      `heroku`      |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Heroku.svg" width="48">       |
|    `hibernate`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Hibernate-Dark.svg" width="48">   |
|       `html`       |        <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/HTML.svg" width="48">        |
|       `htmx`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Htmx-Dark.svg" width="48">      |
|       `idea`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Idea-Dark.svg" width="48">      |
|        `ai`        |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Illustrator.svg" width="48">     |
|    `instagram`     |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Instagram.svg" width="48">      |
|       `ipfs`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/IPFS-Dark.svg" width="48">      |
|       `java`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Java-Dark.svg" width="48">      |
|        `js`        |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/JavaScript.svg" width="48">     |
|     `jenkins`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Jenkins-Dark.svg" width="48">    |
|       `jest`       |        <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Jest.svg" width="48">        |
|      `jquery`      |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/JQuery.svg" width="48">       |
|      `kafka`       |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Kafka.svg" width="48">        |
|       `kali`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Kali-Dark.svg" width="48">      |
|      `kotlin`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Kotlin-Dark.svg" width="48">     |
|       `ktor`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Ktor-Dark.svg" width="48">      |
|    `kubernetes`    |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Kubernetes.svg" width="48">     |
|     `laravel`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Laravel-Dark.svg" width="48">    |
|      `latex`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/LaTeX-Dark.svg" width="48">     |
|       `less`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Less-Dark.svg" width="48">      |
|     `linkedin`     |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/LinkedIn.svg" width="48">      |
|      `linux`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Linux-Dark.svg" width="48">     |
|       `lit`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Lit-Dark.svg" width="48">      |
|       `lua`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Lua-Dark.svg" width="48">      |
|        `md`        |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Markdown-Dark.svg" width="48">    |
|     `mastodon`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Mastodon-Dark.svg" width="48">    |
|    `materialui`    |  <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/MaterialUI-Dark.svg" width="48">   |
|      `matlab`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Matlab-Dark.svg" width="48">     |
|      `maven`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Maven-Dark.svg" width="48">     |
|       `mint`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Mint-Dark.svg" width="48">      |
|     `misskey`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Misskey-Dark.svg" width="48">    |
|     `mongodb`      |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/MongoDB.svg" width="48">       |
|      `mysql`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/MySQL-Dark.svg" width="48">     |
|      `neovim`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/NeoVim-Dark.svg" width="48">     |
|      `nestjs`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/NestJS-Dark.svg" width="48">     |
|     `netlify`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Netlify-Dark.svg" width="48">    |
|      `nextjs`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/NextJS-Dark.svg" width="48">     |
|      `nginx`       |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Nginx.svg" width="48">        |
|       `nim`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Nim-Dark.svg" width="48">      |
|       `nix`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Nix-Dark.svg" width="48">      |
|      `nodejs`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/NodeJS-Dark.svg" width="48">     |
|      `notion`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Notion-Dark.svg" width="48">     |
|       `npm`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Npm-Dark.svg" width="48">      |
|      `nuxtjs`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/NuxtJS-Dark.svg" width="48">     |
|     `obsidian`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Obsidian-Dark.svg" width="48">    |
|      `ocaml`       |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/OCaml.svg" width="48">        |
|      `octave`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Octave-Dark.svg" width="48">     |
|      `opencv`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/OpenCV-Dark.svg" width="48">     |
|    `openshift`     |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/OpenShift.svg" width="48">      |
|    `openstack`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/OpenStack-Dark.svg" width="48">   |
|       `p5js`       |        <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/p5js.svg" width="48">        |
|       `perl`       |        <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Perl.svg" width="48">        |
|        `ps`        |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Photoshop.svg" width="48">      |
|       `php`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/PHP-Dark.svg" width="48">      |
|     `phpstorm`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/PhpStorm-Dark.svg" width="48">    |
|      `pinia`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Pinia-Dark.svg" width="48">     |
|       `pkl`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Pkl-Dark.svg" width="48">      |
|      `plan9`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Plan9-Dark.svg" width="48">     |
|   `planetscale`    |  <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/PlanetScale-Dark.svg" width="48">  |
|       `pnpm`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Pnpm-Dark.svg" width="48">      |
|     `postgres`     |  <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/PostgreSQL-Dark.svg" width="48">   |
|     `postman`      |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Postman.svg" width="48">       |
|    `powershell`    |  <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Powershell-Dark.svg" width="48">   |
|        `pr`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Premiere.svg" width="48">      |
|      `prisma`      |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Prisma.svg" width="48">       |
|    `processing`    |  <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Processing-Dark.svg" width="48">   |
|    `prometheus`    |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Prometheus.svg" width="48">     |
|       `pug`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Pug-Dark.svg" width="48">      |
|     `pycharm`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/PyCharm-Dark.svg" width="48">    |
|        `py`        |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Python-Dark.svg" width="48">     |
|     `pytorch`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/PyTorch-Dark.svg" width="48">    |
|        `qt`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/QT-Dark.svg" width="48">       |
|        `r`         |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/R-Dark.svg" width="48">       |
|     `rabbitmq`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/RabbitMQ-Dark.svg" width="48">    |
|      `rails`       |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Rails.svg" width="48">        |
|   `raspberrypi`    |  <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/RaspberryPi-Dark.svg" width="48">  |
|      `react`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/React-Dark.svg" width="48">     |
|    `reactivex`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/ReactiveX-Dark.svg" width="48">   |
|      `redhat`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/RedHat-Dark.svg" width="48">     |
|      `redis`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Redis-Dark.svg" width="48">     |
|      `redux`       |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Redux.svg" width="48">        |
|      `regex`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Regex-Dark.svg" width="48">     |
|      `remix`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Remix-Dark.svg" width="48">     |
|      `replit`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Replit-Dark.svg" width="48">     |
|      `rider`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Rider-Dark.svg" width="48">     |
|   `robloxstudio`   |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/RobloxStudio.svg" width="48">    |
|      `rocket`      |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Rocket.svg" width="48">       |
|     `rollupjs`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/RollupJS-Dark.svg" width="48">    |
|       `ros`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/ROS-Dark.svg" width="48">      |
|       `ruby`       |        <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Ruby.svg" width="48">        |
|       `rust`       |        <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Rust.svg" width="48">        |
|       `sass`       |        <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Sass.svg" width="48">        |
|      `spring`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Spring-Dark.svg" width="48">     |
|      `sqlite`      |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/SQLite.svg" width="48">       |
|  `stackoverflow`   | <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/StackOverflow-Dark.svg" width="48"> |
| `styledcomponents` |  <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/StyledComponents.svg" width="48">  |
|     `sublime`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Sublime-Dark.svg" width="48">    |
|     `supabase`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Supabase-Dark.svg" width="48">    |
|      `scala`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Scala-Dark.svg" width="48">     |
|     `sklearn`      |  <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/ScikitLearn-Dark.svg" width="48">  |
|     `selenium`     |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Selenium.svg" width="48">      |
|      `sentry`      |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Sentry.svg" width="48">       |
|    `sequelize`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Sequelize-Dark.svg" width="48">   |
|     `sketchup`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Sketchup-Dark.svg" width="48">    |
|     `solidity`     |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Solidity.svg" width="48">      |
|     `solidjs`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/SolidJS-Dark.svg" width="48">    |
|      `svelte`      |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Svelte.svg" width="48">       |
|       `svg`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/SVG-Dark.svg" width="48">      |
|      `swift`       |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Swift.svg" width="48">        |
|     `symfony`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Symfony-Dark.svg" width="48">    |
|     `tailwind`     |  <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/TailwindCSS-Dark.svg" width="48">  |
|      `tauri`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Tauri-Dark.svg" width="48">     |
|    `tensorflow`    |  <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/TensorFlow-Dark.svg" width="48">   |
|    `terraform`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Terraform-Dark.svg" width="48">   |
|     `threejs`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/ThreeJS-Dark.svg" width="48">    |
|     `twitter`      |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Twitter.svg" width="48">       |
|        `ts`        |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/TypeScript.svg" width="48">     |
|      `ubuntu`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Ubuntu-Dark.svg" width="48">     |
|      `unity`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Unity-Dark.svg" width="48">     |
|      `unreal`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/UnrealEngine.svg" width="48">    |
|        `v`         |       <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/V-Dark.svg" width="48">       |
|       `vala`       |        <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Vala.svg" width="48">        |
|      `vercel`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Vercel-Dark.svg" width="48">     |
|       `vim`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/VIM-Dark.svg" width="48">      |
|   `visualstudio`   | <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/VisualStudio-Dark.svg" width="48">  |
|       `vite`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Vite-Dark.svg" width="48">      |
|      `vitest`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Vitest-Dark.svg" width="48">     |
|      `vscode`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/VSCode-Dark.svg" width="48">     |
|     `vscodium`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/VSCodium-Dark.svg" width="48">    |
|       `vue`        |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/VueJS-Dark.svg" width="48">     |
|     `vuetify`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Vuetify-Dark.svg" width="48">    |
|       `wasm`       |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/WebAssembly.svg" width="48">     |
|     `webflow`      |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Webflow.svg" width="48">       |
|     `webpack`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Webpack-Dark.svg" width="48">    |
|     `webstorm`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/WebStorm-Dark.svg" width="48">    |
|     `windicss`     |   <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/WindiCSS-Dark.svg" width="48">    |
|     `windows`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Windows-Dark.svg" width="48">    |
|    `wordpress`     |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Wordpress.svg" width="48">      |
|     `workers`      |    <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Workers-Dark.svg" width="48">    |
|        `xd`        |         <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/XD.svg" width="48">         |
|       `yarn`       |     <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Yarn-Dark.svg" width="48">      |
|       `yew`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Yew-Dark.svg" width="48">      |
|       `zig`        |      <img src="https://raw.githubusercontent.com/rs-nn/react-skill-icons-vite/main/.github/icons/Zig-Dark.svg" width="48">      |

## Props

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

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

## Credits

Authors of skillicons.dev and react-skillicons
<br>
All credits go to them

- [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>