拓冰网站定制 
前端UI组件【免费下载链接】SuperTinyIconsUnder 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos项目地址https://gitcode.com/gh_mirrors/su/SuperTinyIcons点击查看免费下载SuperTinyIcons 是一套以“每个 SVG Logo 体积小于 1KB”为硬性约束的开源图标库当前仓库共收录 479 个网站与应用的极简 Logo平均体积不到 534 字节。本文以 README.md 为主线结合 check.py、test/test.js 与 src/sti 生成器源码系统讲解它的体积压缩原理、图标提交规范、无障碍实现、npm 安装方式与 Web/React/CSS 使用技巧帮助你在自己的项目中低成本引入这套图标并能看懂它背后的一整套校验与生成机制。项目核心小于 1KB 的 Logo 是怎么做到的SuperTinyIcons 的核心目标写在项目描述里每个图标必须小于 1KB。这不是一句口号而是贯穿整个仓库的硬性验收标准。所有 Logo 文件都存放在 images/svg 目录共 479 个 SVG它们统一具备以下几何约定使用512×512 的 viewBox坐标系图标主体必须适配半径为 256 像素的圆形即整体落在 512×512 正方形内切圆之内因为是矢量图形图标可以无限放大缩小而不失真既能做 16px 的 favicon也能做 100px 的品牌展示。以仓库中真实的体积对比为例527 字节 SVG3,328 字节 PNG352 字节 SVG2,987 字节 PNG235 字节 SVG1,615 字节 PNGGitHub 527BGitHub PNG 3.3KBTwitter 352BTwitter PNG 2.9KBFlickr 235BFlickr PNG 1.6KB同样的 LogoSVG 版本比 PNG 位图小一个数量级而仓库中大部分图标如 Vercel 仅 180 字节、Bandcamp 仅 188 字节又远小于 1KB 上限。为什么追求“小”字节即成本原文档给出了非常直白的理由字节是要花钱的——存储要花钱、网络传输要花钱、解析渲染也要消耗时间。SVG 是文本格式路径越精简、属性越少体积就越小。Simplicity简洁应当成为所有工程实践追求的目标。这正是该图标库把“体积”而非“美观丰富”放在第一优先级的原因在保证 Logo 可辨识的前提下尽可能压缩每一个字节。压缩手法体积从何而来README 说明这些文件由人工在 Inkscape、Illustrator 或纯文本编辑器中绘制再经过多轮压缩工具处理SVG Path Editor、svgo、svgcleaner 等。结合仓库文件实际内容可以总结出几类关键技巧1. 保留必要的xmlns命名空间每个 SVG 的svg标签上都保留xmlnshttp://www.w3.org/2000/svg。这在技术上并非严格必需但某些 Web 浏览器在把 SVG 作为图片渲染时不带它会显示失败所以保留它是兼容性代价属于“不能省”的字节。2. 省略背景色图标默认是透明的背景色可以在使用时由页面统一提供例如放在圆形或圆角容器中。如果项目里已有背景色就可以进一步删掉fill背景路径。3. 简化颜色写法颜色值可以被简化例如#FF0000写成red直接省下 4 个字符。4. 降低路径精度绝大多数图标路径的小数位数为0 位只有少数 Logo 为了观感精度保留 12 位小数如 GitHub 图标中的m0 0H512V512H0这种整数路径。在可接受范围内继续降低精度能进一步缩小体积。5. 单行路径、极简结构看一个真实的压缩成果——images/svg/github.svg 全文仅 4 行、527 字节svg xmlnshttp://www.w3.org/2000/svg aria-labelGitHub roleimg viewBox0 0 512 512path dm0 0H512V512H0 fill#181717/path fill#fff dM335 499c-13 0-16-6-16-12l1-70c0-24-8-40-18-48 57-6 117-28 117-126 0-28-10-51-26-69 3-6 11-32-3-67 0 0-21-7-70 26-42-12-86-12-128 0-49-33-70-26-70-26-14 35-6 61-3 67-16 18-26 41-26 69 0 98 59 120 116 126-7 7-14 18-16 35-15 6-52 17-74-22 0 0-14-24-40-26 0 0-25 0-1 16 0 0 16 7 28 37 0 0 15 50 86 34l1 44c0 6-3 12-16 12-14 0-12 17-12 17H347s2-17-12-17Z//svg一个完整 Logo 只用一个path的d属性画完主体轮廓颜色仅两个fill值这正是“字节成本”理念的极致体现。尺寸校验背后的自动化源码如何保证“小于 1KB”“小于 1024 字节”不是口头承诺而是被代码强制执行的。仓库里有两条独立的校验链路1. Python 全量校验脚本 check.pycheck.py会遍历 images/svg 下所有文件执行一系列检查文件类型必须是.svg后缀XML 合法性使用xml.etree.ElementTree解析非法文件直接报错格式规范自动把 CRLF 换成 LF、双空格换成单空格、去掉结尾多余换行并强制要求文件第 2 行以aria开头、第 3 行是viewBox0 0 512 512DuckDuckGo 例外因为它的画布几何不同W3C 标准校验启动仓库内置的 Nu Validatortest/vnu.jar需 JDK 17把 SVG 包进一个最小 HTML 文档后 POST 到本地 8888 端口任何校验错误都会导致失败体积上限每个文件st_size必须 ≤ 1023 字节否则输出Files must be under 1,024 Bytes并置失败标志引用完整性每个图标必须在 images/reference 目录下同时存在对应的.url引用文件和 PNG/JPG/SVG 参考图如github.url、github.png。运行方式uv run check.py # 或 python3 check.py全部通过时会输出✅ All files in the correct format and under 1,024 Bytes.2. Node.js 测试 test/test.js配合npm test底层为 mocha chai对变更文件逐项断言文件大小必须lessThan(1024)将 SVG 包装为 HTML 后提交到 Nu Validator 在线服务响应必须为空字符串无错误。it(should be under 1KB, () { expect(fs.statSync(filepath).size).to.be.lessThan(1024) })也就是说任何人新增或修改一个图标都会被这两套自动化工具按同样标准把关。提交新图标规则、模板与无障碍如果你希望为仓库贡献新 Logo原文档明确了三条硬性规则缺一不可文件必须小于 1024 字节最大 1023 字节没有讨价还价的余地必须能放进半径 256 像素的圆内可用rx50%自行检查必须代表某个流行服务的当前官方 Logo。最小模板至少需要以下组成部分svg xmlnshttp://www.w3.org/2000/svg aria-label... roleimg viewBox0 0 512 512path dm0 0H512V512H0 fill#fff/ ... /svg无障碍Accessibility是默认内置的每个图标天生具备无障碍属性源码 src/sti/utils.py 的Icon类也会读取并保留它roleimg让svg在浏览器无障碍树中被识别为图片aria-labelXYZ用品牌名给图标提供可读名称。特别注意如果通过img src...svg方式引用浏览器不会识别 SVG 内部的 ARIA此时仍应在img上写alt属性。尺寸指南图绿、黄、红三区提交前请对照官方尺寸指南见 images/guidelines/guideline.svg排版绿色安全区图标主体应放在这里黄色相当于“路肩”用于容纳需要伸出主体的元素如角标、装饰件红色禁区图标不能触及红色圆圈同时也表示圆形裁剪后的最终呈现效果。遵循这套分区无论前端最终用什么圆角/圆形裁剪图标观感都不会被破坏。安装与使用npm 包与四种接入方式安装npm install --save super-tiny-icons包体积配置见 package.json 的files字段——发布时仅包含images/svg/目录非常轻量。方式一传统img直接引用img src./node_modules/super-tiny-icons/images/svg/github.svg /方式二React / JSX 模块化导入import logo from super-tiny-icons/images/svg/github.svg; img src{logo} /;方式三CSS 自定义尺寸与形状图标是矢量尺寸完全由 CSS 控制常见的方形/圆角/圆形三种容器只需改width与border-radiusstyle .small-square { width: 20px; } .medium-rounded { width: 50px; border-radius: 10%; } .large-circular { width: 100px; border-radius: 50%; } /style img srcimages/svg/reddit.svg classsmall-square / img srcimages/svg/reddit.svg classmedium-rounded / img srcimages/svg/reddit.svg classlarge-circular /因为图标本身设计成适配 256 半径圆border-radius: 50%这种圆形裁剪下边缘元素也不会被切坏。方式四Android Vector Drawable除 SVG 外仓库还提供 images/android-vector-drawable 目录下的Android Vector Drawable版本如github.xml、android.xml可直接用于 Android 应用的drawable资源。注意这类 XML 格式不保证小于 1KB。仓库自带的站点与图集生成器除了图标本身仓库的 src/sti 目录还包含一个完整的 Python 工具链用于把 479 个图标汇总成可浏览的页面和图集src/sti/utils.pyIcon数据类负责解析每个 SVG 的viewBox、aria-label、文件大小并统计全库的最小/最大/平均/总字节数get_icons_fromsrc/sti/app.py基于 Flask 的 Web 应用路由渲染index.html、libraries.html、reference.html等页面并提供/atlas.svg整张图集与/mxlibrary.xmldraw.io 素材库端点src/sti/atlas.py src/sti/cli.py命令行生成器可一键输出atlas.svg一个文件容纳全部图标通过:target选择器切换显示模板见 src/sti/templates/atlas.svg以及 draw.io 可直接导入的atlas.drawio文件python -m sti.atlas --format svg # 输出整张 SVG 图集 python -m sti.atlas --format drawio # 输出 draw.io 素材库这意味着这套图标不仅是静态资源还可以被程序化地汇总、统计、转成其他设计工具可用的格式。许可证与合规说明绝大多数矢量 Logo 基于他人作品重绘仓库在 README.md 的 Licenses 一节逐一列出了来源与许可证如 Aha-Soft 的 CC-BY、RSS 的 MPL 1.1、Mastodon 的 AGPLv3、Docker 的 Apache 等部分来自 SVGporn 的 CC0 素材。凡能保留原始许可证的都尽量保留。需要提醒的是部分 Logo 可能仍受版权与商标法保护但正如原文档所说这些文件已经小到“可以整段记进内存”使用时应自行评估商标展示场景的合规要求。结语SuperTinyIcons 的价值不在于“好看”而在于把512×512 矢量 Logo 压缩到 1KB 以内这条反直觉的工程约束贯彻到底几何上适配圆形裁剪、结构上精简到单路径、流程上由 check.py 和 test/test.js 双重自动化把关。如果你正在为站点、文档、移动端或桌面工具寻找一组体积友好、开箱即用且带无障碍支持的多品牌 Logo这套仓库既可以直接通过npm install super-tiny-icons使用也可以按 CONTRIBUTING.md 的流程提交你自己的 1KB 作品。赞分享前端UI组件【免费下载链接】SuperTinyIconsUnder 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos项目地址https://gitcode.com/gh_mirrors/su/SuperTinyIcons点击查看免费下载相关推荐如何快速掌握SuperTinyIcons超小SVG图标库的终极使用指南如何快速掌握SuperTinyIcons超小SVG图标库的终极使用指南 SuperTinyIcons是一个提供386个超小SVG图标的开源项目每个图标文件大前端UI组件Bootstrap Icons Cart X 图标全解析从 SVG 源码到图标字体、Sprite 与 TypeScript 的完整使用指南Bootstrap Icons Cart X 图标全解析从 SVG 源码到图标字体、Sprite 与 TypeScript 的完整使用指南 Cart X b前端Blueprint 图标包 blueprintjs/icons 完整指南从安装使用到源码级图标新增与校验流程Blueprint 图标包 blueprintjs/icons 完整指南从安装使用到源码级图标新增与校验流程 Blueprint 是一个基于 React 的前端UI组件设计系统上一篇Windows效率革命5个PowerToys神器让你每天多出1小时下一篇PCL2启动器内存配置从基础概念到高级调优创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 SuperTinyIcons 极简 SVG Logo 图标库：从 1KB 体积约束到安装使用与源码校验全解析
前端UI组件【免费下载链接】SuperTinyIconsUnder 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos项目地址https://gitcode.com/gh_mirrors/su/SuperTinyIcons点击查看免费下载SuperTinyIcons 是一套以“每个 SVG Logo 体积小于 1KB”为硬性约束的开源图标库当前仓库共收录 479 个网站与应用的极简 Logo平均体积不到 534 字节。本文以 README.md 为主线结合 check.py、test/test.js 与 src/sti 生成器源码系统讲解它的体积压缩原理、图标提交规范、无障碍实现、npm 安装方式与 Web/React/CSS 使用技巧帮助你在自己的项目中低成本引入这套图标并能看懂它背后的一整套校验与生成机制。项目核心小于 1KB 的 Logo 是怎么做到的SuperTinyIcons 的核心目标写在项目描述里每个图标必须小于 1KB。这不是一句口号而是贯穿整个仓库的硬性验收标准。所有 Logo 文件都存放在 images/svg 目录共 479 个 SVG它们统一具备以下几何约定使用512×512 的 viewBox坐标系图标主体必须适配半径为 256 像素的圆形即整体落在 512×512 正方形内切圆之内因为是矢量图形图标可以无限放大缩小而不失真既能做 16px 的 favicon也能做 100px 的品牌展示。以仓库中真实的体积对比为例527 字节 SVG3,328 字节 PNG352 字节 SVG2,987 字节 PNG235 字节 SVG1,615 字节 PNGGitHub 527BGitHub PNG 3.3KBTwitter 352BTwitter PNG 2.9KBFlickr 235BFlickr PNG 1.6KB同样的 LogoSVG 版本比 PNG 位图小一个数量级而仓库中大部分图标如 Vercel 仅 180 字节、Bandcamp 仅 188 字节又远小于 1KB 上限。为什么追求“小”字节即成本原文档给出了非常直白的理由字节是要花钱的——存储要花钱、网络传输要花钱、解析渲染也要消耗时间。SVG 是文本格式路径越精简、属性越少体积就越小。Simplicity简洁应当成为所有工程实践追求的目标。这正是该图标库把“体积”而非“美观丰富”放在第一优先级的原因在保证 Logo 可辨识的前提下尽可能压缩每一个字节。压缩手法体积从何而来README 说明这些文件由人工在 Inkscape、Illustrator 或纯文本编辑器中绘制再经过多轮压缩工具处理SVG Path Editor、svgo、svgcleaner 等。结合仓库文件实际内容可以总结出几类关键技巧1. 保留必要的xmlns命名空间每个 SVG 的svg标签上都保留xmlnshttp://www.w3.org/2000/svg。这在技术上并非严格必需但某些 Web 浏览器在把 SVG 作为图片渲染时不带它会显示失败所以保留它是兼容性代价属于“不能省”的字节。2. 省略背景色图标默认是透明的背景色可以在使用时由页面统一提供例如放在圆形或圆角容器中。如果项目里已有背景色就可以进一步删掉fill背景路径。3. 简化颜色写法颜色值可以被简化例如#FF0000写成red直接省下 4 个字符。4. 降低路径精度绝大多数图标路径的小数位数为0 位只有少数 Logo 为了观感精度保留 12 位小数如 GitHub 图标中的m0 0H512V512H0这种整数路径。在可接受范围内继续降低精度能进一步缩小体积。5. 单行路径、极简结构看一个真实的压缩成果——images/svg/github.svg 全文仅 4 行、527 字节svg xmlnshttp://www.w3.org/2000/svg aria-labelGitHub roleimg viewBox0 0 512 512path dm0 0H512V512H0 fill#181717/path fill#fff dM335 499c-13 0-16-6-16-12l1-70c0-24-8-40-18-48 57-6 117-28 117-126 0-28-10-51-26-69 3-6 11-32-3-67 0 0-21-7-70 26-42-12-86-12-128 0-49-33-70-26-70-26-14 35-6 61-3 67-16 18-26 41-26 69 0 98 59 120 116 126-7 7-14 18-16 35-15 6-52 17-74-22 0 0-14-24-40-26 0 0-25 0-1 16 0 0 16 7 28 37 0 0 15 50 86 34l1 44c0 6-3 12-16 12-14 0-12 17-12 17H347s2-17-12-17Z//svg一个完整 Logo 只用一个path的d属性画完主体轮廓颜色仅两个fill值这正是“字节成本”理念的极致体现。尺寸校验背后的自动化源码如何保证“小于 1KB”“小于 1024 字节”不是口头承诺而是被代码强制执行的。仓库里有两条独立的校验链路1. Python 全量校验脚本 check.pycheck.py会遍历 images/svg 下所有文件执行一系列检查文件类型必须是.svg后缀XML 合法性使用xml.etree.ElementTree解析非法文件直接报错格式规范自动把 CRLF 换成 LF、双空格换成单空格、去掉结尾多余换行并强制要求文件第 2 行以aria开头、第 3 行是viewBox0 0 512 512DuckDuckGo 例外因为它的画布几何不同W3C 标准校验启动仓库内置的 Nu Validatortest/vnu.jar需 JDK 17把 SVG 包进一个最小 HTML 文档后 POST 到本地 8888 端口任何校验错误都会导致失败体积上限每个文件st_size必须 ≤ 1023 字节否则输出Files must be under 1,024 Bytes并置失败标志引用完整性每个图标必须在 images/reference 目录下同时存在对应的.url引用文件和 PNG/JPG/SVG 参考图如github.url、github.png。运行方式uv run check.py # 或 python3 check.py全部通过时会输出✅ All files in the correct format and under 1,024 Bytes.2. Node.js 测试 test/test.js配合npm test底层为 mocha chai对变更文件逐项断言文件大小必须lessThan(1024)将 SVG 包装为 HTML 后提交到 Nu Validator 在线服务响应必须为空字符串无错误。it(should be under 1KB, () { expect(fs.statSync(filepath).size).to.be.lessThan(1024) })也就是说任何人新增或修改一个图标都会被这两套自动化工具按同样标准把关。提交新图标规则、模板与无障碍如果你希望为仓库贡献新 Logo原文档明确了三条硬性规则缺一不可文件必须小于 1024 字节最大 1023 字节没有讨价还价的余地必须能放进半径 256 像素的圆内可用rx50%自行检查必须代表某个流行服务的当前官方 Logo。最小模板至少需要以下组成部分svg xmlnshttp://www.w3.org/2000/svg aria-label... roleimg viewBox0 0 512 512path dm0 0H512V512H0 fill#fff/ ... /svg无障碍Accessibility是默认内置的每个图标天生具备无障碍属性源码 src/sti/utils.py 的Icon类也会读取并保留它roleimg让svg在浏览器无障碍树中被识别为图片aria-labelXYZ用品牌名给图标提供可读名称。特别注意如果通过img src...svg方式引用浏览器不会识别 SVG 内部的 ARIA此时仍应在img上写alt属性。尺寸指南图绿、黄、红三区提交前请对照官方尺寸指南见 images/guidelines/guideline.svg排版绿色安全区图标主体应放在这里黄色相当于“路肩”用于容纳需要伸出主体的元素如角标、装饰件红色禁区图标不能触及红色圆圈同时也表示圆形裁剪后的最终呈现效果。遵循这套分区无论前端最终用什么圆角/圆形裁剪图标观感都不会被破坏。安装与使用npm 包与四种接入方式安装npm install --save super-tiny-icons包体积配置见 package.json 的files字段——发布时仅包含images/svg/目录非常轻量。方式一传统img直接引用img src./node_modules/super-tiny-icons/images/svg/github.svg /方式二React / JSX 模块化导入import logo from super-tiny-icons/images/svg/github.svg; img src{logo} /;方式三CSS 自定义尺寸与形状图标是矢量尺寸完全由 CSS 控制常见的方形/圆角/圆形三种容器只需改width与border-radiusstyle .small-square { width: 20px; } .medium-rounded { width: 50px; border-radius: 10%; } .large-circular { width: 100px; border-radius: 50%; } /style img srcimages/svg/reddit.svg classsmall-square / img srcimages/svg/reddit.svg classmedium-rounded / img srcimages/svg/reddit.svg classlarge-circular /因为图标本身设计成适配 256 半径圆border-radius: 50%这种圆形裁剪下边缘元素也不会被切坏。方式四Android Vector Drawable除 SVG 外仓库还提供 images/android-vector-drawable 目录下的Android Vector Drawable版本如github.xml、android.xml可直接用于 Android 应用的drawable资源。注意这类 XML 格式不保证小于 1KB。仓库自带的站点与图集生成器除了图标本身仓库的 src/sti 目录还包含一个完整的 Python 工具链用于把 479 个图标汇总成可浏览的页面和图集src/sti/utils.pyIcon数据类负责解析每个 SVG 的viewBox、aria-label、文件大小并统计全库的最小/最大/平均/总字节数get_icons_fromsrc/sti/app.py基于 Flask 的 Web 应用路由渲染index.html、libraries.html、reference.html等页面并提供/atlas.svg整张图集与/mxlibrary.xmldraw.io 素材库端点src/sti/atlas.py src/sti/cli.py命令行生成器可一键输出atlas.svg一个文件容纳全部图标通过:target选择器切换显示模板见 src/sti/templates/atlas.svg以及 draw.io 可直接导入的atlas.drawio文件python -m sti.atlas --format svg # 输出整张 SVG 图集 python -m sti.atlas --format drawio # 输出 draw.io 素材库这意味着这套图标不仅是静态资源还可以被程序化地汇总、统计、转成其他设计工具可用的格式。许可证与合规说明绝大多数矢量 Logo 基于他人作品重绘仓库在 README.md 的 Licenses 一节逐一列出了来源与许可证如 Aha-Soft 的 CC-BY、RSS 的 MPL 1.1、Mastodon 的 AGPLv3、Docker 的 Apache 等部分来自 SVGporn 的 CC0 素材。凡能保留原始许可证的都尽量保留。需要提醒的是部分 Logo 可能仍受版权与商标法保护但正如原文档所说这些文件已经小到“可以整段记进内存”使用时应自行评估商标展示场景的合规要求。结语SuperTinyIcons 的价值不在于“好看”而在于把512×512 矢量 Logo 压缩到 1KB 以内这条反直觉的工程约束贯彻到底几何上适配圆形裁剪、结构上精简到单路径、流程上由 check.py 和 test/test.js 双重自动化把关。如果你正在为站点、文档、移动端或桌面工具寻找一组体积友好、开箱即用且带无障碍支持的多品牌 Logo这套仓库既可以直接通过npm install super-tiny-icons使用也可以按 CONTRIBUTING.md 的流程提交你自己的 1KB 作品。赞分享前端UI组件【免费下载链接】SuperTinyIconsUnder 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos项目地址https://gitcode.com/gh_mirrors/su/SuperTinyIcons点击查看免费下载相关推荐如何快速掌握SuperTinyIcons超小SVG图标库的终极使用指南如何快速掌握SuperTinyIcons超小SVG图标库的终极使用指南 SuperTinyIcons是一个提供386个超小SVG图标的开源项目每个图标文件大前端UI组件Bootstrap Icons Cart X 图标全解析从 SVG 源码到图标字体、Sprite 与 TypeScript 的完整使用指南Bootstrap Icons Cart X 图标全解析从 SVG 源码到图标字体、Sprite 与 TypeScript 的完整使用指南 Cart X b前端Blueprint 图标包 blueprintjs/icons 完整指南从安装使用到源码级图标新增与校验流程Blueprint 图标包 blueprintjs/icons 完整指南从安装使用到源码级图标新增与校验流程 Blueprint 是一个基于 React 的前端UI组件设计系统上一篇Windows效率革命5个PowerToys神器让你每天多出1小时下一篇PCL2启动器内存配置从基础概念到高级调优创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考