Full Code of tandpfun/skill-icons for AI

Repository: tandpfun/skill-icons
Branch: main
Commit: 7f7e691e71ae
Files: 15
Total size: 32.8 KB

Directory structure:
gitextract_yuqade93/

├── .gitattributes
├── .github/
│   ├── FUNDING.yml
│   ├── ISSUE_TEMPLATE/
│   │   ├── bug-report.yml
│   │   ├── feature-request.yml
│   │   └── suggest-icon.yml
│   └── workflows/
│       └── wrangler-action.yml
├── .gitignore
├── .prettierignore
├── .prettierrc
├── LICENSE
├── build.js
├── index.js
├── package.json
├── readme.md
└── wrangler.toml

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitattributes
================================================
# Auto detect text files and perform LF normalization
* text=auto
*.svg linguist-detectable


================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms

github: [tandpfun]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: thijsdev
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
polar: # Replace with a single Polar username
buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']


================================================
FILE: .github/ISSUE_TEMPLATE/bug-report.yml
================================================
name: 🐛 Bug Report
title: '[BUG REPORT] Bug'
description: A bug in the API or elsewhere
labels: 'bug report'
body:

- type: input
  id: bug
  attributes:
    label: The bug
    description: "A complete of what the bug is"
  validations:
    required: true
    
- type: input
  id: steps
  attributes:
    label: Steps to reproduce
    description: "What'd you do to make the bug happen?"
    placeholder: "1. Request API..."
  validations:
    required: false
    
- type: input
  id: extra
  attributes:
    label: Any extra info
  validations:
    required: false


================================================
FILE: .github/ISSUE_TEMPLATE/feature-request.yml
================================================
name: 💡 Feature Request
title: '[FEATURE REQUEST] Feature'
description: Request a feature with the API
labels: 'feature request'
body:

# skill name block
- type: input
  id: request
  attributes:
    label: Feature requested
    description: "The feature you're requesting. Should have to do with the API."
    placeholder: "Add this endpoint because..."
  validations:
    required: true


================================================
FILE: .github/ISSUE_TEMPLATE/suggest-icon.yml
================================================
name: 🚀 Suggest an Icon
title: '[NEW ICON] Skill Name'
description: Suggest an icon to be added to the list!
labels: 'icon suggestion'
body:

# skill name block
- type: input
  id: skill-name
  attributes:
    label: Skill Name
    description: "The name of the skill you're suggesting. Feel free to suggest more than one!"
    placeholder: "VS Code"
  validations:
    required: true

# reason to add block
- type: textarea
  id: reason
  attributes:
    label: Why?
    description: "Why we should add the skill(s) to the project."
    placeholder: "It's popular for web development..."
  validations:
    required: true

# reference image block
- type: textarea
  id: reference-image
  attributes:
    label: Reference Image
    description: "Do you have any images of what the logo looks like? SVG preferred."
    placeholder: "Feel free to drag and drop the files here."
  validations:
    required: false


================================================
FILE: .github/workflows/wrangler-action.yml
================================================
name: Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 16

      - name: build
        run: yarn build

      - name: Publish
        uses: cloudflare/wrangler-action@1.3.0
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}


================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional stylelint cache
.stylelintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# vuepress v2.x temp and cache directory
.temp
.cache

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

# Cloudflare Worker
worker/

================================================
FILE: .prettierignore
================================================
icons/

================================================
FILE: .prettierrc
================================================
{
  "singleQuote": true,
  "arrowParens": "avoid",
  "semi": true,
  "tabWidth": 2
}


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2022 tandpfun

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: build.js
================================================
const fs = require('fs');

const iconsDir = fs.readdirSync('./icons');
const icons = {};
for (const icon of iconsDir) {
  const name = icon.replace('.svg', '').toLowerCase();
  icons[name] = String(fs.readFileSync(`./icons/${icon}`));
}

if (!fs.existsSync('./dist')) fs.mkdirSync('./dist');
fs.writeFileSync('./dist/icons.json', JSON.stringify(icons));


