Heroicons.com 隆重推出

Steve Schoger
heroicons.com

几个月前,我们悄然发布了 Heroicons,这是一套免费的 SVG 图标,最初设计用于支持 Tailwind UI 中的组件。今天,我们推出了官方 Heroicons web experience,它让你可以比以往更轻松地搜索图标,并快速将其作为 Tailwind 就绪的 HTML 或 JSX 复制到剪贴板。

¥A few months back we quietly released Heroicons, a set of free SVG icons we initially designed to support the components in Tailwind UI. Today we’re launching the official Heroicons web experience, which makes it easier than ever to search for icons and quickly copy them to your clipboard as Tailwind-ready HTML or JSX.

目前有超过 220 个图标,提供中号和小号两种尺寸,每个尺寸的设计都针对不同的用例:

¥There are currently over 220 icons available in both medium and small sizes, with size designed to serve a different use-case:

  • 中等图标设计为 24x24 分辨率渲染,适用于主导航和市场营销等部分。

    ¥Medium icons are designed to be rendered at 24x24, and work well for things like primary navigation and marketing sections.

  • 小图标设计为 20x20 分辨率渲染,非常适合按钮、表单元素和文本支持。

    ¥Small icons are designed to be rendered at 20x20, and work well for buttons, form elements and to support text.

所有图标均已支持 Tailwind,并可使用 Tailwind 内置的尺寸和颜色工具轻松设置样式。

¥All of the icons are Tailwind-ready, and are easy to style with Tailwind’s built-in size and color utilities.

<svg  class="h-6 w-6 text-indigo-500"  xmlns="http://www.w3.org/2000/svg"  fill="none"  viewBox="0 0 24 24"  stroke="currentColor">  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>

为了获得最佳效果,请使用 h-6 w-6 来制作中等大小的图标,使用 h-5 w-5 来制作小图标。

¥For best results, use h-6 w-6 for medium icons, and h-5 w-5 for small icons.

仅仅是开始(Just the beginning)

¥Just the beginning

我们对新图标和新图标样式(比如双色调图标?)有很多想法,我们很期待在接下来的几个月里设计和发布。

¥We’ve got lots of ideas for both new icons, as well as new icon styles (duotone anyone?) that we’re excited to design and release in the coming months.

Icon Styles Example

设计这个网站也让我迫不及待地想要更新 Hero Patterns 网站,所以你很快就会在 heropatterns.com 看到类似这样的内容:

¥Designing this site also got me itching to refresh the Hero Patterns site, so you’ll probably see something like this show up at heropatterns.com pretty soon:

Hero Patterns Preview

我们还有很多 other “Hero” domains 组件等待投入使用,我迫不及待地想很快揭晓我们正在为这些组件开发的内容。

¥We’ve got a bunch of other “Hero” domains waiting to be put to use too, and I’m pumped to reveal what we’re working on for those soon.

有什么建议吗?(Got a suggestion?)

¥Got a suggestion?

如果你对新图标有任何想法,我们非常乐意听取!前往 Heroicons GitHub 仓库 并提交问题以提出建议。

¥If you have any ideas for new icons we’d love to hear them! Head over to the Heroicons GitHub repository and open an issue to make a suggestion.

想要讨论这篇文章吗?Discuss this on GitHub →

¥Want to talk about this post? Discuss this on GitHub →

TailwindCSS v4.1 中文网 - 粤ICP备13048890号