react native vector icons react native vector icons Download - Icon Icons Icons Race Native Icons Download

ไอคอนเวกเตอร์ดั้งเดิมตอบสนอง

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

สำหรับการรวมไฟล์ .svg โดยธรรมชาติคุณสามารถสำรวจ react-native-vector-image

เคล็ดลับ

RNVI เวอร์ชันใหม่กำลังจะมาเร็ว ๆ นี้ มันมีการตั้งค่าการกำหนดค่าเกือบเป็นศูนย์ ยินดีต้อนรับข้อเสนอแนะโปรดลองใช้สาขา Monorepo

สารบัญ

ชุดไอคอนแบบรวม
การติดตั้ง
- การตั้งค่า iOS
- การตั้งค่า Android
- การตั้งค่า macOS
- การตั้งค่า Windows
- การตั้งค่า React-Web
- การตั้งค่าเว็บ
การอัพเกรด
ส่วนประกอบไอคอน
Icon.button Component
การใช้งานเป็นอิมเมจภาพ/แหล่งข้อมูล PNG
ฟอนต์หลายสไตล์
แบบอักษรที่กำหนดเอง
ความเคลื่อนไหว
ตัวอย่างการใช้งาน
แท็บบาร์
การสร้างไอคอนของคุณเองจากไฟล์ CSS
การเปลี่ยนแปลง
การแก้ไขปัญหา
ใบอนุญาต

การสนับสนุน

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

ชุดไอคอนแบบรวม

สำรวจไอคอนทั้งหมด

AntDesign จาก antfinance ( 298 ไอคอน)
Entypo โดย Daniel Bruce (v1.0.1 พร้อมไอคอน 411 )
EvilIcons ออกแบบโดย Alexander Madyankin & Roman Shamin (v1.10.1 พร้อมไอคอน 70 รายการ )
Feather สร้างโดย Cole Bemis & Inturnors (v4.28.0 เนื้อเรื่อง 286 ไอคอน)
FontAwesome โดย Dave Gandy (v4.7.0 มีไอคอน 675 )
FontAwesome 5 จาก Fonticons, Inc. (v5.15.3 เสนอ 1598 ฟรีและไอคอน 7848 Pro)
FontAwesome 6 ออกแบบโดย Fonticons, Inc. (v6.6.0 นำเสนอไอคอนฟรี 2016 และ 16150 Pro)
Fontisto สร้างโดย Kenan Gündoğan (v3.0.4 เนื้อเรื่อง 615 ไอคอน)
Foundation โดย Zurb, Inc. (v3.0 พร้อมไอคอน 283 )
Ionicons สร้างขึ้นโดย Ionic (v7.1.0 ที่มีไอคอน 1338 )
MaterialIcons โดย Google, Inc. (v4.0.0 มีไอคอน 2189 )
MaterialCommunityIcons จาก Materialdesignicons.com (v6.5.95 รวมถึงไอคอน 6596 )
Octicons ออกแบบโดย GitHub, Inc. (v16.3.1 พร้อมไอคอน 250 )
Zocial โดย Sam Collins (v1.4.0 พร้อมไอคอน 100 รายการ )
SimpleLineIcons สร้างขึ้นโดย Sabbir & Intuthorors (v2.5.5 พร้อมไอคอน 189 )

การติดตั้ง

ติดตั้งแพ็คเกจผ่าน NPM:
```
npm install --save react-native-vector-icons
```
ขึ้นอยู่กับแพลตฟอร์มที่คุณกำหนดเป้าหมาย (iOS/Android/Windows) ทำตามคำแนะนำการตั้งค่าที่เหมาะสม
หากคุณวางแผนที่จะใช้ไอคอน Fontawesome 5 หรือ 6 ให้อ้างอิงคำแนะนำเหล่านี้: Fontawesome 5 | Fontawesome 6

การตั้งค่า iOS

หากต้องการใช้ไอคอนที่รวมอยู่บน iOS ให้ทำตามขั้นตอนต่อไปนี้:

เรียกใช้ npx pod-install ในไดเรกทอรี iOS

แก้ไข Info.plist และเพิ่มคุณสมบัติที่เรียกว่า แบบอักษรที่จัดทำโดยแอปพลิเคชัน (หรือ uiappfonts หาก Xcode Autocomplete ไม่ทำงาน):

รายการแบบอักษรที่มีอยู่ทั้งหมดเพื่อคัดลอกและวางใน info.plist

< key >UIAppFonts</ key >
< array >
  < string >AntDesign.ttf</ string >
  < string >Entypo.ttf</ string >
  < string >EvilIcons.ttf</ string >
  < string >Feather.ttf</ string >
  < string >FontAwesome.ttf</ string >
  < string >FontAwesome5_Brands.ttf</ string >
  < string >FontAwesome5_Regular.ttf</ string >
  < string >FontAwesome5_Solid.ttf</ string >
  < string >FontAwesome6_Brands.ttf</ string >
  < string >FontAwesome6_Regular.ttf</ string >
  < string >FontAwesome6_Solid.ttf</ string >
  < string >Foundation.ttf</ string >
  < string >Ionicons.ttf</ string >
  < string >MaterialIcons.ttf</ string >
  < string >MaterialCommunityIcons.ttf</ string >
  < string >SimpleLineIcons.ttf</ string >
  < string >Octicons.ttf</ string >
  < string >Zocial.ttf</ string >
  < string >Fontisto.ttf</ string >
</ array >

ขั้นตอนด้านบนอาจมีลักษณะเช่นนี้:

