Bytesize Icons 使用教程

Bytesize Icons 使用教程

bytesize-icons Tiny style-controlled SVG iconset (101 icons, 12kb) 项目地址: https://gitcode.com/gh_mirrors/by/bytesize-icons

1. 项目介绍

Bytesize Icons 是一个开源的 SVG 图标集，它包含 101 个图标，文件大小仅为 11.7 KB（压缩后为 3.2 KB）。每个图标都是在 32x32 网格上手工编码的，并使用 SVG 描边，这样可以最大程度地调整样式，包括描边的粗细、颜色以及边缘的圆角或直角。

Bytesize Icons 非常易于使用，并且被 Bootstrap 推荐使用。图标集的设计允许通过改变 stroke-width 属性轻松调整图标的粗细，同时还可以通过 stroke-linecap 和 stroke-linejoin 属性改变线帽和线连接的形状，实现图标样式的圆滑或直角。

2. 项目快速启动

要在项目中使用 Bytesize Icons，你可以直接将图标以内联 SVG 的形式插入到页面中，或者通过外部的 .svg 文件使用 use 标签引入。

内联 SVG 示例：

<svg id="i-search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
  <circle cx="14" cy="14" r="12" />
  <path d="M23 23 L30 30" />
</svg>

SVG Symbols 和 Use 标签示例：

在 HTML 中定义一个 SVG symbols：

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-search" viewBox="0 0 32 32">
    <circle cx="14" cy="14" r="12" />
    <path d="M23 23 L30 30" />
  </symbol>
</svg>

然后在文档中任何地方使用这个 symbol：

<svg class="icon" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
  <use xlink:href="#icon-search" />
</svg>

3. 应用案例和最佳实践

推荐样式

• stroke-linejoin: round 或 bevel 或 miter
• stroke-linecap: round 或 butt 或 miter
• 推荐描边粗细（stroke-width）从 0.5px 到 3.5px，不要超过 4px 以避免视图框（viewBox）内溢出。

限制

• 由于路径和 viewBox 之间有 2px 的边距，建议不要使用超过 4px 的 stroke-width（或 12.5% 的百分比）。
• 使用 stroke-width 时，建议使用 0.5px 的增量或 1.5625% 的百分比，并且尺寸（高度/宽度）以 24px、32px、48px、64px 的增量增加，以实现最佳的像素提示。

4. 典型生态项目

• Bytesize Icons as React Components: 链接
• Yet Another Bytesize Icons as React Component: 链接
• Bytesize Icons as Custom Elements: 链接
• Bytesize Icons as Vue functional components: 链接
• Bytesize Icons packaged as a Jinja2 macro: 链接

请注意，以上生态项目链接仅供参考，实际使用时应前往相应的项目页面获取最新信息。

bytesize-icons Tiny style-controlled SVG iconset (101 icons, 12kb) 项目地址: https://gitcode.com/gh_mirrors/by/bytesize-icons