heroicons

Ikon SVG kerajinan tangan yang indah, oleh pembuat CSS Tailwind.
Tersedia sebagai ikon SVG dasar dan melalui perpustakaan reaksi dan vue pihak pertama.

Jelajahi di heroicons.com →

Penggunaan dasar

Cara tercepat untuk menggunakan ikon -ikon ini adalah dengan cukup menyalin sumber untuk ikon yang Anda butuhkan dari heroicons.com dan sebaris langsung ke html Anda:

 <svg
  class = "size-6 Text-Gray-500" Fill = "None" ViewBox = "0 0 24 24" Stroke = "CurrentColor" Stroke-Bridth = "2">
  <PathStroke-linecap = "bundar" stroke-linejoin = "round" d = "m12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
  /> </svg>

Kedua gaya ikon itu dikonfigurasikan untuk dapat ditata dengan mengatur properti CSS color , baik secara manual atau menggunakan kelas utilitas seperti text-gray-500 dalam kerangka kerja seperti Tailwind CSS.

Bereaksi

Pertama, instal @heroicons/react dari NPM:

 NPM menginstal @heroicons/react

Sekarang setiap ikon dapat diimpor secara individual sebagai komponen bereaksi:

 Impor {Beakericon} dari '@heroicons/react/24/solid'function myComponent () {
  return (<div> <eakericon classname = "size-6 text-blue-500"/> <p> ... </p> </div>
  )}

Ikon garis besar 24x24 dapat diimpor dari @heroicons/react/24/outline , ikon solid 24x24 dapat diimpor dari @heroicons/react/24/solid , ikon padat 20x20 dapat diimpor dari @heroicons/react/20/solid , dan 16x16 ikon padat dapat diimpor dari @heroicons/react/16/solid .

Ikon menggunakan konvensi penamaan casing unta atas dan selalu sufiks dengan kata Icon .

Jelajahi daftar lengkap nama ikon di UNPKG →

Vue

Pertama, instal @heroicons/vue dari NPM:

 NPM menginstal @heroicons/vue

Sekarang setiap ikon dapat diimpor secara individual sebagai komponen VUE:

 <lemplate>
  <div>
    <Beakericon class = "size-6 text-blue-500" />
    <p> ... </p>
  </div>
</lemplate> <script setup> import {Beakericon} dari '@heroicons/vue/24/solid' </script>

Ikon garis besar 24x24 dapat diimpor dari @heroicons/vue/24/outline , ikon solid 24x24 dapat diimpor dari @heroicons/vue/24/solid , ikon padat 20x20 dapat diimpor dari @heroicons/vue/20/solid , dan ikon solid 16x16 dapat diimpor dari @heroicons/vue/16/solid .

Ikon menggunakan konvensi penamaan casing unta atas dan selalu sufiks dengan kata Icon .

Jelajahi daftar lengkap nama ikon di UNPKG →

Berkontribusi

Meskipun kami benar -benar menghargai kesediaan siapa pun untuk mencoba dan meningkatkan proyek, saat ini kami hanya tertarik pada kontribusi yang memperbaiki bug, misalnya hal -hal seperti tipe tipe script yang salah, atau memperbaiki ikon yang telah diekspor dengan isi alih -alih stroke, dll.

Kami tidak menerima kontribusi untuk ikon baru atau menambahkan dukungan untuk kerangka kerja lain seperti Svelte atau Solidjs . Alih -alih, kami mendorong Anda untuk melepaskan ikon Anda sendiri di perpustakaan Anda sendiri, dan membuat paket Anda sendiri untuk kerangka kerja lain yang ingin Anda lihat didukung.

Lisensi

Perpustakaan ini berlisensi MIT.