หมายเหตุ: คอมไพล์โครงการของคุณอีกครั้งหลังจากเพิ่มหรือลบแบบอักษร

การตั้งค่า Android

ตัวเลือก: ด้วย Gradle (แนะนำ)

เพื่อให้การจัดการแบบอักษรราบรื่นขึ้นบน Android ให้ใช้วิธีนี้:

แก้ไข android/app/build.gradle (ไม่ใช่ android/build.gradle ) และเพิ่ม:

apply from : file( " ../../node_modules/react-native-vector-icons/fonts.gradle " )

ในการปรับแต่งฟอนต์ที่ถูกคัดลอกใช้:

project . ext . vectoricons = [
    iconFontNames : [ ' MaterialIcons.ttf ' , ' EvilIcons.ttf ' ] // Specify font files
]

apply from : file( " ../../node_modules/react-native-vector-icons/fonts.gradle " )

การกำหนดค่า Monorepo

หากทำงานใน monorepo ให้ชี้ไปที่เส้นทางที่ถูกต้องของสคริปต์ `fonts.gradle` และไฟล์ตัวอักษรเทียบกับไฟล์ Android/App/Build.gradle โครงสร้างตัวอย่าง:

 your-monorepo/
├─ node_modules/
│  ├─ react-native-vector-icons
├─ apps/
│  ├─ YourApp/
│  │  ├─ android/
│  │  │  ├─ app/
│  │  │  │  ├─ build.gradle

อัปเดตเส้นทางเช่น:

project.ext.vectoricons = [
+ iconFontsDir: "../../../../node_modules/react-native-vector-icons/Fonts",
  iconFontNames: ["YourFont.ttf", "..."]
]

- apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
+ apply from: "../../../../node_modules/react-native-vector-icons/fonts.gradle

ปัญหาที่รายงานเกิดขึ้นเมื่อใช้เวอร์ชัน RNVI เร็วกว่า 9.0.0 ภายในบริบท monorepo ดังนั้นจึงแนะนำให้แน่ใจว่ารุ่น RNVI ของคุณคือ 9.0.0 หรือใหม่กว่า

ตัวเลือก: การรวมด้วยตนเอง

หากต้องการรวมไลบรารีด้วยตนเองให้ทำตามขั้นตอนเหล่านี้:

คัดลอกเนื้อหาจากโฟลเดอร์ Fonts และวางลงใน android/app/src/main/assets/fonts (ตรวจสอบให้แน่ใจว่าชื่อโฟลเดอร์เป็นตัวพิมพ์เล็กเช่น fonts )

การบูรณาการห้องสมุดสำหรับการสนับสนุน `getImageSource`

ขั้นตอนต่อไปนี้เป็นทางเลือกและจำเป็นก็ต่อเมื่อคุณตั้งใจที่จะใช้ Icon.getImageSource

แก้ไขไฟล์ android/settings.gradle ดังที่แสดงด้านล่าง:

rootProject.name = 'MyApp'

include ':app'

+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

แก้ไข android/app/build.gradle (อยู่ในโฟลเดอร์ แอพ ) ดังที่แสดงด้านล่าง:

apply plugin: 'com.android.application'

android {
  ...
}

dependencies {
  implementation fileTree(dir: "libs", include: ["*.jar"])
  //noinspection GradleDynamicVersion
  implementation "com.facebook.react:react-native:+"  // From node_modules

+ implementation project(':react-native-vector-icons')
}

แก้ไข MainApplication.java ของคุณ (อยู่ลึกเข้าไปใน android/app/src/main/java/... ) ดังที่แสดงด้านล่าง (โปรดทราบว่ามี two สถานที่ในการแก้ไข):
```
package com.myapp;

+ import com.oblador.vectoricons.VectorIconsPackage;

....

  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage()
+   , new VectorIconsPackage()
    );
  }
```

โปรดทราบว่าขั้นตอนทางเลือกนี้เป็นสิ่งจำเป็นเฉพาะในกรณีที่ แอป Reaction-Native ของคุณไม่รองรับการเชื่อมโยงอัตโนมัติ มิฉะนั้นคุณสามารถข้ามสิ่งนี้ได้

การตั้งค่า macOS

ผ่าน react-native-macos

หากต้องการตั้งค่าไลบรารีในโครงการ MacOS ของคุณโดยใช้ react-native-macos ให้ทำตามขั้นตอนเหล่านี้:

เรียกดูโฟลเดอร์ node_modules/react-native-vector-icons และลากโฟลเดอร์ Fonts ลงในโครงการของคุณใน XCode ตรวจสอบให้แน่ใจว่าแอปของคุณถูกตรวจสอบภายใต้ "เพิ่มไปยังเป้าหมาย" และเลือก "สร้างการอ้างอิงโฟลเดอร์" เมื่อได้รับแจ้ง
แก้ไข Info.plist ของคุณและรวมถึงคุณสมบัติใหม่ที่ชื่อว่า Application Fonts Resource Path (หรือ ATSApplicationFontsPath หากการเติมข้อความอัตโนมัติของ XCode ไม่ทำงานหรือคุณไม่ได้ใช้ XCode) ตั้งค่าของคุณสมบัตินี้เป็น Fonts
จากการเรียกใช้โฟลเดอร์โครงการ /ios ของคุณ:

bundle exec pod install

โปรดทราบว่าหลังจากเพิ่มแบบอักษรใหม่คุณต้องคอมไพล์โครงการของคุณใหม่ นอกจากนี้ตรวจสอบให้แน่ใจว่าโฟลเดอร์ Fonts อยู่ภายใต้ส่วน ทรัพยากรสำเนาชุดข้อมูล ภายใน เฟสการสร้าง ของโครงการ XCode ของคุณ

