react simple icons

react-simple-icons

Paket ini menyediakan ikon sederhana 13.18.0 dikemas sebagai satu set komponen React.

Instalasi

Instal paket di direktori proyek Anda dengan:

// with yarn
yarn add @icons-pack/react-simple-icons

// with npm
npm add @icons-pack/react-simple-icons

// with pnpm
pnpm add @icons-pack/react-simple-icons

// with bun
bun add @icons-pack/react-simple-icons

Dukungan naskah

Penggunaan

Anda dapat menggunakan Simpleicons.org untuk menemukan ikon tertentu. Saat mengimpor ikon, perlu diingat bahwa nama -nama ikon adalah Uppercamelcase, misalnya:

• Material Design diekspos sebagai { SiMaterialdesign } from @icons-pack/react-simple-icons
• azure devOps diekspos sebagai { SiAzuredevops } from @icons-pack/react-simple-icons

Demo

Edit kode dan kotak

Contoh Dasar

 import { SiReact } from '@icons-pack/react-simple-icons' ;

function BasicExample ( ) {
  return < SiReact color = '#61DAFB' size = { 24 } /> ;
} 

Ubah judul

@icons-pack/react-simple-icons menyediakan judul default yang mengacu pada nama komponen

Elemen <title> menyediakan deskripsi teks pendek yang dapat diakses dari setiap elemen kontainer SVG atau elemen grafis.

 import { SiReact } from '@icons-pack/react-simple-icons' ;

// title default "React"
function ChangeTitle ( ) {
  return < SiReact title = 'My title' color = '#61DAFB' size = { 24 } /> ;
} 

Gunakan warna default

Setel warna sebagai default untuk menggunakan warna default untuk setiap ikon

 import { SiReact } from '@icons-pack/react-simple-icons' ;

function DefaultColorExample ( ) {
  return < SiReact color = 'default' size = { 24 } /> ;
}

Gunakan warna default sebagai hex

Tambahkan Hex ke nama ikon untuk menggunakan warna default sebagai string hex

 import { SiReact , SiReactHex } from '@icons-pack/react-simple-icons' ;

function DefaultColorExample ( ) {
  return < SiReact color = { SiReactHex } size = { 24 } /> ;
} 

Gaya khusus

 import { SiReact } from '@icons-pack/react-simple-icons' ;

function CustomStyles ( ) {
  return < SiReact className = 'myStyle' /> ;
} 

. myStyle {
  width : 35 px ;
  height : 35 px ;
}