react native vector icons
10.2.0
カスタマイズ可能なベクトルアイコンの力で、Reactネイティブアプリケーションを高めます。ボタン、ロゴ、ナビゲーションまたはタブバーの装飾に最適なこれらのアイコンは、プロジェクトにシームレスに統合されます。それらの汎用性により、拡張とスタイリングは楽になります。
.svgファイルをネイティブに統合するために、 react-native-vector-image探索できます。
ヒント
RNVIの新しいバージョンがまもなく登場します。構成セットアップはほぼゼロです。フィードバックようこそ、モノレポ支店で試してみてください
このライブラリが有益であると思う場合は、スポンサーのオプションを親切に考えてください。私たちの想定されている努力は、リポジトリの再構築をモノレポアーキテクチャに網羅しています。この移行により、アイコンセットの独立したバージョン化が強化され、パフォーマンスが向上し、バンドルサイズの削減）、コミュニティへの貢献が簡素化されます。あなたのスポンサーシップは、これらの進歩を実現する上で極めて重要な役割を果たします。
すべてのアイコンを探索します。
AntDesign （ 298アイコン）Entypo （ 411アイコンを備えたv1.0.1）EvilIcons （ 70個のアイコン付きv1.10.1）Feather （ 286個のアイコンをフィーチャーしたv4.28.0）FontAwesome （ 675個のアイコンを含むv4.7.0）FontAwesome 5 （v5.15.3 1598無料および7848 Proアイコンを提供）FontAwesome 6 Fonticons、Inc。がデザインした（v6.6.0 2016 Free and 16150 Pro Iconsをフィーチャー）Fontisto （ 615アイコンをフィーチャーしたv3.0.4）Foundation （ 283アイコンを備えたv3.0）Ionicons （ 1338個のアイコンを含むv7.1.0）MaterialIconsサンMaterialCommunityIcons （ 6596アイコンを含むv6.5.95）Octicons （ 250個のアイコンを備えたV16.3.1）Zocial by Sam Collins（ 100個のアイコン付きv1.4.0）SimpleLineIcons （ 189のアイコンでv2.5.5） npm install --save react-native-vector-iconsiOSでバンドルされたアイコンを使用するには、次のステップを実行します。
iOSディレクトリでnpx pod-install実行します
Info.plistを編集し、アプリケーションが提供するフォントと呼ばれるプロパティを追加します（またはxcodeオートコンプリートが機能していない場合はuiappfonts ）：
< 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でフォント管理をスムーズにするには、この方法を使用してください。
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 " )
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ライブラリを手動で統合するには、次の手順に従ってください。
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()
);
}このオプションのステップは、 React-Nativeアプリが自動リンクをサポートしていない場合にのみ必要であることに注意してください。それ以外の場合は、これをスキップできます。
react-native-macos経由
react-native-macosを使用してMacOSプロジェクトにライブラリをセットアップするには、次の手順に従ってください。
node_modules/react-native-vector-iconsフォルダーを参照し、XcodeのプロジェクトにFontsフォルダをドラッグします。 「ターゲットに追加」でアプリがチェックされていることを確認し、プロンプトが表示されたときに「フォルダー参照の作成」を選択します。
Info.plistを編集し、アプリケーションフォントリソースパスという名前の新しいプロパティを含めます（または、xcodeのオートコンプリートが機能していない場合、またはxcodeを使用していない場合はATSApplicationFontsPath ）。このプロパティの値をFontsに設定します。
プロジェクト/iosフォルダーの実行から：
bundle exec pod install新しいフォントを追加した後、プロジェクトを再コンパイルする必要があることに注意してください。また、Xcodeプロジェクトのビルドフェーズ内のコピーバンドルリソースセクションの下にFontsフォルダーが存在することを確認してください。
これらの手順は、 react-native-macosフレームワークを利用しながら、Vector IconsライブラリをMacOSプロジェクトに効果的に統合します。
react-native-windows経由
react-native-windowsを使用してWindowsプロジェクトにライブラリをセットアップするには、次の手順に従ってください。
トップレベルのプロジェクト（ /windows/project-name/Assets ）で、フォントファイルをコピーして貼り付けます。
Visual Studioでソリューションを開きます：
a。ソリューションのAssetsフォルダーを右クリックします。 b。 [追加]> [既存のアイテム]を選択します。 c。 /windows/project-name/assetsにコピーしたフォントを参照して選択します。 d。 [追加]をクリックします。
新しいフォントを追加した後、プロジェクトを再コンパイルする必要があることに注意してください。
これらの手順に従うことにより、VectorアイコンライブラリをWindowsプロジェクトにシームレスに統合し、 react-native-windowsフレームワークを活用します。
React-Native Mobileアプリをreact-native-web使用してWebに移植するには、Webアプリの側でフォントが既知であることを確認する必要があります。
CSSに使用する各フォントにフォントファミリーを追加する必要があります
Webアプリをデバッグするときに、Webブラウザーの開発者コンソールを見ることで、不足しているフォントファミリーをデバッグできます。
注：Webパックなどを使用している場合は、URLローダーまたはファイルローダーを使用して、TTFフォントのロードを処理するようにWebパックを構成する必要がある場合があります。詳細については、Webセットアップを参照してください。
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 */Webパックを使用してライブラリをWebプロジェクトと統合するには、次の手順に従ってください。
WebPack構成ファイルに、 url-loaderまたはfile-loaderを使用してTTFファイルを処理するセクションを追加します。
{
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 ) ;これらの手順に従うことにより、ベクトルアイコンライブラリをWebパックを使用してWebプロジェクトにシームレスに統合し、Webアプリケーション内のアイコンを簡単に使用できるようにします。
このパッケージをアップグレードするには、多くの場合、プロジェクトにリンクされたフォントファイルも更新する必要があります。自動リンクが機能する場合、これを再度実行すると、フォントが更新されます。それ以外の場合は、インストールセクションで概説されている手順に従う必要があります。
Iconコンポーネント上のバンドルされたアイコンの1つを使用するか、独自のカスタムフォントをロールすることができます。
import Icon from 'react-native-vector-icons/FontAwesome' ;
const myIcon = < Icon name = "rocket" size = { 30 } color = "#900" / > ;テキストプロパティと以下：
| 小道具 | 説明 | デフォルト |
|---|---|---|
size | アイコンのサイズは、スタイルオブジェクトのfontSizeとして渡すこともできます。 | 12 |
name | 表示するアイコンは、アイコンエクスプローラーアプリまたは上記のリンクの1つを参照してください。 | なし |
color | アイコンの色。 | 継承 |
| 小道具 | 説明 |
|---|---|
getFontFamily | 現在、テキストとしてアイコンを取得するために使用されているフォントファミリを返します。使用法： const fontFamily = Icon.getFontFamily() |
getImageSource | Image Component et al。使用法： 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コンポーネントの上に構築されているため、ほとんどのスタイルプロパティは予想どおりに機能します。
backgroundColorborderWidthborderColorborderRadiuspaddingmargincolorfontSize注：AndroidのTextでは現在、 border* Stylesをサポートしていません。これを回避するために、 Icon Viewでラップするだけです。
これらのいくつかを組み合わせることで、たとえば作成できます。
Icon.Buttonコンポーネント左側にアイコンを備えたボタンを作成するための便利なコンポーネント。
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 | ボタンが押されたときに呼び出される関数。 | なし |
これをスケーラブルなベクトルアイコンではなく、ビットマップ画像に依存する他のコンポーネントに接続する便利な方法。上記のように、引数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 ProIconからのすべての静的メソッドは、マルチスタイルのフォントによってサポートされています。
| 小道具 | 説明 |
|---|---|
getFontFamily | 現在、テキストとしてアイコンを取得するために使用されているフォントファミリを返します。使用法： const fontFamily = Icon.getFontFamily(style) |
getImageSource | Image Component et al。使用法： 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])キーがアイコン名であり、値はUTF-8文字またはその文字コードのいずれかであるglyphMapに基づいて独自のカスタムフォントを返します。 fontFamily 、ファイル名ではなくフォントの名前です。 Font Book.Appまたは同様にフォントを開き、名前を学習します。オプションで、Androidサポートの3番目のfontFile引数を渡すことは、カスタムフォントファイル名である必要があります。
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でダウンロードオプションを使用していることを確認し、ダウンロードした.zipに含まれている.jsonファイルを使用してください。また、上記の指示に従って、 .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] |
| フォールバックファミリー | グリフが利用できない場合は、家族を選択するための機能。関数は、グリフのnameをパラメーターとして受け入れる必要があります。家族の場合は名前を返します。 | (name) => Object.keys(styles)[0] |
| グリフバリデーター | 選択したスタイルでグリフが利用可能であることを検証するための機能。その順序で、パラメーターとしてnameとstyleがあります。グリフが有効であるかfalseがない場合はtrueを返します。 | (name, style) => true |
XcodeProj ResourcesフォルダーとInfo.plistで、 .ttfを手動で参照する必要があります。
React Nativeには、 Animatedと呼ばれる素晴らしいアニメーションライブラリが付属しています。アイコンで使用するには、この行でアニメーションコンポーネントを作成するだけです。constanimatedicon const AnimatedIcon = Animated.createAnimatedComponent(Icon) 。また、高レベルのアニメーションライブラリReact-Native-Animatableを使用することもできます。
IconExplorerプロジェクトをExamples/IconExplorerフォルダーでお試しください。また、アイコンを検索することもできます。
import Icon from 'react-native-vector-icons/Ionicons' ;
function ExampleView ( props ) {
return < Icon name = "ios-person" size = { 30 } color = "#4F8EF7" / > ;
} TabBarIOS @React-Navigation/Bottom-Tabsを支持してCoreから削除されたため、このライブラリから便利なコンポーネントとして削除されます。代わりに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 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ファイルを備えたアイコンフォントが既にある場合は、 generate-iconスクリプトを使用してアイコンセットを簡単に生成できます。
./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon > Components/MyIcon.js
以下にリストされていないフラグは、 --componentNameや--fontFamilyがテンプレートに渡されます。
-p 、 --prefixCSSセレクタープレフィックス[デフォルト： ".icon-"]
-t 、 --templateJSテンプレート文字列形式のテンプレート[デフォルト： "./template/iconset.tpl"]
デフォルトのテンプレートについては、 --componentNameおよび--fontFamily提供してください。
-o 、 --output出力をファイルに保存すると、デフォルトはstdoutになります
android/app/src/main/assets/fontsにコピーしたことを確認してください。rm -rf android/app/buildでビルドフォルダーを削除します。Resourcesフォルダーに.ttfの参照を手動で追加していることを確認してください。Info.plistに表示されていることを確認してください。フォルダー全体を追加して青色である場合は、パスに追加する必要があります。rm -rf ios/buildでビルドフォルダーを削除しますNPMとAndroidファイルの両方の階層は、それらを組み合わせると非常に深く、さらに悪化する傾向があります。 Windows File Systemの長さは最大であるため、長いファイル名アドレスはExecution failed for task ':react-native-vector-icons:processReleaseResources'を含む多数のエラーが発生します。したがって、プロジェクトフォルダーへのパスをできるだけ短くしておくようにしてください。
おそらく、アップグレード後にネイティブプロジェクトにリンクされたフォントファイルを更新しなかったでしょう。ただし、これはAndroidターゲットにのみ適用されます。これは、IOSがアプリを構築するときにフォントをバンドルするためです（問題が存在する場合はXcodeからビルドをクリーニングしてみてください）。 Androidでは、プロジェクトをリンクするか、フォントを手動で更新できます。それらを自動的に同期させるには、Gradleアプローチを使用します。
ベンダーは、新しいリリースからいくつかのアイコンを削除することを決定することがありますが、これはこのパッケージとは何の関係もありません。古いバージョンのフォントに依存する場合は、カスタムフォントとして追加できます。
おそらく、 @expo/vector-iconsとreact-native-vector-icons同時に使用しようとしています。 Expoパッケージはこれをエイリアスし、優先されます。プロジェクトでこれらのライブラリの1つのみを使用してください。
react-native-vector-iconsのJSXサポートをトランスピラー構成EたとえばBabelに追加する必要があります。
たとえば、JSX（Webpackを使用している場合）をサポートするモジュールのリストにreact-native-vector-icons追加するには、JSX構成のセクションにreact-native-vector-iconsに相対パスを追加する必要があります。
WebpackでBabelを使用している場合、これは次のように見える場合があります。
// 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の下にあります。
