Heroicons v1.0

React + Vue 库(React + Vue libraries)

¥React + Vue libraries

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

¥In addition to grabbing the icons you need directly from the website, you can now install our official React and Vue libraries for quick and easy access to each icon as a dedicated component.

例如，使用 React 时的样子如下：

¥Here's what it looks like with React for example:

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

访问 GitHub 上的 Check out the documentation 了解更多信息。

¥Check out the documentation on GitHub to learn more.

Figma 资源(Figma assets)

¥Figma assets

我们还在新的 Figma 社区页面上发布了官方 Heroicons Figma file！

¥We've also published an official Heroicons Figma file on our new Figma Community page!

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

¥It includes all the icons from Heroicons as individual Figma components so you can easily use them in your projects without having to manually import each SVG.

想要开始试用吗？Visit the Heroicons website →

¥Want to start playing with it? Visit the Heroicons website →