ขั้นตอนเหล่านี้จะรวมไลบรารีไอคอนเวกเตอร์เข้ากับโครงการ MACOS ของคุณได้อย่างมีประสิทธิภาพในขณะที่ใช้กรอบ react-native-macos

การตั้งค่า Windows

ผ่าน react-native-windows

หากต้องการตั้งค่าไลบรารีในโครงการ Windows ของคุณโดยใช้ react-native-windows ให้ทำตามขั้นตอนเหล่านี้:

ในโครงการระดับบนสุด ( /windows/project-name/Assets ) คัดลอกและวางไฟล์ตัวอักษร
เปิดโซลูชันของคุณใน Visual Studio:
. คลิกขวาที่โฟลเดอร์สินทรัพย์ในโซลูชันของคุณ ข. เลือก เพิ่ม> รายการที่มีอยู่ ค. เรียกดูและเลือกแบบอักษรที่คุณคัดลอกเข้า /windows/project-name/assets d. คลิก เพิ่ม

โปรดทราบว่าหลังจากเพิ่มแบบอักษรใหม่คุณต้องคอมไพล์โครงการของคุณใหม่

ด้วยการทำตามขั้นตอนเหล่านี้คุณจะรวมไลบรารีไอคอน Vector เข้ากับโครงการ Windows ของคุณอย่างราบรื่นใช้ประโยชน์จากกรอบ react-native-windows

การตั้งค่า React-Web

ในการพอร์ตแอพมือถือที่ตอบโต้ไปยังเว็บโดยใช้ react-native-web คุณเพียงแค่ต้องให้แน่ใจว่าฟอนต์เป็นที่รู้จักในด้านเว็บแอป

คุณจะต้องเพิ่มตัวอักษรสำหรับตัวอักษรแต่ละแบบที่คุณใช้กับ CSS ของคุณ

คุณสามารถดีบักครอบครัวฟอนต์ที่หายไปได้โดยดูที่คอนโซลนักพัฒนาในเว็บเบราว์เซอร์ของคุณเมื่อทำการดีบักแอปพลิเคชันเว็บของคุณ

หมายเหตุ: หากคุณใช้ WebPack หรือคล้ายกันคุณ อาจ ต้องกำหนดค่า WebPack เพื่อจัดการการโหลดแบบอักษร TTF โดยใช้ URL-Loader หรือ File-Loader ดูการตั้งค่าเว็บสำหรับรายละเอียดเพิ่มเติม

ใน App.css ของคุณหรือที่คล้ายกันเพิ่มข้อกำหนดฟอนต์ครอบครัว:

 @font-face {
  src : url (path/to/fonts/Ionicons.ttf);
  font-family : "Ionicons" ;
}

@font-face {
  src : url (path/to/fonts/FontAwesome.ttf);
  font-family : "FontAwesome" ;
}

@font-face {
  src : url (path/to/fonts/FontAwesome5_Brands.ttf);
  font-family : "FontAwesome5_Brands" ;
  font-weight : 400 ; /* Regular weight */
  font-style : normal;
}

@font-face {
  src : url (path/to/fonts/FontAwesome5_Regular.ttf);
  font-family : "FontAwesome5_Regular" ;
  font-weight : 400 ; /* Regular weight */
  font-style : normal;
}

@font-face {
  src : url (path/to/fonts/FontAwesome5_Solid.ttf);
  font-family : "FontAwesome5_Solid" ;
  font-weight : 900 ; /* Bold weight for solid */
  font-style : normal;
}

@font-face {
  src : url (path/to/fonts/MaterialIcons.ttf);
  font-family : "MaterialIcons" ;
}

@font-face {
  src : url (path/to/fonts/Feather.ttf);
  font-family : "Feather" ;
}

@font-face {
  src : url (path/to/fonts/MaterialCommunityIcons.ttf);
  font-family : "MaterialCommunityIcons" ;
}

/* TODO: Add other icons fonts here */

การตั้งค่าเว็บ

หากต้องการรวมไลบรารีเข้ากับโครงการเว็บของคุณโดยใช้ WebPack ให้ทำตามขั้นตอนเหล่านี้:

ในไฟล์การกำหนดค่า webpack ของคุณเพิ่มส่วนเพื่อจัดการไฟล์ TTF โดยใช้ url-loader หรือ file-loader :
```
 {
  test : / .ttf$ / ,
  loader : "url-loader" , // or directly file-loader
  include : path . resolve ( __dirname , "node_modules/react-native-vector-icons" ) ,
}
```

ในจุดเข้า JavaScript ของคุณใช้ไฟล์ตัวอักษรและฉีดแท็กสไตล์ที่จำเป็น:

  // Use the prebuilt version of RNVI located in the dist folder
  import Icon from 'react-native-vector-icons/dist/FontAwesome' ;

  // Generate the required CSS
  import iconFont from 'react-native-vector-icons/Fonts/FontAwesome.ttf' ;
  const iconFontStyles = `@font-face {
    src: url( ${ iconFont } );
    font-family: FontAwesome;
  }` ;

  // Create a stylesheet
  const style = document . createElement ( 'style' ) ;
  style . type = 'text/css' ;

  // Append the iconFontStyles to the stylesheet
  if ( style . styleSheet ) {
    style . styleSheet . cssText = iconFontStyles ;
  } else {
    style . appendChild ( document . createTextNode ( iconFontStyles ) ) ;
  }

  // Inject the stylesheet into the document head
  document . head . appendChild ( style ) ;

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

