skill-icons 技能图标速成指南：3 个 URL 参数把 GitHub 文字墙变成图标墙

skill-icons 技能图标速成指南3 个 URL 参数把 GitHub 文字墙变成图标墙【免费下载链接】skill-iconsShowcase your skills on your Github readme or resumé with ease ✨项目地址: https://gitcode.com/gh_mirrors/sk/skill-icons简历改好了可招聘官打开你的 GitHub 主页技术栈还是一段干巴巴的文字罗列扫一眼就被划走——这个翻车瞬间不少人经历过。skill-icons 是一个开源技能图标墙项目往 README 里粘贴一行代码你的技术栈就会实时渲染成彩色图标墙三秒让对方 get 到你的全部实力。能力边界速览它不是一个本地图标库而是由 Cloudflare Workers 驱动的动态渲染服务贴一行代码实时返回一张即用的 SVG。不用注册账号、不下载图片、不部署服务器能力边界如下能力项边界能覆盖200 技能图标覆盖语言js、py、go、框架react、spring、tensorflow、基建docker、kubernetes三大类免部署README 里贴一行代码Workers 实时渲染并返回 SVG自动适配尺寸随图标数量与行数自动缩放默认 dark 主题支持theme参数切换 light可延展SVG 源文件全部在 icons/本地克隆后可自行改色定制图 1skill-icons 深色主题图标墙彩色图标在深色背景下对比鲜明skill-icons 上手路径从文字墙到图标墙锁定你的技能 ID。每个技能都有唯一 IDJavaScript 是js、Python 是py、Docker 直接写docker。完整清单见 readme.md 底部的对照表也可以直接翻 icons/ 目录按文件名对照。拼出渲染链接。把需要的 ID 用英文逗号分隔塞进i参数后再包一层 markdown 图片语法[](https://skillicons.dev)贴进 README 并刷新。提交后一排深色背景的 skill-icons 技能图标就出现了后续增删图标时 SVG 高度会自动重算无需手动改尺寸。默认深色底适合暗黑风主页如果你走浅色路线在链接后追加themelight图标墙就换白色底图 2skill-icons 亮色主题图标墙与白色页面自然融合skill-icons 主题切换与排版调参切换深浅主题。适用场景主页整体是浅色时默认黑底会显得突兀。关键参数themelight或themedark只接受这两个值。实际效果图标背景换成白底自然融入浅色页面图标本身的配色不变。[](https://skillicons.dev)控制每行数量。适用场景图标一多默认单行排布就显得松散。关键参数perline3取值 1 到 50不填默认 15。实际效果图标自动换行图标墙更短、更聚焦核心技能。居中展示图标墙。适用场景想让它正位居中挂在主页上。关键参数用p aligncenter标签包裹链接即可。实际效果渲染结果本身就是一张图片按普通图片的居中方式处理就行。短别名少敲键盘。适用场景全称太长链接看得眼花。关键参数js→javascript、py→python、k8s→kubernetes、next→nextjs 等内置别名。实际效果链接更短日后维护改起来更省心。想再往深里定制配色可用git clone https://gitcode.com/gh_mirrors/sk/skill-icons把仓库拉到本地所有 SVG 源文件都在icons/目录里。不同身份怎么用场景对号入座当你是求职中的后端工程师。图标墙直接放在简介正下方?ijava,spring,mysql,redis,docker,kafkathemedark岗位关键词排在第一排面试官扫一眼就能确认匹配度。当你是全栈开发者。别堆在一起按领域拆三组分别生成前端?ireact,vue,ts,tailwind、后端?inodejs,go,postgres、工具?idocker,git,linux,vscode组间用分隔线隔开。踩坑前先看这里高频问题一句话解决图标加载慢 → 控制单次渲染的数量或本地克隆仓库部署彻底脱离外部依赖想改图标配色 → 全部是 SVG 矢量文件本地克隆后用任意 SVG 编辑器改即可图标墙出不来 → 检查i参数里有没有中文逗号或多余空格theme只接受 dark 与 light不确定默认值 → 主题默认 darkperline默认每行 15 个、上限 50想新增图标 → 项目不接受直接提交图标的 PR提一个 issue 说明你需要的技能由维护者评估后添加去 README 里贴上第一行代码吧三分钟的改动长期受益 【免费下载链接】skill-iconsShowcase your skills on your Github readme or resumé with ease ✨项目地址: https://gitcode.com/gh_mirrors/sk/skill-icons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考