หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ไอคอนตอบสนอง

รวมไอคอนยอดนิยมในโปรเจ็กต์ React ของคุณได้อย่างง่ายดายด้วย react-icons ซึ่งใช้การนำเข้า ES6 ที่ให้คุณรวมเฉพาะไอคอนที่โปรเจ็กต์ของคุณใช้อยู่

การติดตั้ง (สำหรับโครงการมาตรฐานสมัยใหม่) 

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

ตัวอย่างการใช้งาน 

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

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

ดูเอกสารประกอบสำหรับตัวอย่างการใช้งานเพิ่มเติมและวิธีใช้ไอคอนจากแพ็คเกจอื่น หมายเหตุ : แต่ละแพ็คเกจไอคอนจะมีโฟลเดอร์ย่อยของตัวเองภายใต้ react-icons ที่คุณนำเข้า

ตัวอย่างเช่น หากต้องการใช้ไอคอนจาก Material Design การนำเข้าของคุณจะเป็น: import { ICON_NAME } from 'react-icons/md';

การติดตั้ง (สำหรับ meteorjs, gatsbyjs ฯลฯ )

หมายเหตุ ตัวเลือกนี้ไม่มีรุ่นใหม่มาระยะหนึ่งแล้ว ข้อมูลเพิ่มเติม #593

หากโครงการของคุณขยายขนาด ตัวเลือกนี้จะสามารถใช้ได้ วิธีนี้มีข้อเสียที่ต้องใช้เวลานานในการติดตั้งแพ็คเกจ 

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

ตัวอย่างการใช้งาน 

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

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

ไอคอน

ไลบรารีไอคอน ใบอนุญาต เวอร์ชัน นับ
ไอคอนเซอร์คัม ใบอนุญาต MPL-2.0 1.0.0 288
แบบอักษรที่ยอดเยี่ยม 5 ใบอนุญาต CC BY 4.0 5.15.4-3-gafecf2a 1612
แบบอักษรที่ยอดเยี่ยม 6 ใบอนุญาต CC BY 4.0 6.5.2 2045
ไอโอคอน 4 เอ็มไอที 4.6.3 696
อิออนคอน 5 เอ็มไอที 5.5.4 1332
ไอคอนการออกแบบวัสดุ ใบอนุญาต Apache เวอร์ชัน 2.0 4.0.0-98-g9beae745bb 4341
พิมพ์ดีด ซีซี BY-SA 3.0 2.1.2 336
ไอคอน Github Octicons เอ็มไอที 18.3.0 264
ขนนก เอ็มไอที 4.29.1 287
ลูซิด ไอเอสซี v5.1.0-6-g438f572e 1215
ไอคอนเกม ซีซี BY 3.0 12920d6565588f0512542a3cb0cdfd36a497f910 4040
ไอคอนสภาพอากาศ ซิล โอเอฟแอล 1.1 2.0.12 219
เดวิคอนส์ เอ็มไอที 1.8.0 192
แอนท์ดีไซน์ไอคอน เอ็มไอที 4.4.2 831
ไอคอนบูทสแตรป เอ็มไอที 1.11.3 2716
รีมิกซ์ไอคอน ใบอนุญาต Apache เวอร์ชัน 2.0 4.2.0 2860
ไอคอนสีแบน เอ็มไอที 1.0.2 329
Grommet-ไอคอน ใบอนุญาต Apache เวอร์ชัน 2.0 4.12.1 635
ฮีโร่ไอคอน เอ็มไอที 1.0.6 460
ฮีโร่ไอคอน 2 เอ็มไอที 2.1.3 888
ไอคอนธรรมดา CC0 1.0 สากล 12.14.0 3209
ไอคอนเส้นธรรมดา เอ็มไอที 2.5.5 189
IcoMoon ฟรี ใบอนุญาต CC BY 4.0 d006795ede82361e1bac1ee76f215cf1dc51e4ca 491
กล่องไอคอน เอ็มไอที 2.1.4 1634
css.gg เอ็มไอที 2.1.1 704
VS รหัสไอคอน ซีซี BY 4.0 0.0.35 461
ไอคอนตาราง เอ็มไอที 3.2.0 5237
กำหนดไอคอน เอ็มไอที v0.1.2-2-g9600186 352
ไอคอน Radix เอ็มไอที @ Radix-ui/[email protected] 318
ไอคอนสารเรืองแสง เอ็มไอที 2.1.1 9072
Icons8 Line สุดยอดมาก เอ็มไอที 1.3.1 1544