การอัพเกรด

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

ส่วนประกอบ `Icon`

คุณสามารถใช้หนึ่งในไอคอนที่รวมอยู่ด้านบนหรือม้วนฟอนต์ที่กำหนดเองของคุณเอง

 import Icon from 'react-native-vector-icons/FontAwesome' ;
const myIcon = < Icon name = "rocket" size = { 30 } color = "#900" / > ;

คุณสมบัติ

คุณสมบัติข้อความใด ๆ และต่อไปนี้:

ข้อต่อ	คำอธิบาย	ค่าเริ่มต้น
`size`	ขนาดของไอคอนสามารถส่งผ่านเป็น `fontSize` ในวัตถุสไตล์	`12`
`name`	ไอคอนใดที่จะแสดงดูแอพ Icon Explorer หรือลิงก์หนึ่งลิงก์ด้านบน	ไม่มี
`color`	สีของไอคอน	ที่สืบทอดมา

วิธีการคงที่

ข้อต่อ	คำอธิบาย
`getFontFamily`	ส่งคืนตระกูลตัวอักษรที่ใช้ในการดึงไอคอนเป็นข้อความ การใช้งาน: `const fontFamily = Icon.getFontFamily()`
`getImageSource`	ส่งคืนสัญญาที่แก้ไขแหล่งที่มาของไอคอนบิตแมปเวอร์ชันสำหรับใช้กับ `Image` Component และคณะ การใช้งาน: `const source = await Icon.getImageSource(name, size, color)`
`getImageSourceSync`	เช่นเดียวกับ `getImageSource` แต่ซิงโครนัส การใช้งาน: `const source = Icon.getImageSourceSync(name, size, color)`
`getRawGlyphMap`	ส่งคืนแผนที่สัญลักษณ์ดิบของชุดไอคอน การใช้งาน: `const glyphMap = Icon.getRawGlyphMap()`
`hasIcon`	ตรวจสอบว่าชื่อนั้นใช้ได้ในชุดไอคอนปัจจุบันหรือไม่ การใช้งาน: `const isNameValid = Icon.hasIcon(name)`

การจัดแต่งทรงผม

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

backgroundColor
borderWidth
borderColor
borderRadius
padding
margin
color
fontSize

หมายเหตุ: ในปัจจุบัน Text Android ไม่รองรับสไตล์ border* เพื่อหลีกเลี่ยงสิ่งนี้เพียงแค่ห่อ Icon ของคุณด้วย View

โดยการรวมสิ่งเหล่านี้บางอย่างคุณสามารถสร้างตัวอย่างเช่น:

`Icon.Button` Component

องค์ประกอบความสะดวกสบายสำหรับการสร้างปุ่มด้วยไอคอนทางด้านซ้าย

 import Icon from 'react-native-vector-icons/FontAwesome' ;
const myButton = (
  < Icon . Button
    name = "facebook"
    backgroundColor = "#3b5998"
    onPress = { this . loginWithFacebook }
  >
    Login with Facebook
  < / Icon . Button >
) ;

const customTextButton = (
  < Icon . Button name = "facebook" backgroundColor = "#3b5998" >
    < Text style = { { fontFamily : 'Arial' , fontSize : 15 } } >
      Login with Facebook
    < / Text >
  < / Icon . Button >
) ;

คุณสมบัติ

Text ใด ๆ TouchableHighlight หรือ TouchableWithoutFeedback นอกเหนือจากสิ่งเหล่านี้:

ข้อต่อ	คำอธิบาย	ค่าเริ่มต้น
`color`	สีข้อความและไอคอนใช้ `iconStyle` หรือทำรังเป็นส่วนประกอบ `Text` หากคุณต้องการสีที่แตกต่างกัน	`white`
`size`	ขนาดไอคอน	`20`
`iconStyle`	สไตล์ที่ใช้กับไอคอนเท่านั้นเหมาะสำหรับการตั้งค่าระยะขอบหรือสีที่แตกต่างกัน หมายเหตุ: ใช้ `iconStyle` สำหรับอัตรากำไรขั้นต้นหรือคาดว่าพฤติกรรมที่ไม่แน่นอน	`{marginRight: 10}`
`backgroundColor`	สีพื้นหลังของปุ่ม	`#007AFF`
`borderRadius`	รัศมีเส้นขอบของปุ่มตั้งค่าเป็น `0` เพื่อปิดการใช้งาน	`5`
`onPress`	ฟังก์ชั่นที่เรียกว่าเมื่อกดปุ่ม	ไม่มี

การใช้งานเป็นอิมเมจภาพ/แหล่งข้อมูล PNG

วิธีที่สะดวกในการเสียบเข้ากับส่วนประกอบอื่น ๆ ที่ขึ้นอยู่กับภาพบิตแมปแทนที่จะเป็นไอคอนเวกเตอร์ที่ปรับขนาดได้ ใช้ name อาร์กิวเมนต์ size และ color ตามที่อธิบายไว้ข้างต้น

 Icon . getImageSource ( 'user' , 20 , 'red' ) . then ( source =>
  this . setState ( { userIcon : source } )
) ;

อีกทางเลือกหนึ่งคุณอาจใช้ไอคอนวิธีการแบบซิงโครนัส Icon.getImageSourceSync เพื่อหลีกเลี่ยงความผิดพลาดในการแสดงผล โปรดทราบว่าวิธีนี้เป็นการปิดกั้นและอาจได้รับบทลงโทษประสิทธิภาพ การโทรที่ตามมาจะใช้แคชอย่างไรก็ตาม

