skill-icons 源码深度解析Go Gin 如何动态生成 SVG 技能图标【免费下载链接】skill-iconsFork of official skill-icons repository. Showcase your skills on your Github readme or resumé with ease ✨项目地址: https://gitcode.com/gh_mirrors/skil/skill-iconsskill-icons 是一个用 Go 语言编写的开源项目它的核心能力是为 GitHub README 和个人简历动态生成 SVG 技能图标。本文将带你深度解析 skill-icons 的源码一步步拆解 Go Gin 框架是如何把数百个 SVG 图标文件打包、解析并实时拼接成一张完整的技能徽章图的即使你是新手也能看懂其中的巧妙设计。项目整体架构一个极简的 Serverless 服务skill-icons 的代码结构非常精简整个服务核心只有两个 Go 文件api/index.goGin 路由入口 SVG 动态生成核心逻辑build.go构建期脚本负责把 assets 目录下的 SVG 文件打包成内嵌 JSON服务运行在 Vercel 的 Serverless 环境上由 vercel.json 中的 rewrite 规则把/api(.*)的请求转发给 Go 程序处理部署流程则由 .github/workflows/deploy.yml 里的 GitHub Actions 自动完成。第一步build.go 如何把几百个 SVG 塞进一个 JSON打开 build.go你会发现一个非常巧妙的设计项目把assets/目录下数百个.svg文件全部读入内存文件名去掉.svg后缀作为键、文件内容作为值生成一个巨大的 JSON 字符串然后直接以var iconsJSON \... 的形式内嵌写回到 api/index.go 的源码里。name : strings.TrimSuffix(strings.ToLower(fileInfo.Name()), .svg) icons[name] string(data)这样一来运行时完全不需要依赖外部文件系统所有图标数据都随二进制一起分发部署到 Serverless 环境后也能瞬间加载这就是零外部依赖的优雅之处。第二步Handler 入口如何初始化图标映射表服务启动后api/index.go 中的Handler函数会先解码内嵌的iconsJSON然后遍历所有键名做两件事把带-light、-dark、-auto后缀的图标登记进themedIcons列表表示这类图标支持明暗主题切换把去掉后缀的名字填入iconNameList作为合法的图标 ID 白名单初始化完成后请求交给app.ServeHTTP(w, r)进入 Gin 路由。第三步Gin 路由如何解析 URL 参数路由定义在iconRoute函数中绑定在/api/icons路径上。它会从 URL 查询参数中读取五个可选参数参数作用默认值i逗号分隔的图标 ID 列表必填theme主题可选light/dark/autoautoperline每行显示的图标数量15titles是否显示图标名称提示falsealign对齐方式left/center/rightleft如果i为空直接返回400错误提示perline被限制在 1 到 50 之间theme只接受三种合法取值这些参数校验让接口既灵活又健壮。第四步shortNames 映射表如何让 URL 更短细心的读者会发现官方示例里用的是?ijs,html,css这种短名称但实际图标文件名却是javascript、html这样的全名。秘密就在shortNames这个映射表里例如js→javascriptts→typescriptpy→pythongo→golangk8s→kubernetesnext→nextjsparseShortNames函数会先判断名字是否在白名单里如果不在再去shortNames表里查别名。同时它还会根据theme参数为支持主题的图标自动拼接后缀如javascript-dark这一步正是主题化图标的实现基础。第五步generateSvg 如何把图标拼成一张图generateSvg是整篇文章的压轴戏它实现了 SVG 的动态拼装核心思路可以概括为三步计算画布尺寸每个图标占用 300x300 的逻辑单位通过perline计算出总宽度和行数再用SCALE常量48/256把尺寸缩放到 48px 的实际大小循环定位利用取余和整除运算x : (index % perLine) * 300、y : (index / perLine) * 300把每个图标平铺到网格坐标上组合输出每个图标用g transformtranslate(x, y)包裹如果开启了titles参数还会额外插入title标签鼠标悬停即可看到技能名称for index, i : range iconSvgList { x : (index % perLine) * 300 y : (index / perLine) * 300 svg fmt.Sprintf(g transformtranslate(%d, %d)%s%s/g, x, y, title, i) }最终通过Content-Type: image/svgxml响应头返回给浏览器一张精美的技能图标组图就这样实时生成了如何本地运行和部署想要亲手体验这套源码你可以先克隆仓库git clone https://gitcode.com/gh_mirrors/skil/skill-icons本地开发时先执行go run build.go生成内嵌的图标 JSON再运行 api/index.go 启动服务即可。如果使用 Docker 部署Dockerfile 提供了完整的多阶段构建方案先用 sed 命令把index.go改造成main包、移除 Serverless 专用的Handler再编译出无 CGO 依赖的静态二进制最终放进scratch空镜像中镜像体积被压缩到极致。总结skill-icons 虽然代码量不大却处处体现着工程智慧构建期打包让运行时零文件依赖、shortNames 别名让 URL 优雅简短、纯字符串拼接生成 SVG 让服务轻量快速。理解了这五个核心步骤你不仅能看懂这个项目还能把同样的思路迁移到自己动态生成图片的服务设计中。快去动手试试为你的 README 添上一排漂亮的技能图标吧【免费下载链接】skill-iconsFork of official skill-icons repository. Showcase your skills on your Github readme or resumé with ease ✨项目地址: https://gitcode.com/gh_mirrors/skil/skill-icons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 skill-icons 源码深度解析：Go + Gin 如何动态生成 SVG 技能图标
skill-icons 源码深度解析Go Gin 如何动态生成 SVG 技能图标【免费下载链接】skill-iconsFork of official skill-icons repository. Showcase your skills on your Github readme or resumé with ease ✨项目地址: https://gitcode.com/gh_mirrors/skil/skill-iconsskill-icons 是一个用 Go 语言编写的开源项目它的核心能力是为 GitHub README 和个人简历动态生成 SVG 技能图标。本文将带你深度解析 skill-icons 的源码一步步拆解 Go Gin 框架是如何把数百个 SVG 图标文件打包、解析并实时拼接成一张完整的技能徽章图的即使你是新手也能看懂其中的巧妙设计。项目整体架构一个极简的 Serverless 服务skill-icons 的代码结构非常精简整个服务核心只有两个 Go 文件api/index.goGin 路由入口 SVG 动态生成核心逻辑build.go构建期脚本负责把 assets 目录下的 SVG 文件打包成内嵌 JSON服务运行在 Vercel 的 Serverless 环境上由 vercel.json 中的 rewrite 规则把/api(.*)的请求转发给 Go 程序处理部署流程则由 .github/workflows/deploy.yml 里的 GitHub Actions 自动完成。第一步build.go 如何把几百个 SVG 塞进一个 JSON打开 build.go你会发现一个非常巧妙的设计项目把assets/目录下数百个.svg文件全部读入内存文件名去掉.svg后缀作为键、文件内容作为值生成一个巨大的 JSON 字符串然后直接以var iconsJSON \... 的形式内嵌写回到 api/index.go 的源码里。name : strings.TrimSuffix(strings.ToLower(fileInfo.Name()), .svg) icons[name] string(data)这样一来运行时完全不需要依赖外部文件系统所有图标数据都随二进制一起分发部署到 Serverless 环境后也能瞬间加载这就是零外部依赖的优雅之处。第二步Handler 入口如何初始化图标映射表服务启动后api/index.go 中的Handler函数会先解码内嵌的iconsJSON然后遍历所有键名做两件事把带-light、-dark、-auto后缀的图标登记进themedIcons列表表示这类图标支持明暗主题切换把去掉后缀的名字填入iconNameList作为合法的图标 ID 白名单初始化完成后请求交给app.ServeHTTP(w, r)进入 Gin 路由。第三步Gin 路由如何解析 URL 参数路由定义在iconRoute函数中绑定在/api/icons路径上。它会从 URL 查询参数中读取五个可选参数参数作用默认值i逗号分隔的图标 ID 列表必填theme主题可选light/dark/autoautoperline每行显示的图标数量15titles是否显示图标名称提示falsealign对齐方式left/center/rightleft如果i为空直接返回400错误提示perline被限制在 1 到 50 之间theme只接受三种合法取值这些参数校验让接口既灵活又健壮。第四步shortNames 映射表如何让 URL 更短细心的读者会发现官方示例里用的是?ijs,html,css这种短名称但实际图标文件名却是javascript、html这样的全名。秘密就在shortNames这个映射表里例如js→javascriptts→typescriptpy→pythongo→golangk8s→kubernetesnext→nextjsparseShortNames函数会先判断名字是否在白名单里如果不在再去shortNames表里查别名。同时它还会根据theme参数为支持主题的图标自动拼接后缀如javascript-dark这一步正是主题化图标的实现基础。第五步generateSvg 如何把图标拼成一张图generateSvg是整篇文章的压轴戏它实现了 SVG 的动态拼装核心思路可以概括为三步计算画布尺寸每个图标占用 300x300 的逻辑单位通过perline计算出总宽度和行数再用SCALE常量48/256把尺寸缩放到 48px 的实际大小循环定位利用取余和整除运算x : (index % perLine) * 300、y : (index / perLine) * 300把每个图标平铺到网格坐标上组合输出每个图标用g transformtranslate(x, y)包裹如果开启了titles参数还会额外插入title标签鼠标悬停即可看到技能名称for index, i : range iconSvgList { x : (index % perLine) * 300 y : (index / perLine) * 300 svg fmt.Sprintf(g transformtranslate(%d, %d)%s%s/g, x, y, title, i) }最终通过Content-Type: image/svgxml响应头返回给浏览器一张精美的技能图标组图就这样实时生成了如何本地运行和部署想要亲手体验这套源码你可以先克隆仓库git clone https://gitcode.com/gh_mirrors/skil/skill-icons本地开发时先执行go run build.go生成内嵌的图标 JSON再运行 api/index.go 启动服务即可。如果使用 Docker 部署Dockerfile 提供了完整的多阶段构建方案先用 sed 命令把index.go改造成main包、移除 Serverless 专用的Handler再编译出无 CGO 依赖的静态二进制最终放进scratch空镜像中镜像体积被压缩到极致。总结skill-icons 虽然代码量不大却处处体现着工程智慧构建期打包让运行时零文件依赖、shortNames 别名让 URL 优雅简短、纯字符串拼接生成 SVG 让服务轻量快速。理解了这五个核心步骤你不仅能看懂这个项目还能把同样的思路迁移到自己动态生成图片的服务设计中。快去动手试试为你的 README 添上一排漂亮的技能图标吧【免费下载链接】skill-iconsFork of official skill-icons repository. Showcase your skills on your Github readme or resumé with ease ✨项目地址: https://gitcode.com/gh_mirrors/skil/skill-icons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考