@react-native-vector-icons/common 0.0.1-alpha.20 → 0.0.1-alpha.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (162) hide show
  1. package/LICENSE +1 -2
  2. package/README.md +40 -182
  3. package/android/build.gradle +36 -2
  4. package/android/generated/java/com/reactnativevectoricons/common/NativeVectorIconsSpec.java +42 -0
  5. package/android/generated/jni/CMakeLists.txt +49 -0
  6. package/android/generated/jni/RNVectorIconsSpec-generated.cpp +38 -0
  7. package/android/generated/jni/RNVectorIconsSpec.h +31 -0
  8. package/android/generated/jni/react/renderer/components/RNVectorIconsSpec/ComponentDescriptors.cpp +22 -0
  9. package/android/generated/jni/react/renderer/components/RNVectorIconsSpec/ComponentDescriptors.h +24 -0
  10. package/android/generated/jni/react/renderer/components/RNVectorIconsSpec/EventEmitters.cpp +16 -0
  11. package/android/generated/jni/react/renderer/components/RNVectorIconsSpec/EventEmitters.h +17 -0
  12. package/android/generated/jni/react/renderer/components/RNVectorIconsSpec/Props.cpp +19 -0
  13. package/android/generated/jni/react/renderer/components/RNVectorIconsSpec/Props.h +18 -0
  14. package/android/generated/jni/react/renderer/components/RNVectorIconsSpec/RNVectorIconsSpecJSI-generated.cpp +40 -0
  15. package/android/generated/jni/react/renderer/components/RNVectorIconsSpec/RNVectorIconsSpecJSI.h +76 -0
  16. package/android/generated/jni/react/renderer/components/RNVectorIconsSpec/ShadowNodes.cpp +17 -0
  17. package/android/generated/jni/react/renderer/components/RNVectorIconsSpec/ShadowNodes.h +23 -0
  18. package/android/generated/jni/react/renderer/components/RNVectorIconsSpec/States.cpp +16 -0
  19. package/android/generated/jni/react/renderer/components/RNVectorIconsSpec/States.h +19 -0
  20. package/android/src/main/AndroidManifestNew.xml +1 -1
  21. package/android/src/main/java/com/reactnativevectoricons/common/VectorIconsModule.kt +90 -0
  22. package/android/src/main/java/com/reactnativevectoricons/common/VectorIconsPackage.kt +35 -0
  23. package/android/src/newarch/VectorIconsSpec.kt +7 -0
  24. package/android/src/oldarch/VectorIconsSpec.kt +38 -0
  25. package/ios/VectorIcons.h +13 -17
  26. package/ios/VectorIcons.mm +21 -51
  27. package/ios/generated/RNVectorIconsSpec/ComponentDescriptors.cpp +22 -0
  28. package/ios/generated/RNVectorIconsSpec/ComponentDescriptors.h +24 -0
  29. package/ios/generated/RNVectorIconsSpec/EventEmitters.cpp +16 -0
  30. package/ios/generated/RNVectorIconsSpec/EventEmitters.h +17 -0
  31. package/ios/generated/RNVectorIconsSpec/Props.cpp +19 -0
  32. package/ios/generated/RNVectorIconsSpec/Props.h +18 -0
  33. package/ios/generated/RNVectorIconsSpec/RCTComponentViewHelpers.h +18 -0
  34. package/ios/generated/RNVectorIconsSpec/RNVectorIconsSpec-generated.mm +36 -0
  35. package/ios/generated/RNVectorIconsSpec/RNVectorIconsSpec.h +58 -0
  36. package/ios/generated/RNVectorIconsSpec/ShadowNodes.cpp +17 -0
  37. package/ios/generated/RNVectorIconsSpec/ShadowNodes.h +23 -0
  38. package/ios/generated/RNVectorIconsSpec/States.cpp +16 -0
  39. package/ios/generated/RNVectorIconsSpec/States.h +19 -0
  40. package/ios/generated/RNVectorIconsSpecJSI-generated.cpp +40 -0
  41. package/ios/generated/RNVectorIconsSpecJSI.h +76 -0
  42. package/lib/commonjs/NativeVectorIcons.js.map +1 -1
  43. package/lib/commonjs/create-icon-set.js +48 -19
  44. package/lib/commonjs/create-icon-set.js.map +1 -1
  45. package/lib/commonjs/dynamicLoading/dynamic-font-loading.js +92 -0
  46. package/lib/commonjs/dynamicLoading/dynamic-font-loading.js.map +1 -0
  47. package/lib/commonjs/dynamicLoading/dynamic-font-loading.web.js +20 -0
  48. package/lib/commonjs/dynamicLoading/dynamic-font-loading.web.js.map +1 -0
  49. package/lib/commonjs/dynamicLoading/dynamic-loading-setting.js +50 -0
  50. package/lib/commonjs/dynamicLoading/dynamic-loading-setting.js.map +1 -0
  51. package/lib/commonjs/dynamicLoading/types.js +2 -0
  52. package/lib/commonjs/dynamicLoading/types.js.map +1 -0
  53. package/lib/commonjs/index.js +57 -1
  54. package/lib/commonjs/index.js.map +1 -1
  55. package/lib/commonjs/scripts/getFonts.js +1 -1
  56. package/lib/commonjs/scripts/updatePlist.js +1 -1
  57. package/lib/module/NativeVectorIcons.js +2 -0
  58. package/lib/module/NativeVectorIcons.js.map +1 -1
  59. package/lib/module/NativeVectorIcons.web.js +2 -0
  60. package/lib/module/NativeVectorIcons.web.js.map +1 -1
  61. package/lib/module/create-icon-set.js +49 -18
  62. package/lib/module/create-icon-set.js.map +1 -1
  63. package/lib/module/create-icon-source-cache.js +2 -0
  64. package/lib/module/create-icon-source-cache.js.map +1 -1
  65. package/lib/module/dynamicLoading/dynamic-font-loading.js +85 -0
  66. package/lib/module/dynamicLoading/dynamic-font-loading.js.map +1 -0
  67. package/lib/module/dynamicLoading/dynamic-font-loading.web.js +16 -0
  68. package/lib/module/dynamicLoading/dynamic-font-loading.web.js.map +1 -0
  69. package/lib/module/dynamicLoading/dynamic-loading-setting.js +41 -0
  70. package/lib/module/dynamicLoading/dynamic-loading-setting.js.map +1 -0
  71. package/lib/module/dynamicLoading/types.js +2 -0
  72. package/lib/module/dynamicLoading/types.js.map +1 -0
  73. package/lib/module/ensure-native-module-available.js +2 -0
  74. package/lib/module/ensure-native-module-available.js.map +1 -1
  75. package/lib/module/index.js +33 -1
  76. package/lib/module/index.js.map +1 -1
  77. package/lib/module/scripts/common.js +2 -0
  78. package/lib/module/scripts/common.js.map +1 -1
  79. package/lib/module/scripts/getFonts.js +3 -1
  80. package/lib/module/scripts/getFonts.js.map +1 -1
  81. package/lib/module/scripts/updatePlist.js +3 -1
  82. package/lib/module/scripts/updatePlist.js.map +1 -1
  83. package/lib/typescript/commonjs/package.json +1 -0
  84. package/lib/typescript/commonjs/src/NativeVectorIcons.d.ts +8 -0
  85. package/lib/typescript/commonjs/src/NativeVectorIcons.d.ts.map +1 -0
  86. package/lib/typescript/commonjs/src/NativeVectorIcons.web.d.ts.map +1 -0
  87. package/lib/typescript/commonjs/src/create-icon-set.d.ts +36 -0
  88. package/lib/typescript/commonjs/src/create-icon-set.d.ts.map +1 -0
  89. package/lib/typescript/commonjs/src/create-icon-source-cache.d.ts.map +1 -0
  90. package/lib/typescript/commonjs/src/dynamicLoading/dynamic-font-loading.d.ts +3 -0
  91. package/lib/typescript/commonjs/src/dynamicLoading/dynamic-font-loading.d.ts.map +1 -0
  92. package/lib/typescript/commonjs/src/dynamicLoading/dynamic-font-loading.web.d.ts +6 -0
  93. package/lib/typescript/commonjs/src/dynamicLoading/dynamic-font-loading.web.d.ts.map +1 -0
  94. package/lib/typescript/commonjs/src/dynamicLoading/dynamic-loading-setting.d.ts +41 -0
  95. package/lib/typescript/commonjs/src/dynamicLoading/dynamic-loading-setting.d.ts.map +1 -0
  96. package/lib/typescript/commonjs/src/dynamicLoading/types.d.ts +9 -0
  97. package/lib/typescript/commonjs/src/dynamicLoading/types.d.ts.map +1 -0
  98. package/lib/typescript/commonjs/src/ensure-native-module-available.d.ts.map +1 -0
  99. package/lib/typescript/commonjs/src/index.d.ts +6 -0
  100. package/lib/typescript/commonjs/src/index.d.ts.map +1 -0
  101. package/lib/typescript/commonjs/src/scripts/common.d.ts.map +1 -0
  102. package/lib/typescript/commonjs/src/scripts/getFonts.d.ts.map +1 -0
  103. package/lib/typescript/commonjs/src/scripts/updatePlist.d.ts.map +1 -0
  104. package/lib/typescript/module/package.json +1 -0
  105. package/lib/typescript/module/src/NativeVectorIcons.d.ts +8 -0
  106. package/lib/typescript/module/src/NativeVectorIcons.d.ts.map +1 -0
  107. package/lib/typescript/module/src/NativeVectorIcons.web.d.ts +3 -0
  108. package/lib/typescript/module/src/NativeVectorIcons.web.d.ts.map +1 -0
  109. package/lib/typescript/module/src/create-icon-set.d.ts +36 -0
  110. package/lib/typescript/module/src/create-icon-set.d.ts.map +1 -0
  111. package/lib/typescript/module/src/create-icon-source-cache.d.ts +21 -0
  112. package/lib/typescript/module/src/create-icon-source-cache.d.ts.map +1 -0
  113. package/lib/typescript/module/src/dynamicLoading/dynamic-font-loading.d.ts +3 -0
  114. package/lib/typescript/module/src/dynamicLoading/dynamic-font-loading.d.ts.map +1 -0
  115. package/lib/typescript/module/src/dynamicLoading/dynamic-font-loading.web.d.ts +6 -0
  116. package/lib/typescript/module/src/dynamicLoading/dynamic-font-loading.web.d.ts.map +1 -0
  117. package/lib/typescript/module/src/dynamicLoading/dynamic-loading-setting.d.ts +41 -0
  118. package/lib/typescript/module/src/dynamicLoading/dynamic-loading-setting.d.ts.map +1 -0
  119. package/lib/typescript/module/src/dynamicLoading/types.d.ts +9 -0
  120. package/lib/typescript/module/src/dynamicLoading/types.d.ts.map +1 -0
  121. package/lib/typescript/module/src/ensure-native-module-available.d.ts +2 -0
  122. package/lib/typescript/module/src/ensure-native-module-available.d.ts.map +1 -0
  123. package/lib/typescript/module/src/index.d.ts +6 -0
  124. package/lib/typescript/module/src/index.d.ts.map +1 -0
  125. package/lib/typescript/module/src/scripts/common.d.ts +2 -0
  126. package/lib/typescript/module/src/scripts/common.d.ts.map +1 -0
  127. package/lib/typescript/module/src/scripts/getFonts.d.ts +3 -0
  128. package/lib/typescript/module/src/scripts/getFonts.d.ts.map +1 -0
  129. package/lib/typescript/module/src/scripts/updatePlist.d.ts +3 -0
  130. package/lib/typescript/module/src/scripts/updatePlist.d.ts.map +1 -0
  131. package/package.json +65 -43
  132. package/react-native-vector-icons.podspec +26 -26
  133. package/src/NativeVectorIcons.ts +2 -4
  134. package/src/create-icon-set.tsx +79 -12
  135. package/src/dynamicLoading/dynamic-font-loading.ts +97 -0
  136. package/src/dynamicLoading/dynamic-font-loading.web.ts +15 -0
  137. package/src/dynamicLoading/dynamic-loading-setting.ts +77 -0
  138. package/src/dynamicLoading/types.ts +10 -0
  139. package/src/index.ts +48 -1
  140. package/src/scripts/getFonts.ts +1 -1
  141. package/android/src/main/java/com/reactnativevectoricons/common/VectorIconsModule.java +0 -121
  142. package/android/src/main/java/com/reactnativevectoricons/common/VectorIconsPackage.java +0 -45
  143. package/android/src/newarch/VectorIconsSpec.java +0 -9
  144. package/android/src/oldarch/VectorIconsSpec.java +0 -18
  145. package/lib/typescript/src/NativeVectorIcons.d.ts +0 -9
  146. package/lib/typescript/src/NativeVectorIcons.d.ts.map +0 -1
  147. package/lib/typescript/src/NativeVectorIcons.web.d.ts.map +0 -1
  148. package/lib/typescript/src/create-icon-set.d.ts +0 -26
  149. package/lib/typescript/src/create-icon-set.d.ts.map +0 -1
  150. package/lib/typescript/src/create-icon-source-cache.d.ts.map +0 -1
  151. package/lib/typescript/src/ensure-native-module-available.d.ts.map +0 -1
  152. package/lib/typescript/src/index.d.ts +0 -3
  153. package/lib/typescript/src/index.d.ts.map +0 -1
  154. package/lib/typescript/src/scripts/common.d.ts.map +0 -1
  155. package/lib/typescript/src/scripts/getFonts.d.ts.map +0 -1
  156. package/lib/typescript/src/scripts/updatePlist.d.ts.map +0 -1
  157. /package/lib/typescript/{src → commonjs/src}/NativeVectorIcons.web.d.ts +0 -0
  158. /package/lib/typescript/{src → commonjs/src}/create-icon-source-cache.d.ts +0 -0
  159. /package/lib/typescript/{src → commonjs/src}/ensure-native-module-available.d.ts +0 -0
  160. /package/lib/typescript/{src → commonjs/src}/scripts/common.d.ts +0 -0
  161. /package/lib/typescript/{src → commonjs/src}/scripts/getFonts.d.ts +0 -0
  162. /package/lib/typescript/{src → commonjs/src}/scripts/updatePlist.d.ts +0 -0