ฟอนต์หลายสไตล์

ฟอนต์บางตัวใช้หลายรูปแบบตัวอย่างเช่น Fontawesome 5 ซึ่งได้รับการสนับสนุนจากห้องสมุดนี้ การใช้งานค่อนข้างเหมือนกับองค์ประกอบ Icon มาตรฐาน:

 import Icon from 'react-native-vector-icons/FontAwesome5' ;

const myIcon1 = < Icon name = "comments" size = { 30 } color = "#900" / > ; // Defaults to regular
const myIcon2 = < Icon name = "comments" size = { 30 } color = "#900" solid / > ;
const myIcon3 = < Icon name = "comments" size = { 30 } color = "#900" light / > ; // Only in FA5 Pro

วิธีการคงที่

วิธีการคงที่ทั้งหมดจาก Icon ได้รับการสนับสนุนโดยแบบอักษรหลายสไตล์

ข้อต่อ	คำอธิบาย
`getFontFamily`	ส่งคืนตระกูลตัวอักษรที่ใช้ในการดึงไอคอนเป็นข้อความ การใช้งาน: `const fontFamily = Icon.getFontFamily(style)`
`getImageSource`	ส่งคืนสัญญาที่แก้ไขแหล่งที่มาของไอคอนบิตแมปเวอร์ชันสำหรับใช้กับ `Image` Component และคณะ การใช้งาน: `const source = await Icon.getImageSource(name, size, color)`
`getImageSourceSync`	เช่นเดียวกับ `getImageSource` แต่ซิงโครนัส การใช้งาน: `const source = Icon.getImageSourceSync(name, size, color)`
`getRawGlyphMap`	ส่งคืนแผนที่สัญลักษณ์ดิบของชุดไอคอน การใช้งาน: `const glyphMap = Icon.getRawGlyphMap(style)`
`hasIcon`	ตรวจสอบว่าชื่อนั้นใช้ได้ในชุดไอคอนปัจจุบันหรือไม่ การใช้งาน: `const isNameValid = Icon.hasIcon(name, style)`
`getStyledIconSet`	ใช้สิ่งนี้เพื่อรับส่วนประกอบ `Icon` สำหรับสไตล์เดียว การใช้งาน `const StyledIcon = Icon.getStyledIconSet(style)`

หากไม่มีการโต้แย้งสไตล์ (หรือถ้าไม่ถูกต้อง) วิธีการจะเริ่มต้นเป็นทางเลือกล่วงหน้าที่กำหนดไว้ล่วงหน้า

ส่วนประกอบ

Icon.Button รองรับการใช้งานเป็นเหมือน Icon :

 import Icon from 'react-native-vector-icons/FontAwesome5' ;
const myButton = (
  < Icon . Button name = "facebook" onPress = { this . loginWithFacebook } solid >
    Login with Facebook
  < / Icon . Button >
) ;

แบบอักษรที่กำหนดเอง

`createIconSet(glyphMap, fontFamily[, fontFile])`

ส่งคืนฟอนต์ที่กำหนดเองของคุณเองตาม glyphMap โดยที่คีย์คือชื่อไอคอนและค่าเป็นอักขระ UTF-8 หรือรหัสอักขระ fontFamily เป็นชื่อของตัวอักษร ไม่ใช่ ชื่อไฟล์ เปิดตัวอักษรใน Font Book.app หรือคล้ายกันเพื่อเรียนรู้ชื่อ เลือกผ่านอาร์กิวเมนต์ fontFile ที่สามสำหรับการสนับสนุน Android ควรเป็นชื่อไฟล์ตัวอักษรที่กำหนดเอง

 import { createIconSet } from 'react-native-vector-icons' ;
const glyphMap = { 'icon-name' : 1234 , test : '∆' } ;
const Icon = createIconSet ( glyphMap , 'FontName' , 'font-name.ttf' ) ;

`createIconSetFromFontello(config[, fontFamily[, fontFile]])`

วิธีการสะดวกสบายในการสร้างแบบอักษรที่กำหนดเองตามไฟล์กำหนดค่า Fontello อย่าลืมนำเข้าฟอนต์ตามที่อธิบายไว้ข้างต้นและวาง config.json ที่ไหนสักแห่งที่สะดวกในโครงการของคุณ

 import { createIconSetFromFontello } from 'react-native-vector-icons' ;
import fontelloConfig from './config.json' ;
const Icon = createIconSetFromFontello ( fontelloConfig ) ;

`createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])`

 import { createIconSetFromIcoMoon } from 'react-native-vector-icons' ;
import icoMoonConfig from './selection.json' ;
const Icon = createIconSetFromIcoMoon (
  icoMoonConfig ,
  'LineAwesome' ,
  'line-awesome.ttf'
) ;

ตรวจสอบให้แน่ใจว่าคุณใช้ตัวเลือก การดาวน์โหลด ใน iComoon และใช้ไฟล์ .json ที่รวมอยู่ใน .zip ที่คุณดาวน์โหลด คุณจะต้องนำเข้าไฟล์ FONT .ttf ลงในโครงการของคุณตามคำแนะนำข้างต้น

`createMultiStyleIconSet(styles [, options])`

 import { createMultiStyleIconSet } from 'react-native-vector-icons' ;

/*
 * This is just example code, you are free to
 * design your glyphmap and styles to your liking
 */

import glyphmap from './glyphmap.json' ;
/*
 * glyphmap = {
 *   "style1": [
 *     "hello",
 *     "world"
 *   ],
 *   "style2": [
 *     "foo",
 *     "bar"
 *   ]
 * }
 */