คุณสามารถเพิ่มไอคอนเพิ่มเติมได้โดยส่งคำขอดึงหรือสร้างปัญหา

การกำหนดค่า

คุณสามารถกำหนดค่าอุปกรณ์ประกอบฉากไอคอนโต้ตอบได้โดยใช้ React Context API

ต้องใช้ React 16.3 หรือสูงกว่า 

 import { IconContext } from "react-icons" ;

< IconContext . Provider value = { { color : "blue" , className : "global-class-name" } } >
  < div >
    < FaFolder / >
  < / div >
< / IconContext . Provider > ;
สำคัญ ค่าเริ่มต้น หมายเหตุ
color undefined (สืบทอด)
size 1em
className undefined
style undefined สามารถเขียนทับขนาดและสีได้
attr undefined ถูกเขียนทับด้วยคุณสมบัติอื่น
title undefined คำอธิบายไอคอนสำหรับการเข้าถึง

กำลังย้ายจากเวอร์ชัน 2 -> 3

เปลี่ยนรูปแบบการนำเข้า

เส้นทางการนำเข้ามีการเปลี่ยนแปลง คุณต้องเขียนใหม่จากรูปแบบเก่า 

 // 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 >
  ) ;
}

ลงท้ายด้วยชุด JS ขนาดใหญ่ใช่ไหม ตรวจสอบปัญหานี้

การปรับ CSS

จากเวอร์ชัน 3 จะไม่มีการกำหนด vertical-align: middle โดยอัตโนมัติ โปรดใช้ IconContext เพื่อระบุ className หรือระบุสไตล์อินไลน์

การจัดสไตล์อินไลน์ระดับโลก 

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

การจัดสไตล์ className โลก

ส่วนประกอบ 

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

ซีเอสเอส 

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

การสนับสนุนดั้งเดิมของ TypeScript

การพึ่งพา @types/react-icons สามารถลบได้

เส้นด้าย 

yarn remove @types/react-icons

เอ็นพีเอ็ม 

npm remove @types/react-icons

มีส่วนร่วม

./build-script.sh จะสร้างโปรเจ็กต์ทั้งหมด ดูเพิ่มเติมที่สคริปต์ CI สำหรับข้อมูลเพิ่มเติม

การพัฒนา 

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

เพิ่ม/อัปเดตชุดไอคอน

ขั้นแรก ตรวจสอบการสนทนาเพื่อดูว่ามีใครต้องการเพิ่มชุดไอคอนหรือไม่

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

ไฟล์ SVG ที่จะดึงข้อมูลได้รับการจัดการในไฟล์นี้ แก้ไขไฟล์นี้และรัน yarn fetch && yarn check && yarn build

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

ดูตัวอย่าง

หมายเหตุ โครงการไม่ยอมรับ PR สำหรับไซต์แสดงตัวอย่างในขณะนี้

ไซต์แสดงตัวอย่างคือเว็บไซต์ react-icons ที่สร้างขึ้นใน Astro+React 

 cd packages/react-icons
yarn fetch
yarn build

cd ../preview-astro
yarn start

สาธิต

การสาธิตนี้เป็นต้นแบบของ Create React App ที่มี react-icons เพิ่มเข้ามาเพื่อการทดสอบที่ง่ายดาย 

 cd packages/react-icons
yarn fetch
yarn build

cd ../demo
yarn start

เหตุใดจึงต้องตอบสนองส่วนประกอบ SVG แทนที่จะเป็นแบบอักษร

SVG ได้รับการสนับสนุนโดยเบราว์เซอร์หลักๆ ทั้งหมด ด้วย react-icons คุณสามารถให้บริการเฉพาะไอคอนที่จำเป็นแทนไฟล์ฟอนต์ขนาดใหญ่เพียงไฟล์เดียวแก่ผู้ใช้ ช่วยให้คุณรับรู้ว่าไอคอนใดที่ใช้ในโปรเจ็กต์ของคุณ

โครงการที่เกี่ยวข้อง

  • ปฏิกิริยา-svg-morph

ใบอนุญาต

เอ็มไอที

  • ไอคอนนำมาจากโครงการอื่น ดังนั้นโปรดตรวจสอบใบอนุญาตแต่ละโครงการตามลำดับ
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด