Heroicons v1.0

React + Vue 库

除了直接从网站获取您需要的图标外，您现在还可以安装我们的官方 React 和 Vue 库，以便快速轻松地访问每个图标作为专用组件。

这是一个使用 React 的示例

import { BeakerIcon } from "@heroicons/react/solid";
function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-5 w-5 text-blue-500" />
      <p>...</p>
    </div>
  );
}

查看 GitHub 上的文档以了解更多信息。

Figma 资源

我们还在新的 Figma 社区页面上发布了一个官方 Heroicons Figma 文件！

它包含了 Heroicons 中的所有图标作为单独的 Figma 组件，因此您可以轻松地在项目中使用它们，而无需手动导入每个 SVG。

想开始使用它吗？访问 Heroicons 网站 →