Teenyicons 使用教程

Teenyicons 使用教程

teenyicons Tiny minimal 1px icons designed to fit in the smallest places. 项目地址: https://gitcode.com/gh_mirrors/te/teenyicons

1. 项目介绍

Teenyicons 是一套精心设计的极小尺寸（15x15 网格）的 SVG 图标，旨在适应非常小的空间同时保持清晰的视觉效果。这些图标适用于网页设计、应用界面等需要小型图标的地方。Teenyicons 以 MIT 许可证开源，允许用户自由使用和修改。

2. 项目快速启动

首先，您需要将 Teenyicons 安装到您的项目中。可以通过 npm 或 yarn 来完成安装：

npm i teenyicons
# 或者
yarn add teenyicons

安装完成后，您可以以内联 SVG 的形式使用图标。以下是一个示例：

<svg class="w-4 h-4 text-white" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 1.5h1.5a6 6 0 110 12H0m7-12h4.5a3 3 0 110 6m0 0H9m2.5 0h-2m2 0a3 3 0 110 6H7" stroke="currentColor" />
</svg>

如果您希望使用精灵图（sprites），Teenyicons 提供了三种不同的精灵图：

• 所有 SVG 图标的精灵图（约 510 KB）
• 仅含轮廓的精灵图（约 270 KB）
• 仅含实体的精灵图（约 240 KB）

使用精灵图时，您可以将精灵图内联在 HTML 中，或者将其放在某个路径下，然后像下面这样引用图标：

<svg class="tiny-cyan-icon">
  <!-- Inlined sprite. Possible variants are outline and solid. -->
  <use xlink:href="#variant--icon-id"></use>
</svg>

3. 应用案例和最佳实践

在您的网页或应用中使用 Teenyicons 时，您可以轻松地通过 CSS 来改变图标颜色，这使得图标能够与您的页面设计风格保持一致。

以下是一个最佳实践的例子：

• 使用 SVG 的 fill 属性来设置图标颜色。
• 保持图标大小的一致性，以便在界面中保持视觉平衡。

<svg class="w-4 h-4 text-gray-800" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="teenyicons-solid-sprite.svg#solid--globe-africa"></use>
</svg>

4. 典型生态项目

目前，Teenyicons 可以很容易地集成到各种前端框架中，例如 Vue、React 等。社区中也有许多基于 Teenyicons 的组件库和插件，使得在项目中使用这些图标变得更加方便。

由于 Teenyicons 是开源的，您可以期待社区将继续扩展其生态系统，包括但不限于：

• 框架组件库的集成。
• Figma 插件，以便在设计中直接使用图标。
• 其他工具和插件的集成，以进一步简化图标的使用。

通过遵循这些指导，您可以快速开始在项目中使用 Teenyicons，并探索其提供的各种用途。

teenyicons Tiny minimal 1px icons designed to fit in the smallest places. 项目地址: https://gitcode.com/gh_mirrors/te/teenyicons