heroicons下载 - heroicons源代码下载

heroicons

其他源码

v2.2.0

下载

由Tailwind CSS的制造商由精美的手工制作的SVG图标。
作为基本SVG图标以及通过第一方React和Vue库可用。

在hipericons.com上浏览→

基本用法

使用这些图标的最快方法是简单地复制您所需的图标的源，并将其直接插入您的HTML：

 <svg
  class =“ size-6 text-gray-500” fill =“ none” viewbox =“ 0 0 24 24” stroke =“ currentColor” stroke witth =“ 2”>
  <pathStroke-linecap =“ round” stroke-line join =“ rond” d =“ m12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 9 0 0118 0z”
  /> </svg>

两种图标样式都是通过手动设置color CSS属性或在诸如Tailwind CSS之类的框架中使用诸如text-gray-500之类的实用程序类（例如Text-Gray-500）来预先配置的。

反应

首先，安装@heroicons/react ：

 npm install @heroicons/react

现在，每个图标都可以单独导入作为反应组件：

导入{beakericon}来自'@obericons/react/react/24/solid'function mycomponent（）{
  返回（<div> <beakericon className =“ size-6 text-blue-500”/> <p> ... </p> </div>
  ）

24x24概述图标可以从@heroicons/react/24/outline中导入，可以从@heroicons/react/24/solid导入24x24固体图标，20x20固体图标可以从@heroicons/react/20/solid导入，可以从@heroicons/react/16/solid导入16x16固体图标。

图标使用上层骆驼盒命名惯例，并始终用图标Icon形成后缀。

浏览UNPKG上的图标名称的完整列表→

Vue

首先，从NPM安装@heroicons/vue ：

 npm install @herioicons/vue

现在，每个图标都可以单独导入为VUE组件：

 <模板>
  <div>
    <beakericon class =“ size-6 text-blue-500” />
    <p> ... </p>
  </div>
</template> <脚本设置> import {beakericon}来自'@keriocons/vue/vue/vue/24/solid'</script>

24x24概述图标可以从@heroicons/vue/24/outline中导入，可以从@heroicons/vue/24/solid导入24x24固体图标，可以从@heroicons/vue/20/solid导入20x20固体图标。，并且可以从@heroicons/vue/16/solid导入16x16固体图标。

图标使用上层骆驼盒命名惯例，并始终用图标Icon形成后缀。

浏览UNPKG上的图标名称的完整列表→