ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

如何向theSVG提交品牌图标:新手贡献者完整入门指南

如何向theSVG提交品牌图标:新手贡献者完整入门指南 如何向theSVG提交品牌图标新手贡献者完整入门指南【免费下载链接】thesvg7,400 brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg项目地址: https://gitcode.com/gh_mirrors/th/thesvgtheSVG 是一个收录7,400 品牌 SVG 图标的开源图标库支持 Tree-shaking、完全类型化、免费使用。如果你想在提交品牌图标Submit a Brand Icon到 theSVG本文会用 10 分钟讲清两条主流提交路径——官方表单提交与 Git PR 直接提交并附带 SVG 校验清单、icons.json目录格式和 CI 自动合并机制帮你一次性通过审查。提交前 30 秒确认你的图标符合准入要求项目对品牌图标有明确的准入标准详见 CONTRIBUTING.md提交前先自查可避免 90% 的驳回检查项要求格式仅接受 SVG不支持 PNG / JPG来源必须是官方品牌标志不接受粉丝自制或修改版viewBox必须带有有效的viewBox属性体积文件大小小于50KB安全性禁止内嵌script、事件处理器onload等或javascript:URI内容禁止内嵌栅格图片data:image/...域名年龄品牌官网至少注册满30 天分类从模板下拉列表中选一个有效分类如DevTool、AI、Finance优化建议用 SVGO 优化CI 会自动跑 SVGO⚠️ 特别注意AWS / Azure / GCP 等云架构图标来自官方图标包批量导入不要通过表单单独提交品牌若对第三方分发有明确限制可在 PR 中说明。商标相关政策见 TRADEMARK.md。方式一通过官方提交表单新手最省力路径这是官方推荐的「零门槛」路径适合不熟悉 Git 的贡献者打开 thesvg.org 官网的submit页面官网首页底部导航可进入上传你的 SVG 文件填写品牌名称、分类、品牌官网 URL提交后系统会自动创建一个带标签的 issue 进入分类triage队列维护团队审核后入库你的品牌就会出现在 7,400 图标的目录中 如果只是想「申请」某品牌被收录手里没有 SVG 文件也可以直接使用官方的图标请求模板它要求你提供品牌名、官网、SVG 来源链接和分类模板定义在 .github/ISSUE_TEMPLATE/icon_request.yml 中。方式二通过 Git PR 直接提交熟悉 Git 的最快路径如果你会 Git直接开 PR 会更快——CI 全绿后会自动合并。第 1 步克隆仓库并创建功能分支git clone https://gitcode.com/gh_mirrors/th/thesvg cd thesvg git checkout -b feat/icon-your-brand分支命名遵循项目约定feat/icon-{slug}。第 2 步放置 SVG 文件图标按「一个品牌一个目录」组织全部位于public/icons/下。将你的默认款 SVG 放到public/icons/{slug}/default.svg如果品牌还有单色版、白字版等变体可同时放入mono.svg、light.svg、wordmark.svg等变体定义参考 README.md 的 Variants 一节default是唯一必填的变体。 提交前建议本地跑一次优化npx svgo -f public/icons --multipass。项目的 SVGO 配置在 svgo.config.mjsCI 的 .github/workflows/svgo.yml 也会自动优化并回写。第 3 步在 icons.json 中添加目录条目所有图标的元数据集中在 src/data/icons.json单一数据源新条目必须按字母顺序插入正确位置格式示例{ slug: your-brand, title: Your Brand, aliases: [], hex: F97316, categories: [DevTool], variants: { default: /icons/your-brand/default.svg }, license: CC0-1.0, url: https://yourbrand.com, collection: brands, dateAdded: 2026-05-16 }字段要点hex品牌主色3 位或 6 位十六进制不带#categories从 issue 模板 下拉列表中选一个collection品牌图标固定为brandsdateAdded提交当天日期CI 会对该文件做严格校验见 .github/workflows/validate-svg.ymlslug 不能重复、hex必须合法、必须有default变体、必须保持字母序——任何一条不满足都会直接报错。第 4 步提交并创建 Pull Requestgit add public/icons/your-brand/ src/data/icons.json git commit -m feat: add your-brand icon git push origin feat/icon-your-brand提交信息遵循 Conventional Commits 规范feat:触发小版本发布fix:触发补丁发布。创建 PR 时标题格式feat: add {slug} iconPR 描述按 .github/PULL_REQUEST_TEMPLATE.md 勾选图标提交清单viewBox、50KB、无脚本标签等triage 工作流会自动打上标签若Validate SVG与Lint Build全部通过PR 会由 .github/workflows/auto-merge-icon-pr.yml 自动合并 可选本地搭建开发环境预览效果想提交前亲眼看效果可本地跑起来pnpm install pnpm dev # 网站运行在 http://localhost:3333 cd packages/icons npm run build npm run audit npm run validatenpm run audit是安全审计脚本packages/icons/scripts/security-audit.mjsnpm run validate校验构建产物两者都是 PR 的必备检查。常见被拒原因清单❌SVG 不是官方资源——粉丝重绘、颜色改动一律不收mono单色变体除外❌文件超过 50KB——用 SVGO 压缩后再提交❌内嵌脚本或 base64 位图——CI 会逐条 grep 检查❌icons.json 破坏字母序——插入位置放错是最常见的低级错误❌品牌域名未满 30 天——刚注册的网站会被判定为「刷站」拒收进阶品牌换标Rebrand如何处理若品牌更换了 Logo如 Twitter 变 X项目不覆盖历史而是用supersedes/supersededBy双向字段把新旧 slug 关联起来校验脚本 tools/validate-lineage.mjs 会在 CI 中检查两侧字段必须互相镜像不一致直接构建失败。旧条目改为{slug}-legacy新条目沿用原 slug详情页会自动渲染互相跳转的卡片。核心资料索引贡献总纲CONTRIBUTING.md图标数据源src/data/icons.json图标文件目录public/icons/图标请求模板.github/ISSUE_TEMPLATE/icon_request.ymlPR 模板.github/PULL_REQUEST_TEMPLATE.mdSVG 校验工作流.github/workflows/validate-svg.yml商标政策TRADEMARK.md 法律提示按 LEGAL.md 约定代码以 MIT 协议开源品牌图标本身仍归各自品牌方所有仅供标识与开发用途nominative fair use。品牌方要求删除时项目会在 24 小时内响应。现在你已经掌握了 theSVG 品牌图标提交的完整流程——选一条适合自己的路径动手提交你的第一个图标吧【免费下载链接】thesvg7,400 brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg项目地址: https://gitcode.com/gh_mirrors/th/thesvg创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表