heroiconsのダウンロードheroiconsソースコードのダウンロード

heroicons

その他のソースコード

v2.2.0

ダウンロード

Tailwind CSSのメーカーによる美しい手作りのSVGアイコン。
基本的なSVGアイコンとして、およびFirst-Party ReactおよびVueライブラリを介して利用可能。

HeroIcons.comで閲覧→

基本的な使用法

これらのアイコンを使用する最も簡単な方法は、HeroIcons.comから必要なアイコンのソースを単純にコピーし、HTMLに直接インラインでコピーすることです。

 <svg
  class = "size-6 text-gray-500" fill = "none" viewbox = "0 0 24 24" stroke = "currentColor" stroke-width = "2">
  <pathstroke-linecap = "round" stroke-linejoin = "round" d = "m12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 9 0 0118 0Z"
  /> </svg>

どちらのアイコンスタイルも、 color CSSプロパティを手動で設定するか、Tailwind CSSのようなフレームワークでtext-gray-500などのユーティリティクラスを使用することにより、スタイル可能であると事前に設定されています。

反応します

まず、npmから@heroicons/reactをインストールしてください：

 NPMインストール @HeroIcons/React

これで、各アイコンはReactコンポーネントとして個別にインポートできます。

 '@HeroIcons/React/24/Solid'Function myComponent（）から{beakericon}をインポート{）{
  return（<div> <beakericon classname = "size-6 text-blue-500"/> <p> ... </p> </div>
  ）}

24x24のアウトラインアイコンは@heroicons/react/24/outlineからインポートできます。24x24のソリッドアイコンは@heroicons/react/24/solidからインポートできます。20x20ソリッドアイコンは@heroicons/react/20/solidからインポートできます。、および16x16のソリッドアイコンは@heroicons/react/16/solidからインポートできます。

アイコンは、アッパーキャメルケースの命名規則を使用し、常に単語のIconで接尾辞が付いています。

UNPKGのアイコン名の完全なリストを参照→

vue

まず、NPMから@heroicons/vueをインストールします。

 NPMインストール @HeroIcons/Vue

これで、各アイコンはVUEコンポーネントとして個別にインポートできます。

 <テンプレート>
  <div>
    <beakericon class = "size-6 text-blue-500" />
    <p> ... </p>
  </div>
</template> <スクリプトセットアップ> '@HeroIcons/vue/24/solid' </scrip>からImport {beakericon}

24x24のアウトラインアイコンは@heroicons/vue/24/outlineからインポートできます。24x24のソリッドアイコンは、 @heroicons/vue/24/solidからインポートできます。20x20ソリッドアイコンは@heroicons/vue/20/solid 、そして16x16のソリッドアイコンは@heroicons/vue/16/solidからインポートできます。

アイコンは、アッパーキャメルケースの命名規則を使用し、常に単語のIconで接尾辞が付いています。

UNPKGのアイコン名の完全なリストを参照→