react simple icons

react-simple-icons

แพ็คเกจนี้ให้ไอคอนง่ายๆ 13.18.0 บรรจุเป็นชุดของส่วนประกอบปฏิกิริยา

การติดตั้ง

ติดตั้งแพ็คเกจในไดเรกทอรีโครงการของคุณด้วย:

// 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

การสนับสนุน TypeScript

การใช้งาน

คุณสามารถใช้ simpleicons.org เพื่อค้นหาไอคอนเฉพาะ เมื่อนำเข้าไอคอนโปรดทราบว่าชื่อของไอคอนเป็นตัวพิมพ์ใหญ่เช่น:

• Material Design ถูกเปิดเผยเป็น { SiMaterialdesign } from @icons-pack/react-simple-icons
• azure devOps ถูกเปิดเผยเป็น { SiAzuredevops } from @icons-pack/react-simple-icons

การสาธิต

แก้ไข CodesandBox

ตัวอย่างพื้นฐาน

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

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

เปลี่ยนชื่อ

@icons-pack/react-simple-icons ให้ชื่อเริ่มต้นที่อ้างถึงชื่อส่วนประกอบ

องค์ประกอบ <title> ให้คำอธิบายข้อความสั้น ๆ ที่เข้าถึงได้ขององค์ประกอบคอนเทนเนอร์ SVG หรือองค์ประกอบกราฟิกใด ๆ

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

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

ใช้สีเริ่มต้น

ตั้งค่าสีเป็น default เพื่อใช้สีเริ่มต้นสำหรับแต่ละไอคอน

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

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

ใช้สีเริ่มต้นเป็น hex

ผนวก Hex เข้ากับชื่อไอคอนเพื่อใช้สีเริ่มต้นเป็นสตริง hex

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

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

สไตล์ที่กำหนดเอง

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

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

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