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 `
`;
}
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
================================================
Showcase your skills on your GitHub or resumé with ease!
Powered by Cloudflare Workers ⚡
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.
# 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
[](https://skillicons.dev)
```
[](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
[](https://skillicons.dev)
```
[](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
[](https://skillicons.dev)
```
[](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
|
| `activitypub` | 
|
| `actix` | 
|
| `adonis` | 
|
| `ae` | 
|
| `aiscript` | 
|
| `alpinejs` | 
|
| `anaconda` | 
|
| `androidstudio` | 
|
| `angular` | 
|
| `ansible` | 
|
| `apollo` | 
|
| `apple` | 
|
| `appwrite` | 
|
| `arch` | 
|
| `arduino` | 
|
| `astro` | 
|
| `atom` | 
|
| `au` | 
|
| `autocad` | 
|
| `aws` | 
|
| `azul` | 
|
| `azure` | 
|
| `babel` | 
|
| `bash` | 
|
| `bevy` | 
|
| `bitbucket` | 
|
| `blender` | 
|
| `bootstrap` | 
|
| `bsd` | 
|
| `bun` | 
|
| `c` | 
|
| `cs` | 
|
| `cpp` | 
|
| `crystal` | 
|
| `cassandra` | 
|
| `clion` | 
|
| `clojure` | 
|
| `cloudflare` | 
|
| `cmake` | 
|
| `codepen` | 
|
| `coffeescript` | 
|
| `css` | 
|
| `cypress` | 
|
| `d3` | 
|
| `dart` | 
|
| `debian` | 
|
| `deno` | 
|
| `devto` | 
|
| `discord` | 
|
| `bots` | 
|
| `discordjs` | 
|
| `django` | 
|
| `docker` | 
|
| `dotnet` | 
|
| `dynamodb` | 
|
| `eclipse` | 
|
| `elasticsearch` | 
|
| `electron` | 
|
| `elixir` | 
|
| `elysia` | 
|
| `emacs` | 
|
| `ember` | 
|
| `emotion` | 
|
| `express` | 
|
| `fastapi` | 
|
| `fediverse` | 
|
| `figma` | 
|
| `firebase` | 
|
| `flask` | 
|
| `flutter` | 
|
| `forth` | 
|
| `fortran` | 
|
| `gamemakerstudio` | 
|
| `gatsby` | 
|
| `gcp` | 
|
| `git` | 
|
| `github` | 
|
| `githubactions` | 
|
| `gitlab` | 
|
| `gmail` | 
|
| `gherkin` | 
|
| `go` | 
|
| `gradle` | 
|
| `godot` | 
|
| `grafana` | 
|
| `graphql` | 
|
| `gtk` | 
|
| `gulp` | 
|
| `haskell` | 
|
| `haxe` | 
|
| `haxeflixel` | 
|
| `heroku` | 
|
| `hibernate` | 
|
| `html` | 
|
| `htmx` | 
|
| `idea` | 
|
| `ai` | 
|
| `instagram` | 
|
| `ipfs` | 
|
| `java` | 
|
| `js` | 
|
| `jenkins` | 
|
| `jest` | 
|
| `jquery` | 
|
| `kafka` | 
|
| `kali` | 
|
| `kotlin` | 
|
| `ktor` | 
|
| `kubernetes` | 
|
| `laravel` | 
|
| `latex` | 
|
| `less` | 
|
| `linkedin` | 
|
| `linux` | 
|
| `lit` | 
|
| `lua` | 
|
| `md` | 
|
| `mastodon` | 
|
| `materialui` | 
|
| `matlab` | 
|
| `maven` | 
|
| `mint` | 
|
| `misskey` | 
|
| `mongodb` | 
|
| `mysql` | 
|
| `neovim` | 
|
| `nestjs` | 
|
| `netlify` | 
|
| `nextjs` | 
|
| `nginx` | 
|
| `nim` | 
|
| `nix` | 
|
| `nodejs` | 
|
| `notion` | 
|
| `npm` | 
|
| `nuxtjs` | 
|
| `obsidian` | 
|
| `ocaml` | 
|
| `octave` | 
|
| `opencv` | 
|
| `openshift` | 
|
| `openstack` | 
|
| `p5js` | 
|
| `perl` | 
|
| `ps` | 
|
| `php` | 
|
| `phpstorm` | 
|
| `pinia` | 
|
| `pkl` | 
|
| `plan9` | 
|
| `planetscale` | 
|
| `pnpm` | 
|
| `postgres` | 
|
| `postman` | 
|
| `powershell` | 
|
| `pr` | 
|
| `prisma` | 
|
| `processing` | 
|
| `prometheus` | 
|
| `pug` | 
|
| `pycharm` | 
|
| `py` | 
|
| `pytorch` | 
|
| `qt` | 
|
| `r` | 
|
| `rabbitmq` | 
|
| `rails` | 
|
| `raspberrypi` | 
|
| `react` | 
|
| `reactivex` | 
|
| `redhat` | 
|
| `redis` | 
|
| `redux` | 
|
| `regex` | 
|
| `remix` | 
|
| `replit` | 
|
| `rider` | 
|
| `robloxstudio` | 
|
| `rocket` | 
|
| `rollupjs` | 
|
| `ros` | 
|
| `ruby` | 
|
| `rust` | 
|
| `sass` | 
|
| `spring` | 
|
| `sqlite` | 
|
| `stackoverflow` | 
|
| `styledcomponents` | 
|
| `sublime` | 
|
| `supabase` | 
|
| `scala` | 
|
| `sklearn` | 
|
| `selenium` | 
|
| `sentry` | 
|
| `sequelize` | 
|
| `sketchup` | 
|
| `solidity` | 
|
| `solidjs` | 
|
| `svelte` | 
|
| `svg` | 
|
| `swift` | 
|
| `symfony` | 
|
| `tailwind` | 
|
| `tauri` | 
|
| `tensorflow` | 
|
| `terraform` | 
|
| `threejs` | 
|
| `twitter` | 
|
| `ts` | 
|
| `ubuntu` | 
|
| `unity` | 
|
| `unreal` | 
|
| `v` | 
|
| `vala` | 
|
| `vercel` | 
|
| `vim` | 
|
| `visualstudio` | 
|
| `vite` | 
|
| `vitest` | 
|
| `vscode` | 
|
| `vscodium` | 
|
| `vue` | 
|
| `vuetify` | 
|
| `wasm` | 
|
| `webflow` | 
|
| `webpack` | 
|
| `webstorm` | 
|
| `windicss` | 
|
| `windows` | 
|
| `wordpress` | 
|
| `workers` | 
|
| `xd` | 
|
| `yarn` | 
|
| `yew` | 
|
| `zig` | 
|
---
## 💖 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:
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"