const glyphKeys = Object . keys ( glyphmap ) ; /* ["style1", "style2"] */
const options = {
  defaultStyle : 'style1' ,
  glyphValidator : ( name , style ) => glyphKeys . indexOf ( name ) !== - 1 ,
  fallbackFamily : ( name ) => {
    for ( let i = 0 ; i < glyphKeys . length ; i ++ ) {
      const style = glyphKeys [ i ] ;
      if ( glyphmap [ style ] . indexOf ( name ) !== - 1 ) {
        return style ;
      }
    }

    /* Always return some family */
    return glyphKeys [ 0 ] ;
  }
} ;

/*
 * The styles object consits of keys, which will be
 * used as the styles later, and objects which are
 * used as style objects for the font. The style
 * should have unique characteristics for each font
 * in order to ensure that the right one will be
 * chosen. FontAwesome 5 uses font weight since
 * 5.7.0 in order to diffirentiate the styles but
 * other properties (like fontFamily) can be used.
 * It's just a standard RN style object.
 */
const styles = {
  style1 : {
    fontWeight : '700'
  } ,
  style2 : {
    fontWeight : '100'
  }
} ;

const Icon = createMultiStyleIconSet ( styles , options ) ;

/* Uses default style (style1) */
< Icon name = { 'hello' } / >
< Icon name = { 'world' } style1 / >
/* Default style is style1 but this will fall back to style2 */
< Icon name = { 'foo' } / >
/* This will also fall back to style2 */
< Icon name = { 'foo' } style1 / >
/* Regular use of style2 */
< Icon name = { 'bar' } style2 / >

ตัวเลือก	คำอธิบาย	ค่าเริ่มต้น
DefaultStyle	ชื่อของสไตล์ที่จะใช้หากไม่มีสไตล์ที่จัดมาในระหว่างการแสดงผล	`Object.keys(styles)[0]`
Fallbackfamily	ฟังก์ชั่นสำหรับการเลือกครอบครัวหากไม่มีสัญลักษณ์ ฟังก์ชั่นควรยอมรับ `name` ของ Glyph เป็นพารามิเตอร์ ส่งคืนชื่อถ้าครอบครัว	`(name) => Object.keys(styles)[0]`
Glyphvalidator	ฟังก์ชั่นสำหรับการตรวจสอบว่า Glyph มีให้สำหรับสไตล์ที่เลือก มันมี `name` และ `style` เป็นพารามิเตอร์ในลำดับนั้น ส่งคืน `true` ถ้าสัญลักษณ์ที่ถูกต้องหรือ `false` ถ้าไม่ใช่	`(name, style) => true`

iOS

คุณต้องทำการอ้างอิง .ttf ของคุณด้วยตนเองในโฟลเดอร์ Xcodeproj Resources ของคุณและใน Info.plist

ความเคลื่อนไหว

React Native มาพร้อมกับห้องสมุดแอนิเมชั่นที่น่าทึ่งชื่อ Animated หากต้องการใช้กับไอคอนเพียงสร้างองค์ประกอบภาพเคลื่อนไหวด้วยบรรทัดนี้: const AnimatedIcon = Animated.createAnimatedComponent(Icon) นอกจากนี้คุณยังสามารถใช้ไลบรารีแอนิเมชั่นระดับที่สูงขึ้น React-Native-Animatable

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

iconexplorer

ลองใช้โครงการ IconExplorer ในโฟลเดอร์ Examples/IconExplorer คุณสามารถค้นหาไอคอนใด ๆ ได้

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

 import Icon from 'react-native-vector-icons/Ionicons' ;

function ExampleView ( props ) {
  return < Icon name = "ios-person" size = { 30 } color = "#4F8EF7" / > ;
}

แท็บบาร์

เนื่องจาก TabBarIOS ถูกลบออกจาก Core ในความโปรดปรานของ @react-navigation/tabs ด้านล่างจึงถูกลบออกเป็นองค์ประกอบความสะดวกสบายจากไลบรารีนี้ เพียงใช้ Icon แทน แต่อย่าลืมนำเข้าและเชื่อมโยงไปยังโครงการนี้ตามที่อธิบายไว้ข้างต้นก่อน

ด้านล่างนี้เป็นตัวอย่างที่นำมาจาก react-navigation :

 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' ;
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons' ;

const Tab = createBottomTabNavigator ( ) ;

function MyTabs ( ) {
  return (
    < Tab . Navigator
      initialRouteName = "Feed"
      screenOptions = { {
        activeTintColor : '#e91e63' ,
      } }
    >
      < Tab . Screen
        name = "Feed"
        component = { Feed }
        options = { {
          tabBarLabel : 'Home' ,
          tabBarIcon : ( { color , size } ) => (
            < MaterialCommunityIcons name = "home" color = { color } size = { size } / >
          ) ,
        } }
      / >
      < Tab . Screen
        name = "Notifications"
        component = { Notifications }
        options = { {
          tabBarLabel : 'Updates' ,
          tabBarIcon : ( { color , size } ) => (
            < MaterialCommunityIcons name = "bell" color = { color } size = { size } / >
          ) ,
          tabBarBadge : 3 ,
        } }
      / >
      < Tab . Screen
        name = "Profile"
        component = { Profile }
        options = { {
          tabBarLabel : 'Profile' ,
          tabBarIcon : ( { color , size } ) => (
            < MaterialCommunityIcons name = "account" color = { color } size = { size } / >
          ) ,
        } }
      / >
    < / Tab . Navigator >
  ) ;
}