================================================
FILE: index.js
================================================
const icons = require('./dist/icons.json');
const iconNameList = [...new Set(Object.keys(icons).map(i => i.split('-')[0]))];
const shortNames = {
  js: 'javascript',
  ts: 'typescript',
  py: 'python',
  tailwind: 'tailwindcss',
  vue: 'vuejs',
  nuxt: 'nuxtjs',
  go: 'golang',
  cf: 'cloudflare',
  wasm: 'webassembly',
  postgres: 'postgresql',
  k8s: 'kubernetes',
  next: 'nextjs',
  mongo: 'mongodb',
  md: 'markdown',
  ps: 'photoshop',
  ai: 'illustrator',
  pr: 'premiere',
  ae: 'aftereffects',
  scss: 'sass',
  sc: 'scala',
  net: 'dotnet',
  gatsbyjs: 'gatsby',
  gql: 'graphql',
  vlang: 'v',
  amazonwebservices: 'aws',
  bots: 'discordbots',
  express: 'expressjs',
  googlecloud: 'gcp',
  mui: 'materialui',
  windi: 'windicss',
  unreal: 'unrealengine',
  nest: 'nestjs',
  ktorio: 'ktor',
  pwsh: 'powershell',
  au: 'audition',
  rollup: 'rollupjs',
  rxjs: 'reactivex',
  rxjava: 'reactivex',
  ghactions: 'githubactions',
  sklearn: 'scikitlearn',
};
const themedIcons = [
  ...Object.keys(icons)
    .filter(i => i.includes('-light') || i.includes('-dark'))
    .map(i => i.split('-')[0]),
];

const ICONS_PER_LINE = 15;
const ONE_ICON = 48;
const SCALE = ONE_ICON / (300 - 44);

function generateSvg(iconNames, perLine) {
  const iconSvgList = iconNames.map(i => icons[i]);

  const length = Math.min(perLine * 300, iconNames.length * 300) - 44;
  const height = Math.ceil(iconSvgList.length / perLine) * 300 - 44;
  const scaledHeight = height * SCALE;
  const scaledWidth = length * SCALE;

  return `
  <svg width="${scaledWidth}" height="${scaledHeight}" viewBox="0 0 ${length} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    ${iconSvgList
      .map(
        (i, index) =>
          `
        <g transform="translate(${(index % perLine) * 300}, ${
            Math.floor(index / perLine) * 300
          })">
          ${i}
        </g>
        `
      )
      .join(' ')}
  </svg>
  `;
}

function parseShortNames(names, theme = 'dark') {
  return names.map(name => {
    if (iconNameList.includes(name))
      return name + (themedIcons.includes(name) ? `-${theme}` : '');
    else if (name in shortNames)
      return (
        shortNames[name] +
        (themedIcons.includes(shortNames[name]) ? `-${theme}` : '')
      );
  });
}

async function handleRequest(request) {
  const { pathname, searchParams } = new URL(request.url);

  const path = pathname.replace(/^\/|\/$/g, '');

  if (path === 'icons') {
    const iconParam = searchParams.get('i') || searchParams.get('icons');
    if (!iconParam)
      return new Response("You didn't specify any icons!", { status: 400 });
    const theme = searchParams.get('t') || searchParams.get('theme');
    if (theme && theme !== 'dark' && theme !== 'light')
      return new Response('Theme must be either "light" or "dark"', {
        status: 400,
      });
    const perLine = searchParams.get('perline') || ICONS_PER_LINE;
    if (isNaN(perLine) || perLine < -1 || perLine > 50)
      return new Response('Icons per line must be a number between 1 and 50', {
        status: 400,
      });

    let iconShortNames = [];
    if (iconParam === 'all') iconShortNames = iconNameList;
    else iconShortNames = iconParam.split(',');

    const iconNames = parseShortNames(iconShortNames, theme || undefined);
    if (!iconNames)
      return new Response("You didn't format the icons param correctly!", {
        status: 400,
      });

    const svg = generateSvg(iconNames, perLine);

    return new Response(svg, { headers: { 'Content-Type': 'image/svg+xml' } });
  } else if (path === 'api/icons') {
    return new Response(JSON.stringify(iconNameList), {
      headers: {
        'content-type': 'application/json;charset=UTF-8',
      },
    });
  } else if (path === 'api/svgs') {
    return new Response(JSON.stringify(icons), {
      headers: {
        'content-type': 'application/json;charset=UTF-8',
      },
    });
  } else {
    return fetch(request);
  }
}

