2026/11/3 10:18:38

skill-icons技能图标3步落地:简历与主页视觉化捷径

skill-icons技能图标3步落地:简历与主页视觉化捷径 skill-icons技能图标3步落地:简历与主页视觉化捷径【免费下载链接】skill-iconsShowcase your skills on your Github readme or resumé with ease ✨项目地址: https://gitcode.com/gh_mirrors/sk/skill-icons想让 GitHub 主页和简历里的技能列表不再是一行干巴巴的文字?skill-icons 把 150 款技能图标打包成一行代码即可渲染的 SVG,粘贴进 Markdown 就能用,零配置出图。先克隆仓库,把图标资源拿在手里git clone https://gitcode.com/gh_mirrors/sk/skill-icons仓库结构很干净:所有图片资源都放在icons/目录里,每个图标提供React-Dark.svg和React-Light.svg两个版本,分别适配深色和浅色背景;没有后缀的则是单版本图标。完整的支持清单和图标 ID 写在 readme.md 末尾的Icon ID表格里,许可信息见根目录的 LICENSE 文件。你不需要改动仓库里的任何内容,拿到即可用。深色背景下的技能图标渲染效果图标 ID 在哪里查?新手最常卡住的点,就是记不住某个图标对应的 ID。两个快速查法:翻 readme.md 里的Icon ID表格,每一行都标好了 ID 和图标预览,直接对照即可;直接浏览icons/目录,从文件名反推命名,基本一目了然。项目还内置了一批简写别名:js对应 JavaScript、py对应 Python、vue对应 VueJS、tailwind对应 TailwindCSS。这些短名在 index.js 中集中定义,能帮你省掉不少敲字时间。一行 Markdown 怎么写进 README?项目的核心用法只有一行代码,复制后粘到任何支持图片语法的 Markdown 里——GitHub README、技术博客、团队 Wiki 都适用:[![My Skills](https://skillicons.dev/icons?ijs,html,css,wasm)](https://skillicons.dev)把?i后面的值换成你实际掌握的技术,用英文逗号分隔。系统会自动把这些 ID 拼装成一张 SVG 返回,尺寸也会随之自适应,想居中显示就套一层p aligncenter,和普通图片的排版方式一致,不用单独管理图片文件。深浅色主题、每行数量,两个参数微调视觉默认效果不满意时,还有两个可选参数可以调:theme:取值dark或light,控制图标底色。默认是深色;白底简历和文档建议追加themelight,观感会清爽很多;perline:每行显示多少个图标,可取 1~50,默认 15。技能列表较长时改成 8 或 10,排版会更有呼吸感 浅色主题更适合白底简历和文档到这一步,整条链路就走完了:克隆仓库查 ID、贴一行代码、调两个参数。今晚就把这段 Markdown 放进你的 README 吧,技能展示这件事,真的不用写一行 CSS ✨【免费下载链接】skill-iconsShowcase your skills on your Github readme or resumé with ease ✨项目地址: https://gitcode.com/gh_mirrors/sk/skill-icons创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考