package/LICENSE CHANGED
@@ -1,7 +1,6 @@
1
- The MIT License (MIT)
1
+ MIT License
2
2
 
3
3
  Copyright (c) 2015 Joel Arvidsson
4
-
5
4
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
5
  of this software and associated documentation files (the "Software"), to deal
7
6
  in the Software without restriction, including without limitation the rights
package/README.md CHANGED
@@ -19,18 +19,14 @@ For the integration of `.svg` files natively, you can explore [`react-native-vec
19
19
  - [Sponsorship](#sponsorship)
20
20
  - [Available Icon Sets](#available-icon-sets)
21
21
  - [Installation](#installation)
22
- - [iOS Setup](#ios-setup)
23
- - [macOS Setup](#macos-setup)
24
- - [Windows Setup](#windows-setup)
25
- - [React-native-web Setup](#react-native-web-setup)
26
- - [Web Setup](#web-setup)
22
+ - [Setup](#setup)
27
23
  - [Icon Component](#icon-component)
28
24
  - [Usage as PNG Image/Source Object](#usage-as-png-imagesource-object)
29
25
  - [Multi-Style Fonts](#multi-style-fonts)
30
26
  - [Custom Fonts](#custom-fonts)
31
27
  - [Animation](#animation)
28
+ - [Dynamic icon font loading](#dynamic-icon-font-loading)
32
29
  - [Usage Examples](#usage-examples)
33
- - [Generating Your Own Icon Package](#generating-your-own-icon-package)
34
30
  - [Changelog](https://github.com/react-native-vector-icons/react-native-vector-icons/releases)
35
31
  - [License](#license)
36
32
 
@@ -52,7 +48,7 @@ RNVI comes with the following supported icons. You can [search NPM](https://www.
52
48
  - [`Foundation`](http://zurb.com/playground/foundation-icon-fonts-3) by ZURB, Inc. (v3.0 with _283_ icons)
53
49
  - [`Ionicons`](https://ionic.io/ionicons) crafted by Ionic (v7.4.0 containing _1356_ icons)
54
50
  - [`MaterialDesignIcons`](https://pictogrammers.com/library/mdi/) from MaterialDesignIcons.com (v7.4.47 including _7448_ icons)
55
- - [`Octicons`](https://primer.style/foundations/icons) designed by Github, Inc. (v19.11.0 with _331_ icons)
51
+ - [`Octicons`](https://primer.style/foundations/icons) designed by GitHub, Inc. (v19.11.0 with _331_ icons)
56
52
 
57
53
  ### No longer maintained upstream
58
54
  - [`Entypo`](http://entypo.com) by Daniel Bruce (v1.0.1 with _411_ icons)
@@ -66,7 +62,7 @@ RNVI comes with the following supported icons. You can [search NPM](https://www.
66
62
 
67
63
  ## Migration
68
64
 
69
- See [MIGRATION.md](MIGRATION.md) if you are migrating from `react-native-vector-icons`
65
+ See [MIGRATION.md](MIGRATION.md) if you are migrating from `react-native-vector-icons` to the package-per-icon-set approach.
70
66
 
71
67
  ## Installation
72
68
 
@@ -74,12 +70,12 @@ See [MIGRATION.md](MIGRATION.md) if you are migrating from `react-native-vector-
74
70
  ```sh
75
71
  npm install --save @react-native-vector-icons/common
76
72
  ```
77
- 1. Install the packages for the icons you want use
73
+ 2. Install the packages for the icons you want use
78
74
  ```sh
79
75
  npm install --save @react-native-vector-icons/fontawesome6 @react-native-vector-icons/evilicons
80
76
  ```
81
- 1. Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions below.
82
- 1. If you are using one of the following fonts refer to their guides for further instructions
77
+ 3. Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions below.
78
+ 4. If you are using one of the following fonts refer to their guides for further instructions
83
79
  * [FontAwesome 6](packages/fontawesome6/README.md)
84
80
  * [FontAwesome 6 Pro](packages/fontawesome6-pro/README.md)
85
81
  * [FontAwesome 5](packages/fontawesome5/README.md)
@@ -87,169 +83,9 @@ See [MIGRATION.md](MIGRATION.md) if you are migrating from `react-native-vector-
87
83
  * [Fontello](packages/fontello/README.md)
88
84
  * [Icomoon](packages/icomoon/README.md)
89
85
 
90
- ### Android
91
-
92
- Nothing else needed.
93
-
94
- ### iOS
95
-
96
- To use the bundled icons on iOS, follow these steps:
97
-
98
- 1. Edit `Info.plist` and add a property called **Fonts provided by application** (or **UIAppFonts** if Xcode autocomplete is not working):
99
- <details>
100
- <summary>List of all available fonts to copy & paste in Info.plist</summary>
101
- ```xml
102
- <key>UIAppFonts</key>
103
- <array>
104
- <string>AntDesign.ttf</string>
105
- <string>Entypo.ttf</string>
106
- <string>EvilIcons.ttf</string>
107
- <string>Feather.ttf</string>
108
- <string>FontAwesome.ttf</string>
109
- <string>FontAwesome5_Brands.ttf</string>
110
- <string>FontAwesome5_Regular.ttf</string>
111
- <string>FontAwesome5_Solid.ttf</string>
112
- <string>FontAwesome6_Brands.ttf</string>
113
- <string>FontAwesome6_Regular.ttf</string>
114
- <string>FontAwesome6_Solid.ttf</string>
115
- <string>Fontisto.ttf</string>
116
- <string>Foundation.ttf</string>
117
- <string>Ionicons.ttf</string>
118
- <string>MaterialDesignIcons.ttf</string>
119
- <string>MaterialIcons.ttf</string>
120
- <string>Octicons.ttf</string>
121
- <string>SimpleLineIcons.ttf</string>
122
- <string>Zocial.ttf</string>
123
- </array>
124
- ```
125
- </details>
126
-
127
- Alternatively you can use the included script to update it for you.
128
- ```sh
129
- npm run rnvi-update-plist packages.json ios/AppName/Info.plist
130
- ```
131
-
132
- 1. Update your pods
133
- ```sh
134
- cd ios && pod update
135
- ```
136
-
137
- ### macOS
138
-
139
- This needs more work, see details in #1624
140
-
141
- ### Windows
142
-
143
- TBA: It should just work???
144
-
145
- ### React-native-web Setup
146
-
147
- To port a react-native mobile app to web using `react-native-web` you just need to ensure the fonts are known on the web-app side.
148
-
149
- You will need add the font-family for each font you use to your css
150
-
151
- You can debug missing font-families by looking in the Developer console in your web browser when debugging your web app.
152
-
153
- NOTE: if you're using webpack or similar you *may* need to configure webpack to handle loading of ttf fonts, using url-loader or file-loader. See [Web Setup](#web-setup) for more details.
154
-
155
- In your `App.css` or similar add the font-family specifications:
156
-
157
- ```css
158
- @font-face {
159
- src: url(path/to/fonts/Ionicons.ttf);
160
- font-family: "Ionicons";
161
- }
162
-
163
- @font-face {
164
- src: url(path/to/fonts/FontAwesome.ttf);
165
- font-family: "FontAwesome";
166
- }
167
-
168
- @font-face {
169
- src: url(path/to/fonts/FontAwesome5_Brands.ttf);
170
- font-family: "FontAwesome5_Brands";
171
- font-weight: 400; /* Regular weight */
172
- font-style: normal;
173
- }
174
-
175
- @font-face {
176
- src: url(path/to/fonts/FontAwesome5_Regular.ttf);
177
- font-family: "FontAwesome5_Regular";
178
- font-weight: 400; /* Regular weight */
179
- font-style: normal;
180
- }
181
-
182
- @font-face {
183
- src: url(path/to/fonts/FontAwesome5_Solid.ttf);
184
- font-family: "FontAwesome5_Solid";
185
- font-weight: 900; /* Bold weight for solid */
186
- font-style: normal;
187
- }
188
-
189
- @font-face {
190
- src: url(path/to/fonts/MaterialIcons.ttf);
191
- font-family: "MaterialIcons";
192
- }
193
-
194
- @font-face {
195
- src: url(path/to/fonts/Feather.ttf);
196
- font-family: "Feather";
197
- }
198
-
199
- @font-face {
200
- src: url(path/to/fonts/MaterialCommunityIcons.ttf);
201
- font-family: "MaterialCommunityIcons";
202
- }
203
-
204
- /* TODO: Add other icons fonts here */
205
- ```
206
-
207
- ### Web Setup
208
-
209
- FIXME: Can we improve on this?
210
-
211
- To integrate the library with your web project using [webpack](https://webpack.js.org/), follow these steps:
212
-
213
- 1. In your webpack configuration file, add a section to handle TTF files using `url-loader` or `file-loader`:
214
-
215
- ```js
216
- {
217
- test: /\.ttf$/,
218
- loader: "url-loader", // or directly file-loader
219
- include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
220
- }
221
- ```
222
-
223
- 2. In your JavaScript entry point, consume the font files and inject the necessary style tag:
86
+ ## Setup
224
87
 
225
- ```js
226
- import Icon from '@react-native-vector-icons/fontAwesome';
227
-
228
- // Generate the required CSS
229
- import iconFont from '@react-native-vector-icons/fontawesome/fonts/FontAwesome.ttf';
230
- const iconFontStyles = `@font-face {
231
- src: url(${iconFont});
232
- font-family: FontAwesome;
233
- }`;
234
-
235
- // Create a stylesheet
236
- const style = document.createElement('style');
237
- style.type = 'text/css';
238
-
239
- // Append the iconFontStyles to the stylesheet
240
- if (style.styleSheet) {
241
- style.styleSheet.cssText = iconFontStyles;
242
- } else {
243
- style.appendChild(document.createTextNode(iconFontStyles));
244
- }
245
-
246
- // Inject the stylesheet into the document head
247
- document.head.appendChild(style);
248
- ```
249
-
250
- By following these steps, you will seamlessly integrate the vector icons
251
- library into your web project using [webpack](https://webpack.js.org/),
252
- enabling you to effortlessly use the icons within your web application.
88
+ Please refer to the guide for [Expo](./docs/SETUP-EXPO.md), [React Native](./docs/SETUP-REACT-NATIVE.md) or [Web](./docs/SETUP-WEB.md) for further instructions.
253
89
 
254
90
  ## `Icon` Component
255
91
 
@@ -260,9 +96,9 @@ import Icon from '@react-native-vector-icons/fontawesome';
260
96
  const myIcon = <Icon name="rocket" size={30} color="#900" />;
261
97
  ```
262
98
 
263
- ### Properties
99
+ ### Props
264
100
 
265
- Any [Text property](https://reactnative.dev/docs/text.html) and the following:
101
+ Any [Text props](https://reactnative.dev/docs/text.html#props) and the following:
266
102
 
267
103
  | Prop | Description | Default |
268
104
  | ----------- | ----------------------------------------------------------------------- | ----------- |
@@ -334,20 +170,25 @@ All static methods from `Icon` is supported by multi-styled fonts.
334
170
 
335
171
  The best approach is to use our icon generator to create your own icon package.
336
172
 
337
- See [CREATE_FONT_PACKAGE.md] to learn how to create your own font packages.
173
+ See [CREATE_FONT_PACKAGE.md](./docs/CREATE_FONT_PACKAGE.md) to learn how to create your own font packages.
338
174
 
339
- You can also use `createIconSet(glyphMap, fontFamily[, fontFile])` directly in your project. This
175
+ You can also use `createIconSet()` directly in your project. This
340
176
  returns your own custom font based on the `glyphMap` where the key is the icon
341
177
  name and the value is either a UTF-8 character or it's character code.
342
- `fontFamily` is the name of the postscript font **NOT** the filename. Open the font in
343
- Font Book.app or similar to learn the name. Optionally pass the third
344
- `fontFile` argument for android support, it should be the custom font file
345
- name.
178
+ `postScriptName` is the name of the postscript font. Open the font in https://fontdrop.info/,
179
+ Font Book.app or similar to learn the name. Also pass the `fontFileName` argument for Android support.
346
180
 
347
181
  ```js
348
182
  import { createIconSet } from '@react-native-vector-icons/common';
349
183
  const glyphMap = { 'icon-name': 1234, test: '∆' };
350
- const Icon = createIconSet(glyphMap, 'FontName', 'font-name.ttf');
184
+
185
+ // use createIconSet() with object parameter
186
+ // or use positional parameters for compatibility with version <= 10: `createIconSet(glyphMap, fontFamily[, fontFile])`
187
+ const Icon = createIconSet(glyphMap, {
188
+ postScriptName: 'FontName',
189
+ fontFileName: 'font-name.ttf',
190
+ fontSource: require('../fonts/font-name.ttf') // optional, for dynamic loading. Can also be a local file uri.
191
+ })
351
192
  ```
352
193
 
353
194
  You should place the font ttf file into `rnvi-fonts`. You can customise this location by adding the following snippet to your package.json
@@ -368,6 +209,23 @@ Animated.createAnimatedComponent(Icon)`. You can also use the higher level
368
209
  animation library
369
210
  [react-native-animatable](https://github.com/oblador/react-native-animatable).
370
211
 
212
+ ## Dynamic icon font loading
213
+
214
+ > At the moment, dynamic loading is supported on native platforms (not on web) only if you use Expo. In the future, it should become available for all React Native projects via React Native core.
215
+
216
+ Fonts can be available in an app statically (since build time) or loaded dynamically at runtime. The latter can be useful e.g. for apps that use over-the-air updates and want to load new fonts with an update, or when you need to use a font from a remote location.
217
+
218
+ Dynamic loading in react-native-vector-icons is currently limited to those fonts that are bundled within the provided packages: it doesn't support Pro fonts (such as FontAwesome 5 Pro). However, loading of custom fonts is not difficult to implement: see any of the free font packages for reference.
219
+
220
+ By default, dynamic loading is enabled if supported by the version of Expo that you're using. It doesn't change the way you work with the package: If rendering an icon requires a font that is not known to the app, it will be loaded automatically and icon will render as expected.
221
+
222
+ `@react-native-vector-icons/common` exports several functions which you can use to control dynamic loading:
223
+
224
+ - `isDynamicLoadingEnabled`: Returns whether dynamic loading is enabled.
225
+ - `isDynamicLoadingSupported`: Returns whether dynamic loading is supported by your runtime (checks that necessary Expo features are present).
226
+ - `setDynamicLoadingEnabled`: Enables or disables dynamic loading.
227
+ - `setDynamicLoadingErrorCallback`: Sets a callback that is called (in the unlikely case) when an error occurs during dynamic loading. An example of when an error might happen is loading a misconfigured OTA update which doesn't include a necessary font file.
228
+
371
229
  ## Usage Examples
372
230
 
373
231
  ### Icon Explorer
@@ -1,4 +1,7 @@
1
1
  buildscript {
2
+ // Buildscript is evaluated before everything else so we can't use getExtOrDefault
3
+ def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["VectorIcons_kotlinVersion"]
4
+
2
5
  repositories {
3
6
  google()
4
7
  mavenCentral()
@@ -6,14 +9,22 @@ buildscript {
6
9
 
7
10
  dependencies {
8
11
  classpath "com.android.tools.build:gradle:7.2.1"
12
+ // noinspection DifferentKotlinGradleVersion
13
+ classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
9
14
  }
10
15
  }
11
16
 
17
+ def reactNativeArchitectures() {
18
+ def value = rootProject.getProperties().get("reactNativeArchitectures")
19
+ return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
20
+ }
21
+
12
22
  def isNewArchitectureEnabled() {
13
23
  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
14
24
  }
15
25
 
16
26
  apply plugin: "com.android.library"
27
+ apply plugin: "kotlin-android"
17
28
 
18
29
  if (isNewArchitectureEnabled()) {
19
30
  apply plugin: "com.facebook.react"
@@ -36,6 +47,18 @@ def supportsNamespace() {
36
47
  return (major == 7 && minor >= 3) || major >= 8
37
48
  }
38
49
 
50
+ import groovy.json.JsonSlurper
51
+
52
+ def generatedCompat() {
53
+ def rnviProject = rootProject.allprojects.find { it.name == 'react-native-vector-icons_common' }
54
+ if (rnviProject == null) return false
55
+
56
+ def reactNativeManifest = file("${rnviProject.projectDir}/../../../react-native/package.json")
57
+ def reactNativeVersion = new JsonSlurper().parseText(reactNativeManifest.text).version as String
58
+
59
+ reactNativeVersion.matches('(0.71.*|0.72.*|0.73.*)')
60
+ }
61
+
39
62
  android {
40
63
  if (supportsNamespace()) {
41
64
  namespace "com.reactnativevectoricons.common"
@@ -80,9 +103,18 @@ android {
80
103
  if (isNewArchitectureEnabled()) {
81
104
  java.srcDirs += [
82
105
  "src/newarch",
83
- // This is needed to build Kotlin project with NewArch enabled
84
- "${project.buildDir}/generated/source/codegen/java"
85
106
  ]
107
+ if (!generatedCompat()) {
108
+ println("Adding generated directories")
109
+ println("Adding generated directories")
110
+ println("Adding generated directories")
111
+ // NOTE: create-react-native-library has these here but it breaks <= 0.73
112
+ java.srcDirs += [
113
+ // Codegen specs
114
+ "generated/java",
115
+ "generated/jni"
116
+ ]
117
+ }
86
118
  } else {
87
119
  java.srcDirs += ["src/oldarch"]
88
120
  }
@@ -95,12 +127,14 @@ repositories {
95
127
  google()
96
128
  }
97
129
 
130
+ def kotlin_version = getExtOrDefault("kotlinVersion")
98
131
 
99
132
  dependencies {
100
133
  // For < 0.71, this will be from the local maven repo
101
134
  // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
102
135
  //noinspection GradleDynamicVersion
103
136
  implementation "com.facebook.react:react-native:+"
137
+ implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
104
138
  }
105
139
 
106
140
  if (isNewArchitectureEnabled()) {
@@ -0,0 +1,42 @@
1
+
2
+ /**
3
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
4
+ *
5
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
6
+ * once the code is regenerated.
7
+ *
8
+ * @generated by codegen project: GenerateModuleJavaSpec.js
9
+ *
10
+ * @nolint
11
+ */
12
+
13
+ package com.reactnativevectoricons.common;
14
+
15
+ import com.facebook.proguard.annotations.DoNotStrip;
16
+ import com.facebook.react.bridge.Promise;
17
+ import com.facebook.react.bridge.ReactApplicationContext;
18
+ import com.facebook.react.bridge.ReactContextBaseJavaModule;
19
+ import com.facebook.react.bridge.ReactMethod;
20
+ import com.facebook.react.turbomodule.core.interfaces.TurboModule;
21
+ import javax.annotation.Nonnull;
22
+
23
+ public abstract class NativeVectorIconsSpec extends ReactContextBaseJavaModule implements TurboModule {
24
+ public static final String NAME = "VectorIcons";
25
+
26
+ public NativeVectorIconsSpec(ReactApplicationContext reactContext) {
27
+ super(reactContext);
28
+ }
29
+
30
+ @Override
31
+ public @Nonnull String getName() {
32
+ return NAME;
33
+ }
34
+
35
+ @ReactMethod
36
+ @DoNotStrip
37
+ public abstract void getImageForFont(String fontFamilyName, String glyph, double fontSize, double color, Promise promise);
38
+
39
+ @ReactMethod(isBlockingSynchronousMethod = true)
40
+ @DoNotStrip
41
+ public abstract String getImageForFontSync(String fontFamilyName, String glyph, double fontSize, double color);
42
+ }
@@ -0,0 +1,49 @@
1
+ # Copyright (c) Meta Platforms, Inc. and affiliates.
2
+ #
3
+ # This source code is licensed under the MIT license found in the
4
+ # LICENSE file in the root directory of this source tree.
5
+
6
+ cmake_minimum_required(VERSION 3.13)
7
+ set(CMAKE_VERBOSE_MAKEFILE on)
8
+
9
+ file(GLOB react_codegen_SRCS CONFIGURE_DEPENDS *.cpp react/renderer/components/RNVectorIconsSpec/*.cpp)
10
+
11
+ add_library(
12
+ react_codegen_RNVectorIconsSpec
13
+ SHARED
14
+ ${react_codegen_SRCS}
15
+ )
16
+
17
+ target_include_directories(react_codegen_RNVectorIconsSpec PUBLIC . react/renderer/components/RNVectorIconsSpec)
18
+
19
+ target_link_libraries(
20
+ react_codegen_RNVectorIconsSpec
21
+ fbjni
22
+ folly_runtime
23
+ glog
24
+ jsi
25
+ react_codegen_rncore
26
+ react_debug
27
+ react_nativemodule_core
28
+ react_render_componentregistry
29
+ react_render_core
30
+ react_render_debug
31
+ react_render_graphics
32
+ react_render_imagemanager
33
+ react_render_mapbuffer
34
+ react_utils
35
+ rrc_image
36
+ rrc_view
37
+ turbomodulejsijni
38
+ yoga
39
+ )
40
+
41
+ target_compile_options(
42
+ react_codegen_RNVectorIconsSpec
43
+ PRIVATE
44
+ -DLOG_TAG=\"ReactNative\"
45
+ -fexceptions
46
+ -frtti
47
+ -std=c++20
48
+ -Wall
49
+ )
@@ -0,0 +1,38 @@
1
+
2
+ /**
3
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
4
+ *
5
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
6
+ * once the code is regenerated.
7
+ *
8
+ * @generated by codegen project: GenerateModuleJniCpp.js
9
+ */
10
+
11
+ #include "RNVectorIconsSpec.h"
12
+
13
+ namespace facebook::react {
14
+
15
+ static facebook::jsi::Value __hostFunction_NativeVectorIconsSpecJSI_getImageForFont(facebook::jsi::Runtime& rt, TurboModule &turboModule, const facebook::jsi::Value* args, size_t count) {
16
+ static jmethodID cachedMethodId = nullptr;
17
+ return static_cast<JavaTurboModule &>(turboModule).invokeJavaMethod(rt, PromiseKind, "getImageForFont", "(Ljava/lang/String;Ljava/lang/String;DDLcom/facebook/react/bridge/Promise;)V", args, count, cachedMethodId);
18
+ }
19
+
20
+ static facebook::jsi::Value __hostFunction_NativeVectorIconsSpecJSI_getImageForFontSync(facebook::jsi::Runtime& rt, TurboModule &turboModule, const facebook::jsi::Value* args, size_t count) {
21
+ static jmethodID cachedMethodId = nullptr;
22
+ return static_cast<JavaTurboModule &>(turboModule).invokeJavaMethod(rt, StringKind, "getImageForFontSync", "(Ljava/lang/String;Ljava/lang/String;DD)Ljava/lang/String;", args, count, cachedMethodId);
23
+ }
24
+
25
+ NativeVectorIconsSpecJSI::NativeVectorIconsSpecJSI(const JavaTurboModule::InitParams &params)
26
+ : JavaTurboModule(params) {
27
+ methodMap_["getImageForFont"] = MethodMetadata {4, __hostFunction_NativeVectorIconsSpecJSI_getImageForFont};
28
+ methodMap_["getImageForFontSync"] = MethodMetadata {4, __hostFunction_NativeVectorIconsSpecJSI_getImageForFontSync};
29
+ }
30
+
31
+ std::shared_ptr<TurboModule> RNVectorIconsSpec_ModuleProvider(const std::string &moduleName, const JavaTurboModule::InitParams &params) {
32
+ if (moduleName == "VectorIcons") {
33
+ return std::make_shared<NativeVectorIconsSpecJSI>(params);
34
+ }
35
+ return nullptr;
36
+ }
37
+
38
+ } // namespace facebook::react
@@ -0,0 +1,31 @@
1
+
2
+ /**
3
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
4
+ *
5
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
6
+ * once the code is regenerated.
7
+ *
8
+ * @generated by codegen project: GenerateModuleJniH.js
9
+ */
10
+
11
+ #pragma once
12
+
13
+ #include <ReactCommon/JavaTurboModule.h>
14
+ #include <ReactCommon/TurboModule.h>
15
+ #include <jsi/jsi.h>
16
+
17
+ namespace facebook::react {
18
+
19
+ /**
20
+ * JNI C++ class for module 'NativeVectorIcons'
21
+ */
22
+ class JSI_EXPORT NativeVectorIconsSpecJSI : public JavaTurboModule {
23
+ public:
24
+ NativeVectorIconsSpecJSI(const JavaTurboModule::InitParams &params);
25
+ };
26
+
27
+
28
+ JSI_EXPORT
29
+ std::shared_ptr<TurboModule> RNVectorIconsSpec_ModuleProvider(const std::string &moduleName, const JavaTurboModule::InitParams &params);
30
+
31
+ } // namespace facebook::react
@@ -0,0 +1,22 @@
1
+
2
+ /**
3
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
4
+ *
5
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
6
+ * once the code is regenerated.
7
+ *
8
+ * @generated by codegen project: GenerateComponentDescriptorCpp.js
9
+ */
10
+
11
+ #include "ComponentDescriptors.h"
12
+ #include <react/renderer/core/ConcreteComponentDescriptor.h>
13
+ #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
14
+
15
+ namespace facebook::react {
16
+
17
+ void RNVectorIconsSpec_registerComponentDescriptorsFromCodegen(
18
+ std::shared_ptr<const ComponentDescriptorProviderRegistry> registry) {
19
+
20
+ }
21
+
22
+ } // namespace facebook::react
@@ -0,0 +1,24 @@
1
+
2
+ /**
3
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
4
+ *
5
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
6
+ * once the code is regenerated.
7
+ *
8
+ * @generated by codegen project: GenerateComponentDescriptorH.js
9
+ */
10
+
11
+ #pragma once
12
+
13
+ #include "ShadowNodes.h"
14
+ #include <react/renderer/core/ConcreteComponentDescriptor.h>
15
+ #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
16
+
17
+ namespace facebook::react {
18
+
19
+
20
+
21
+ void RNVectorIconsSpec_registerComponentDescriptorsFromCodegen(
22
+ std::shared_ptr<const ComponentDescriptorProviderRegistry> registry);
23
+
24
+ } // namespace facebook::react
@@ -0,0 +1,16 @@
1
+
2
+ /**
3
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
4
+ *
5
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
6
+ * once the code is regenerated.
7
+ *
8
+ * @generated by codegen project: GenerateEventEmitterCpp.js
9
+ */
10
+
11
+ #include "EventEmitters.h"
12
+
13
+
14
+ namespace facebook::react {
15
+
16
+ } // namespace facebook::react
@@ -0,0 +1,17 @@
1
+
2
+ /**
3
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
4
+ *
5
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
6
+ * once the code is regenerated.
7
+ *
8
+ * @generated by codegen project: GenerateEventEmitterH.js
9
+ */
10
+ #pragma once
11
+
12
+ #include <react/renderer/components/view/ViewEventEmitter.h>
13
+
14
+
15
+ namespace facebook::react {
16
+
17
+ } // namespace facebook::react
@@ -0,0 +1,19 @@
1
+
2
+ /**
3
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
4
+ *
5
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
6
+ * once the code is regenerated.
7
+ *
8
+ * @generated by codegen project: GeneratePropsCpp.js
9
+ */
10
+
11
+ #include "Props.h"
12
+ #include <react/renderer/core/PropsParserContext.h>
13
+ #include <react/renderer/core/propsConversions.h>
14
+
15
+ namespace facebook::react {
16
+
17
+
18
+
19
+ } // namespace facebook::react
@@ -0,0 +1,18 @@
1
+
2
+ /**
3
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
4
+ *
5
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
6
+ * once the code is regenerated.
7
+ *
8
+ * @generated by codegen project: GeneratePropsH.js
9
+ */
10
+ #pragma once
11
+
12
+
13
+
14
+ namespace facebook::react {
15
+
16
+
17
+
18
+ } // namespace facebook::react