addEventListener('fetch', event => {
  event.respondWith(
    handleRequest(event.request).catch(
      err => new Response(err.stack, { status: 500 })
    )
  );
});


================================================
FILE: package.json
================================================
{
	"name": "skill-icons",
	"version": "1.0.0",
	"main": "index.js",
	"license": "MIT",
	"scripts": {
		"dev": "node build.js && miniflare --watch",
		"build": "node build.js",
		"deploy": "node build.js && wrangler publish"
	},
	"devDependencies": {
		"@cloudflare/wrangler": "^1.19.8",
		"miniflare": "^2.3.0",
		"prettier": "^2.5.1"
	}
}


================================================
FILE: readme.md
================================================
<p align="center"><img align="center" width="280" src="./.github/text-logo.svg#gh-dark-mode-only"/></p>
<p align="center"><img align="center" width="280" src="./.github/text-logo-light.svg#gh-light-mode-only"/></p>
<h3 align="center">Showcase your skills on your GitHub or resumé with ease!</h3>
<hr>

<h3 align="center">Powered by Cloudflare Workers ⚡</h3>

<h3>NOTE: To keep icons consistent and to ensure browser support, we don't accept pull requests for icon submissions. If you would like an icon added, please open an issue.<h3>

# Docs

- [Example](#example)
- [Specifying Icons](#specifying-icons)
- [Themed Icons](#themed-icons)
- [Icons Per Line](#icons-per-line)
- [Centering Icons](#centering-icons)
- [Icons List](#icons-list)

# Example

<p align="center"><img align="center" src="./.github/example-dark.png#gh-dark-mode-only"/></p>
<p align="center"><img align="center" src="./.github/example-light.png#gh-light-mode-only"/></p>

# Specifying Icons

Copy and paste the code block below into your readme to add the skills icon element!

Change the `?i=js,html,css` to a list of your skills separated by ","s! You can find a full list of icons [here](#icons-list).

```md
[![My Skills](https://skillicons.dev/icons?i=js,html,css,wasm)](https://skillicons.dev)
```

[![My Skills](https://skillicons.dev/icons?i=js,html,css,wasm)](https://skillicons.dev)

# Themed Icons

Some icons have a dark and light themed background. You can specify which theme you want as a url parameter.

This is optional. The default theme is dark.

Change the `&theme=light` to either `dark` or `light`. The theme is the background color, so light theme has a white icon background, and dark has a black-ish.

**Light Theme Example:**

```md
[![My Skills](https://skillicons.dev/icons?i=java,kotlin,nodejs,figma&theme=light)](https://skillicons.dev)
```

[![My Skills](https://skillicons.dev/icons?i=java,kotlin,nodejs,figma&theme=light)](https://skillicons.dev)

# Icons Per Line

You can specify how many icons you would like per line! It's an optional argument, and the default is 15.

Change the `&perline=3` to any number between 1 and 50.

```md
[![My Skills](https://skillicons.dev/icons?i=aws,gcp,azure,react,vue,flutter&perline=3)](https://skillicons.dev)
```

[![My Skills](https://skillicons.dev/icons?i=aws,gcp,azure,react,vue,flutter&perline=3)](https://skillicons.dev)

# Centering Icons

Want to center the icons in your readme? The SVGs are automatically resized, so you can do it the same way you'd normally center an image.

```html
<p align="center">
  <a href="https://skillicons.dev">
    <img src="https://skillicons.dev/icons?i=git,kubernetes,docker,c,vim" />
  </a>
</p>
```

<p align="center">
  <a href="https://skillicons.dev">
    <img src="https://skillicons.dev/icons?i=git,kubernetes,docker,c,vim" />
  </a>
</p>

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

---

## 💖 Support the Project

Thank you so much already for using my projects! If you want to go a step further and support my open source work, buy me a coffee:

<a href='https://ko-fi.com/Q5Q860KQ2' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://cdn.ko-fi.com/cdn/kofi1.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>

To support the project directly, feel free to open issues for icon suggestions, or contribute with a pull request!


================================================
FILE: wrangler.toml
================================================
name = "skill-icons"
type = "webpack"
route = ''
zone_id = ''
usage_model = ''
compatibility_flags = []
workers_dev = true
compatibility_date = "2022-03-02"