skill-icons
skill-icons copied to clipboard
Published
20 hours ago •
tandpfun
tandpfun
I made an icon explorer!
I have created an icon explorer for this project with Svelte, view it here: https://svelte.dev/repl/e29cb982e5df4cbc8b80fdc9ad04cbe8?version=3.48.0
And a screen recording:
https://user-images.githubusercontent.com/61319150/172241957-d3487330-275c-4a5b-b1d6-9b1154ccc1cf.mp4
The code
Show
App.svelte:
<script>
import { icons } from "./icons.js";
import { flip } from 'svelte/animate';
import {blur} from "svelte/transition";
let lightMode = false;
let search = "";
let selected = {};
$: ic = icons.filter(i => i.id.includes(search));
function copy(){
prompt("URL: ", `https://skillicons.dev/icons?i=${Object.entries(selected).filter(i => i[1]).map(i => i[0])}`)
}
$: enabled = Object.values(selected).filter(Boolean).length;
</script>
<div class="outer">
<div class="container">
<input bind:value={search} placeholder="Search icons"/>
<button class="copy" on:click={copy} disabled={!enabled}>
{#if !enabled}
Select some icons to continue
{:else}
Copy URL for {#key enabled}<span in:blur>{enabled}</span>{/key} icons
{/if}
</button>
<label><input type="checkbox" bind:checked={lightMode}> Light mode</label>
<div class="icons_list">
{#each ic as icon (icon.id)}
<div class="icon" on:click={() => (selected[icon.id] = !selected[icon.id])} class:active={selected[icon.id]} animate:flip={{duration: 500}} transition:blur>
<img src={icon.url.replace("Dark", lightMode ? "Light" : "Dark")} alt="{icon.id} icon"/>
<div class="overlay">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ph" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.2 104.2 0 0 0 128 24Zm49.5 85.8l-58.6 56a8.1 8.1 0 0 1-5.6 2.2a7.7 7.7 0 0 1-5.5-2.2l-29.3-28a8 8 0 1 1 11-11.6l23.8 22.7l53.2-50.7a8 8 0 0 1 11 11.6Z"></path></svg>
</div>
</div>
{/each}
</div>
</div>
</div>
<style>
.outer {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
min-height: 100vh;
}
.container {
width: 80vw;
max-width: 600px;
display: flex;
flex-direction: column;
}
input {
padding: .5rem 1rem;
border: 1px solid #0001;
transition: box-shadow .2s ease;
}
label {
accent-color: rgba(38,129,61,0.8);
font-style: italic;
color: #666;
}
input:focus {
box-shadow: 0 0 0 2px #0001;
outline: none;
}
.icons_list {
gap: .3rem;
margin-top: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, 65px);
height: 60vh;
overflow: scroll;
}
.icon .overlay {
transition: opacity .3s ease;
display: grid;
place-items: center;
position: absolute;
color: white;
inset: 0;
z-index: 1;
opacity: 0;
background: #36c24ccc;
}
.icon.active .overlay {
opacity: 1;
}
.icon:active {transform: scale(.95);}
.icon {
transition: transform .1s ease;
cursor: pointer;
height: fit-content;
position: relative;
overflow: hidden;
border-radius: 17px;
width: 65px;
height: 65px;
}
.icon img {
width: 100%;
}
button {
background: rgba(38,129,61,0.8);
border: 0.15rem solid #2c9447;
color: #fff;
font-weight: 400;
border-radius: 0.2rem;
cursor: pointer;
transition: background-color 0.2s ease, color 0.3s ease, box-shadow 0.5s ease, transform 0.2s ease;
}
button:hover {
background: rgba(50,168,80,0.1);
color: #0f3218;
box-shadow: 0 0 0 3px rgba(50,168,80,0.1);
}
button:active {
transform: scale(0.98);
}
button:focus {
box-shadow: 0 0 0 5px rgba(50,168,80,0.1);
}
button:hover:focus {
box-shadow: 0 0 0 3px rgba(50,168,80,0.1), 0 0 0 5px rgba(50,168,80,0.1);
}
button:disabled, button[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
</style>
Icons.js:
export const icons = [
{
"id": "ableton",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Ableton-Dark.svg"
},
{
"id": "activitypub",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/ActivityPub-Dark.svg"
},
{
"id": "actix",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Actix-Dark.svg"
},
{
"id": "ae",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/AfterEffects.svg"
},
{
"id": "aiscript",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/AiScript-Dark.svg"
},
{
"id": "alpinejs",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/AlpineJS-Dark.svg"
},
{
"id": "androidstudio",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/AndroidStudio-Dark.svg"
},
{
"id": "angular",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Angular-Dark.svg"
},
{
"id": "ansible",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Ansible.svg"
},
{
"id": "apollo",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Apollo.svg"
},
{
"id": "appwrite",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Appwrite.svg"
},
{
"id": "arduino",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Arduino.svg"
},
{
"id": "astro",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Astro.svg"
},
{
"id": "au",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Audition.svg"
},
{
"id": "autocad",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/AutoCAD-Dark.svg"
},
{
"id": "aws",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/AWS-Dark.svg"
},
{
"id": "azul",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Azul.svg"
},
{
"id": "azure",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Azure-Dark.svg"
},
{
"id": "bash",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Bash-Dark.svg"
},
{
"id": "bevy",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Bevy-Dark.svg"
},
{
"id": "blender",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Blender-Dark.svg"
},
{
"id": "bootstrap",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Bootstrap.svg"
},
{
"id": "bsd",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/BSD-Dark.svg"
},
{
"id": "c",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/C.svg"
},
{
"id": "cs",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/CS.svg"
},
{
"id": "cpp",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/CPP.svg"
},
{
"id": "cassandra",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Cassandra-Dark.svg"
},
{
"id": "clojure",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Clojure-Dark.svg"
},
{
"id": "cloudflare",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Cloudflare-Dark.svg"
},
{
"id": "codepen",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/CodePen-Dark.svg"
},
{
"id": "coffeescript",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/CoffeeScript-Dark.svg"
},
{
"id": "css",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/CSS.svg"
},
{
"id": "dart",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Dart-Dark.svg"
},
{
"id": "deno",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/DENO-Dark.svg"
},
{
"id": "discord",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Discord.svg"
},
{
"id": "bots",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/DiscordBots.svg"
},
{
"id": "django",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Django.svg"
},
{
"id": "docker",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Docker.svg"
},
{
"id": "dotnet",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/DotNet.svg"
},
{
"id": "dynamodb",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/DynamoDB-Dark.svg"
},
{
"id": "eclipse",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Eclipse-Dark.svg"
},
{
"id": "electron",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Electron.svg"
},
{
"id": "elixir",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Elixir-Dark.svg"
},
{
"id": "emacs",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Emacs.svg"
},
{
"id": "ember",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Ember.svg"
},
{
"id": "emotion",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Emotion-Dark.svg"
},
{
"id": "express",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/ExpressJS-Dark.svg"
},
{
"id": "fastapi",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/FastAPI.svg"
},
{
"id": "fediverse",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Fediverse-Dark.svg"
},
{
"id": "figma",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Figma-Dark.svg"
},
{
"id": "firebase",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Firebase-Dark.svg"
},
{
"id": "flask",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Flask-Dark.svg"
},
{
"id": "flutter",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Flutter-Dark.svg"
},
{
"id": "fortran",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Fortran.svg"
},
{
"id": "gamemakerstudio",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/GameMakerStudio.svg"
},
{
"id": "gatsby",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Gatsby.svg"
},
{
"id": "gcp",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/GCP-Dark.svg"
},
{
"id": "git",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Git.svg"
},
{
"id": "github",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Github-Dark.svg"
},
{
"id": "gitlab",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/GitLab-Dark.svg"
},
{
"id": "gherkin",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Gherkin-Dark.svg"
},
{
"id": "go",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/GoLang.svg"
},
{
"id": "godot",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Godot-Dark.svg"
},
{
"id": "grafana",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Grafana-Dark.svg"
},
{
"id": "graphql",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/GraphQL-Dark.svg"
},
{
"id": "gtk",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/GTK-Dark.svg"
},
{
"id": "haskell",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Haskell-Dark.svg"
},
{
"id": "haxe",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Haxe-Dark.svg"
},
{
"id": "haxeflixel",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/HaxeFlixel-Dark.svg"
},
{
"id": "heroku",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Heroku.svg"
},
{
"id": "html",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/HTML.svg"
},
{
"id": "idea",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Idea-Dark.svg"
},
{
"id": "ai",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Illustrator.svg"
},
{
"id": "instagram",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Instagram.svg"
},
{
"id": "java",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Java-Dark.svg"
},
{
"id": "js",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/JavaScript.svg"
},
{
"id": "jenkins",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Jenkins-Dark.svg"
},
{
"id": "jest",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Jest.svg"
},
{
"id": "jquery",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/JQuery.svg"
},
{
"id": "julia",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Julia-Dark.svg"
},
{
"id": "kotlin",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Kotlin-Dark.svg"
},
{
"id": "ktor",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Ktor-Dark.svg"
},
{
"id": "kubernetes",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Kubernetes.svg"
},
{
"id": "laravel",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Laravel-Dark.svg"
},
{
"id": "latex",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/LaTeX-Dark.svg"
},
{
"id": "linkedin",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/LinkedIn.svg"
},
{
"id": "linux",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Linux-Dark.svg"
},
{
"id": "lua",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Lua-Dark.svg"
},
{
"id": "md",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Markdown-Dark.svg"
},
{
"id": "mastodon",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Mastodon-Dark.svg"
},
{
"id": "materialui",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/MaterialUI-Dark.svg"
},
{
"id": "misskey",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Misskey-Dark.svg"
},
{
"id": "mongodb",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/MongoDB.svg"
},
{
"id": "mysql",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/MySQL-Dark.svg"
},
{
"id": "neovim",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/NeoVim-Dark.svg"
},
{
"id": "nestjs",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/NestJS-Dark.svg"
},
{
"id": "netlify",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Netlify-Dark.svg"
},
{
"id": "nextjs",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/NextJS-Dark.svg"
},
{
"id": "nginx",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Nginx.svg"
},
{
"id": "nim",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Nim-Dark.svg"
},
{
"id": "nodejs",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/NodeJS-Dark.svg"
},
{
"id": "nuxtjs",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/NuxtJS-Dark.svg"
},
{
"id": "ocaml",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/OCaml.svg"
},
{
"id": "octave",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Octave-Dark.svg"
},
{
"id": "openshift",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/OpenShift.svg"
},
{
"id": "openstack",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/OpenStack-Dark.svg"
},
{
"id": "perl",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Perl.svg"
},
{
"id": "ps",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Photoshop.svg"
},
{
"id": "php",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/PHP-Dark.svg"
},
{
"id": "plan9",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Plan9-Dark.svg"
},
{
"id": "postgres",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/PostgreSQL-Dark.svg"
},
{
"id": "powershell",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Powershell-Dark.svg"
},
{
"id": "pr",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Premiere.svg"
},
{
"id": "prisma",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Prisma.svg"
},
{
"id": "prometheus",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Prometheus.svg"
},
{
"id": "pug",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Pug-Dark.svg"
},
{
"id": "py",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Python-Dark.svg"
},
{
"id": "pytorch",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/PyTorch-Dark.svg"
},
{
"id": "qt",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/QT-Dark.svg"
},
{
"id": "r",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/R-Dark.svg"
},
{
"id": "rails",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Rails.svg"
},
{
"id": "raspberrypi",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/RaspberryPi-Dark.svg"
},
{
"id": "react",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/React-Dark.svg"
},
{
"id": "redis",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Redis-Dark.svg"
},
{
"id": "redux",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Redux.svg"
},
{
"id": "regex",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Regex-Dark.svg"
},
{
"id": "remix",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Remix-Dark.svg"
},
{
"id": "rocket",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Rocket.svg"
},
{
"id": "rollupjs",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/RollupJS-Dark.svg"
},
{
"id": "ruby",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Ruby.svg"
},
{
"id": "rust",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Rust.svg"
},
{
"id": "sass",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Sass.svg"
},
{
"id": "solidity",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Solidity.svg"
},
{
"id": "spring",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Spring-Dark.svg"
},
{
"id": "sqlite",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/SQLite.svg"
},
{
"id": "stackoverflow",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/StackOverflow-Dark.svg"
},
{
"id": "styledcomponents",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/StyledComponents.svg"
},
{
"id": "supabase",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Supabase-Dark.svg"
},
{
"id": "scala",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Scala-Dark.svg"
},
{
"id": "svelte",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Svelte.svg"
},
{
"id": "svg",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/SVG-Dark.svg"
},
{
"id": "swift",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Swift.svg"
},
{
"id": "symfony",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Symfony-Dark.svg"
},
{
"id": "tailwind",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/TailwindCSS-Dark.svg"
},
{
"id": "tauri",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Tauri-Dark.svg"
},
{
"id": "tensorflow",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/TensorFlow-Dark.svg"
},
{
"id": "twitter",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Twitter.svg"
},
{
"id": "ts",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/TypeScript.svg"
},
{
"id": "unity",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Unity-Dark.svg"
},
{
"id": "unreal",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/UnrealEngine.svg"
},
{
"id": "v",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/V-Dark.svg"
},
{
"id": "vala",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Vala.svg"
},
{
"id": "vim",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/VIM-Dark.svg"
},
{
"id": "visualstudio",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/VisualStudio-Dark.svg"
},
{
"id": "vite",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Vite-Dark.svg"
},
{
"id": "vscode",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/VSCode-Dark.svg"
},
{
"id": "vue",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/VueJS-Dark.svg"
},
{
"id": "wasm",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/WebAssembly.svg"
},
{
"id": "webpack",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Webpack-Dark.svg"
},
{
"id": "windicss",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/WindiCSS-Dark.svg"
},
{
"id": "wordpress",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Wordpress.svg"
},
{
"id": "workers",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Workers-Dark.svg"
},
{
"id": "zig",
"url": "https://github.com/tandpfun/skill-icons/raw/main/icons/Zig-Dark.svg"
}
]
I love it! I don't know svelte right now but it would be cool to add this to the site as the icon builder.
I love it! I don't know svelte right now but it would be cool to add this to the site as the icon builder. Svelte is famous for being a disappearing framework, meaning that instead of shipping a bundle + virtual DOM it compiles directly to HTML + JS + CSS, so this should be fairly simple to add.
The site isn't open source rn and it's in vue, so that wouldn't really work.
Didn't know that the site was in Vue or I would've coded it in vue
I recently discovered a website that can conveniently generate skill icons and copy links. :) https://www.skilliconsgenerator.com/