Toolbarandroid

เนื่องจาก ToolbarAndroid ถูกลบออกจาก Core จึงถูกลบออกเป็นองค์ประกอบความสะดวกสบายจากไลบรารีนี้ เพียงใช้ getImageSourceSync แทน แต่อย่าลืมนำเข้าและเชื่อมโยงไปยังโครงการนี้ตามที่อธิบายไว้ข้างต้นก่อน

 import ToolbarAndroid from '@react-native-community/toolbar-android' ;
import Icon from 'react-native-vector-icons/Ionicons' ;

const navIcon = Icon . getImageSourceSync ( 'md-arrow-back' , 24 , 'white' ) ;
const overflowIcon = Icon . getImageSourceSync ( 'md-more' , 24 , 'white' ) ;
const settingsIcon = Icon . getImageSourceSync ( 'md-settings' , 30 , 'white' ) ;
const twitterIcon = Icon . getImageSourceSync ( 'logo-twitter' , 25 , '#4099FF' ) ;

function ToolbarView ( props ) {
  return (
    < ToolbarAndroid
      title = "Home"
      titleColor = "white"
      navIcon = { navIcon }
      onIconClicked = { props . navigator . pop }
      actions = { [
        {
          title : 'Settings' ,
          icon : settingsIcon ,
          show : 'always' ,
        } ,
        {
          title : 'Follow me on Twitter' ,
          icon : twitterIcon ,
          show : 'ifRoom' ,
        } ,
      ] }
      overflowIcon = { overflowIcon }
    / >
  ) ;
}

ไอคอนแบบอินไลน์

 import { Text } from 'react-native' ;
import Icon from 'react-native-vector-icons/Ionicons' ;

function ExampleView ( props ) {
  return (
    < Text >
      Lorem < Icon name = "ios-book" color = "#4F8EF7" / > Ipsum
    < / Text >
  ) ;
}

การสร้างไอคอนของคุณเองจากไฟล์ CSS

หากคุณมีแบบอักษรไอคอนที่มีไฟล์ CSS ที่เกี่ยวข้องอยู่แล้วคุณสามารถสร้างไอคอนที่ตั้งค่าได้อย่างง่ายดายด้วยสคริปต์ generate-icon

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

 ./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon > Components/MyIcon.js

ตัวเลือก

ธงใด ๆ ที่ไม่ได้อยู่ในรายการด้านล่างเช่น --componentName และ --fontFamily จะถูกส่งต่อไปยังเทมเพลต

`-p` , `--prefix`

คำนำหน้าตัวเลือก CSS [ค่าเริ่มต้น: ".icon-"]

`-t` , `--template`

เทมเพลตในรูปแบบสตริง JS เทมเพลต [ค่าเริ่มต้น: "./template/iconset.tpl"]

สำหรับเทมเพลตเริ่มต้นโปรดระบุ --componentName และ --fontFamily

`-o` , `--output`

บันทึกเอาต์พุตไปยังไฟล์ค่าเริ่มต้นเป็น stdout

การเปลี่ยนแปลง

การแก้ไขปัญหา

ไอคอนปรากฏเป็นกล่องไขว้กันบน Android

ตรวจสอบให้แน่ใจว่าคุณได้คัดลอกแบบอักษรไปยัง android/app/src/main/assets/fonts
ลบโฟลเดอร์สร้างด้วย rm -rf android/app/build
คอมไพล์โครงการใหม่

หน้าจอสีแดงที่มีข้อผิดพลาด "ครอบครัวตัวอักษรที่ไม่รู้จัก" บน iOS

ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มการอ้างอิง .ttf ของคุณด้วยตนเองในโฟลเดอร์ XcodeProj Resources ของคุณ
ตรวจสอบว่าตัวอักษรที่คุณพยายามใช้จะปรากฏใน Info.plist หากคุณเพิ่มโฟลเดอร์ทั้งหมดและเป็นสีน้ำเงินคุณต้องเพิ่มลงในเส้นทาง
ตรวจสอบว่าตัวอักษรถูกคัดลอกใน แหล่งข้อมูลสำเนา ใน ขั้นตอนการสร้าง
ลบโฟลเดอร์สร้างด้วย rm -rf ios/build
คอมไพล์โครงการใหม่

การสร้าง Android ล้มเหลวบน Windows โดยไม่มีเหตุผลที่ดี

ทั้งลำดับชั้นของไฟล์ NPM และ Android มักจะลึกและยิ่งแย่ลงเมื่อคุณรวมเข้าด้วยกัน เนื่องจากระบบไฟล์ Windows มีความยาวสูงสุดที่อยู่ชื่อไฟล์ยาวจะส่งผลให้เกิดข้อผิดพลาดมากมายรวมถึง Execution failed for task ':react-native-vector-icons:processReleaseResources' ดังนั้นพยายามรักษาเส้นทางไปยังโฟลเดอร์โครงการของคุณให้สั้นที่สุด

ไอคอนผิดจะแสดงหลังจากอัปเกรดแพ็คเกจนี้

คุณอาจไม่ได้อัปเดตไฟล์ฟอนต์ที่เชื่อมโยงกับโครงการดั้งเดิมของคุณหลังจากการอัพเกรด อย่างไรก็ตามสิ่งนี้ใช้กับเป้าหมาย Android เท่านั้นเนื่องจาก iOS รวมตัวอักษรเมื่อสร้างแอพ (ลองทำความสะอาดบิลด์ของคุณจาก Xcode หากมีปัญหาอยู่) บน Android คุณสามารถเชื่อมโยงโครงการหรือคุณอัปเดตแบบอักษรด้วยตนเอง เพื่อให้พวกเขาซิงค์โดยอัตโนมัติใช้วิธีการ Gradle

