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 Community 页面上发布了官方的 Heroicons Figma 文件！

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

想开始玩一下吗？ 访问 Heroicons 网站 →