Unduh react icons - react icons Unduh kode sumber

react icons

Kode sumber lainnya

v5.3.0

Unduh

Ikon Reaksi

Sertakan ikon populer dalam proyek React Anda dengan mudah menggunakan react-icons , yang memanfaatkan impor ES6 yang memungkinkan Anda hanya menyertakan ikon yang digunakan proyek Anda.

Instalasi (untuk proyek modern standar)

yarn add react-icons
# or
npm install react-icons --save

contoh penggunaan

 import { FaBeer } from "react-icons/fa" ;

function Question ( ) {
  return (
    < h3 >
      Lets go for a < FaBeer / > ?
    < / h3 >
  ) ;
}

Lihat dokumentasi untuk contoh penggunaan lebih lanjut dan cara menggunakan ikon dari paket lain. CATATAN : setiap paket Ikon memiliki subfoldernya sendiri di bawah react-icons tempat Anda mengimpor.

Misalnya, untuk menggunakan ikon dari Material Design , impor Anda adalah: import { ICON_NAME } from 'react-icons/md';

Instalasi (untuk meteorjs, gatsbyjs, dll)

Catatan Opsi ini belum memiliki rilis baru selama beberapa waktu. Informasi lebih lanjut #593

Jika proyek Anda bertambah besar, opsi ini tersedia. Metode ini memiliki kekurangan yaitu memerlukan waktu lama untuk menginstal paket.

yarn add @react-icons/all-files
# or
npm install @react-icons/all-files --save

contoh penggunaan

 import { FaBeer } from "@react-icons/all-files/fa/FaBeer" ;

function Question ( ) {
  return (
    < h3 >
      Lets go for a < FaBeer / > ?
    < / h3 >
  ) ;
}

Ikon

Perpustakaan Ikon	Lisensi	Versi	Menghitung
Ikon Sirkum	Lisensi MPL-2.0	1.0.0	288
Font Luar Biasa 5	Lisensi CC BY 4.0	5.15.4-3-gafecf2a	1612
Font Luar Biasa 6	Lisensi CC BY 4.0	6.5.2	2045
Ionikon 4	MIT	4.6.3	696
Ionikon 5	MIT	5.5.4	1332
Ikon Desain Material	Lisensi Apache Versi 2.0	4.0.0-98-g9beae745bb	4341
Tipikon	CC BY-SA 3.0	2.1.2	336
Ikon Github Octicons	MIT	18.3.0	264
Bulu	MIT	4.29.1	287
Lucida	adalah	v5.1.0-6-g438f572e	1215
Ikon Permainan	CC OLEH 3.0	12920d6565588f0512542a3cb0cdfd36a497f910	4040
Ikon Cuaca	SIL OFL 1.1	2.0.12	219
Devicon	MIT	1.8.0	192
Ikon Desain Semut	MIT	4.4.2	831
Ikon Bootstrap	MIT	1.11.3	2716
Ikon Remix	Lisensi Apache Versi 2.0	4.2.0	2860
Ikon Warna Datar	MIT	1.0.2	329
Ikon Grommet	Lisensi Apache Versi 2.0	4.12.1	635
Ikon Pahlawan	MIT	1.0.6	460
Ikon Pahlawan 2	MIT	2.1.3	888
Ikon Sederhana	CC0 1.0 Universal	12.14.0	3209
Ikon Garis Sederhana	MIT	2.5.5	189
IcoMoon Gratis	Lisensi CC BY 4.0	d006795ede82361e1bac1ee76f215cf1dc51e4ca	491
Ikon Kotak	MIT	2.1.4	1634
css.gg	MIT	2.1.1	704
Ikon Kode VS	CC OLEH 4.0	0,0.35	461
Ikon Meja	MIT	3.2.0	5237
Ikon Tema	MIT	v0.1.2-2-g9600186	352
Ikon Radix	MIT	@radix-ui/[email protected]	318
Ikon Fosfor	MIT	2.1.1	9072
Ikon8 Garis Luar Biasa	MIT	1.3.1	1544

Anda dapat menambahkan lebih banyak ikon dengan mengirimkan permintaan penarikan atau membuat masalah.

Konfigurasi

Anda dapat mengonfigurasi props ikon reaksi menggunakan React Context API.

Membutuhkan React 16.3 atau lebih tinggi.

 import { IconContext } from "react-icons" ;

< IconContext . Provider value = { { color : "blue" , className : "global-class-name" } } >
  < div >
    < FaFolder / >
  < / div >
< / IconContext . Provider > ;

Kunci	Bawaan	Catatan
`color`	`undefined` (mewarisi)
`size`	`1em`
`className`	`undefined`
`style`	`undefined`	Bisa menimpa ukuran dan warna
`attr`	`undefined`	Ditimpa oleh atribut lain
`title`	`undefined`	Deskripsi ikon untuk aksesibilitas

Bermigrasi dari versi 2 -> 3

Ubah gaya impor

Jalur impor telah berubah. Anda perlu menulis ulang dari gaya lama.

 // OLD IMPORT STYLE
import FaBeer from "react-icons/lib/fa/beer" ;

function Question ( ) {
  return (
    < h3 >
      Lets go for a < FaBeer / > ?
    < / h3 >
  ) ;
}

 // NEW IMPORT STYLE
import { FaBeer } from "react-icons/fa" ;

function Question ( ) {
  return (
    < h3 >
      Lets go for a < FaBeer / > ?
    < / h3 >
  ) ;
}

Berakhir dengan bundel JS yang besar? Lihat masalah ini.

Penyesuaian CSS

Dari versi 3, vertical-align: middle tidak diberikan secara otomatis. Silakan gunakan IconContext untuk menentukan className atau menentukan gaya sebaris.

Gaya Sebaris Global

 < IconContext . Provider value = { { style : { verticalAlign : 'middle' } } } >

Gaya `className` Global

Komponen

 < IconContext . Provider value = { { className : 'react-icons' } } >

CSS

. react-icons {
  vertical-align : middle;
}

Dukungan asli TypeScript

Ketergantungan pada @types/react-icons dapat dihapus.

Benang

yarn remove @types/react-icons

NPM

npm remove @types/react-icons

Berkontribusi

./build-script.sh akan membangun keseluruhan proyek. Lihat juga skrip CI untuk informasi lebih lanjut.

Perkembangan

yarn
cd packages/react-icons
yarn fetch  # fetch icon sources
yarn build

Kumpulan ikon Tambah/Perbarui

Pertama, periksa diskusi untuk melihat apakah ada yang ingin menambahkan kumpulan ikon.

https://github.com/react-icons/react-icons/discussions/categories/new-icon-set

File SVG yang akan diambil dikelola dalam file ini. Edit file ini dan jalankan yarn fetch && yarn check && yarn build .

https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/icons/index.ts

Pratinjau

Catatan Proyek ini tidak secara aktif menerima PR untuk situs pratinjau saat ini.

Situs pratinjau adalah situs web react-icons , yang dibangun di Astro+React.

 cd packages/react-icons
yarn fetch
yarn build

cd ../preview-astro
yarn start

Demo

Demo ini adalah boilerplate Buat Aplikasi React dengan react-icons yang ditambahkan sebagai ketergantungan untuk memudahkan pengujian.

 cd packages/react-icons
yarn fetch
yarn build

cd ../demo
yarn start

Mengapa Bereaksi komponen SVG dan bukan font?

SVG didukung oleh semua browser utama. Dengan react-icons , Anda hanya dapat menyajikan ikon yang diperlukan dan bukan satu file font besar kepada pengguna, sehingga membantu Anda mengenali ikon mana yang digunakan dalam proyek Anda.