ไอคอนบางอย่างหายไปหลังจากอัปเกรดแพ็คเกจนี้

บางครั้งผู้ขายตัดสินใจที่จะลบไอคอนบางส่วนออกจากรุ่นใหม่กว่านี้ไม่มีส่วนเกี่ยวข้องกับแพ็คเกจนี้ หากคุณขึ้นอยู่กับแบบอักษรรุ่นเก่าคุณสามารถเพิ่มเป็นแบบอักษรที่กำหนดเอง

ไม่สามารถแก้ไขโมดูล @expo/vector-icons/xxxfont

คุณอาจพยายามใช้ @expo/vector-icons และ react-native-vector-icons ในเวลาเดียวกัน แพ็คเกจ Expo นามแฝงอันนี้และจะมีความสำคัญ ใช้ห้องสมุดเหล่านี้เพียงแห่งเดียวในโครงการของคุณ

เว็บแพ็คบ่นเกี่ยวกับไวยากรณ์ JSX ที่ไม่ได้รับการสนับสนุน

คุณจะต้องเพิ่มการสนับสนุน JSX สำหรับ react-native-vector-icons ในการกำหนดค่า transpiler ของคุณเช่น Babel

ตัวอย่างเช่นในการเพิ่ม react-native-vector-icons ไปยังรายการของโมดูลที่รองรับ JSX (หากใช้ WebPack) คุณอาจต้องเพิ่มเส้นทางสัมพัทธ์ไปยัง react-native-vector-icons ในส่วนรวมของการกำหนดค่า JSX ของคุณ

สิ่งนี้อาจมีลักษณะดังต่อไปนี้หากคุณใช้ Babel ใน WebPack:

 // Process application JS with Babel.
 // The preset includes JSX, Flow, TypeScript, and some ESnext features.
 {
   test: /.(js|mjs|jsx|ts|tsx)$/,
   include: [
     paths.appSrc,
+    // START - support for JSX in react-native-vector-icons
+    path.resolve(
+      __dirname,
+      // modify this path to be relative to you webpack config,
+      // "../node_modules/react-native-vector-icons", // <- most common
+      "../../../node_modules/react-native-vector-icons", // <- if using workspaces
+    ),
+    // END - support got react-native-vector-icons
   ],
   loader: require.resolve("babel-loader"),

ใบอนุญาต

โครงการนี้ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT

แบบอักษรที่รวมอยู่ใด ๆ เป็นลิขสิทธิ์สำหรับผู้เขียนที่เกี่ยวข้องและส่วนใหญ่อยู่ภายใต้ MIT หรือ SIL OFL

ขยาย

react native vector icons

ไอคอนเวกเตอร์ดั้งเดิมตอบสนอง

สารบัญ

การสนับสนุน

ชุดไอคอนแบบรวม

การติดตั้ง

การตั้งค่า iOS

การตั้งค่า Android

ตัวเลือก: ด้วย Gradle (แนะนำ)

ตัวเลือก: การรวมด้วยตนเอง

การบูรณาการห้องสมุดสำหรับการสนับสนุน getImageSource

การตั้งค่า macOS

การตั้งค่า Windows

การตั้งค่า React-Web

การตั้งค่าเว็บ

การอัพเกรด

ส่วนประกอบ Icon

คุณสมบัติ

วิธีการคงที่

การจัดแต่งทรงผม

Icon.Button Component

คุณสมบัติ

การใช้งานเป็นอิมเมจภาพ/แหล่งข้อมูล PNG

ฟอนต์หลายสไตล์

วิธีการคงที่

ส่วนประกอบ

แบบอักษรที่กำหนดเอง

createIconSet(glyphMap, fontFamily[, fontFile])

createIconSetFromFontello(config[, fontFamily[, fontFile]])

createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])

createMultiStyleIconSet(styles [, options])

iOS

ความเคลื่อนไหว

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

iconexplorer

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

แท็บบาร์

Toolbarandroid

ไอคอนแบบอินไลน์

การสร้างไอคอนของคุณเองจากไฟล์ CSS

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

ตัวเลือก

-p , --prefix

-t , --template

-o , --output

การเปลี่ยนแปลง

การแก้ไขปัญหา

ไอคอนปรากฏเป็นกล่องไขว้กันบน Android

หน้าจอสีแดงที่มีข้อผิดพลาด "ครอบครัวตัวอักษรที่ไม่รู้จัก" บน iOS

การสร้าง Android ล้มเหลวบน Windows โดยไม่มีเหตุผลที่ดี

ไอคอนผิดจะแสดงหลังจากอัปเกรดแพ็คเกจนี้

ไอคอนบางอย่างหายไปหลังจากอัปเกรดแพ็คเกจนี้

ไม่สามารถแก้ไขโมดูล @expo/vector-icons/xxxfont

เว็บแพ็คบ่นเกี่ยวกับไวยากรณ์ JSX ที่ไม่ได้รับการสนับสนุน

ใบอนุญาต

การบูรณาการห้องสมุดสำหรับการสนับสนุน `getImageSource`

ส่วนประกอบ `Icon`

`Icon.Button` Component

`createIconSet(glyphMap, fontFamily[, fontFile])`

`createIconSetFromFontello(config[, fontFamily[, fontFile]])`

`createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])`

`createMultiStyleIconSet(styles [, options])`

`-p` , `--prefix`

`-t` , `--template`

`-o` , `--output`