
React + Vue 库(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 上的文档 以了解更多信息。
Figma 资源(Figma assets)
我们还在新的 Figma 社区页面上发布了官方的 Heroicons Figma 文件!
它包含 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.
想开始使用它吗? 访问 Heroicons 网站 →