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上的圖標名稱的完整列表→