@react-native-vector-icons/common 0.0.1-alpha.1 → 0.0.1-alpha.11
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.
- package/README.md +373 -0
- package/android/build.gradle +3 -3
- package/ios/VectorIcons.mm +83 -69
- package/lib/commonjs/NativeVectorIcons.js.map +1 -1
- package/lib/commonjs/NativeVectorIcons.web.js.map +1 -1
- package/lib/commonjs/create-icon-set.js +11 -7
- package/lib/commonjs/create-icon-set.js.map +1 -1
- package/lib/commonjs/create-icon-source-cache.js +3 -2
- package/lib/commonjs/create-icon-source-cache.js.map +1 -1
- package/lib/commonjs/ensure-native-module-available.js +1 -1
- package/lib/commonjs/ensure-native-module-available.js.map +1 -1
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/scripts/getFonts.js +2 -2
- package/lib/commonjs/scripts/getFonts.js.map +1 -1
- package/lib/module/NativeVectorIcons.js.map +1 -1
- package/lib/module/NativeVectorIcons.web.js.map +1 -1
- package/lib/module/create-icon-set.js +10 -6
- package/lib/module/create-icon-set.js.map +1 -1
- package/lib/module/create-icon-source-cache.js +3 -2
- package/lib/module/create-icon-source-cache.js.map +1 -1
- package/lib/module/ensure-native-module-available.js.map +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/scripts/getFonts.js +1 -1
- package/lib/module/scripts/getFonts.js.map +1 -1
- package/lib/typescript/src/NativeVectorIcons.d.ts.map +1 -1
- package/lib/typescript/src/create-icon-set.d.ts.map +1 -1
- package/lib/typescript/src/create-icon-source-cache.d.ts.map +1 -1
- package/package.json +14 -49
- package/react-native-vector-icons.podspec +26 -7
- package/src/NativeVectorIcons.ts +2 -12
- package/src/create-icon-set.tsx +24 -28
- package/src/create-icon-source-cache.ts +6 -9
- package/src/ensure-native-module-available.ts +1 -1
- package/src/scripts/getFonts.ts +1 -1
- package/lib/commonjs/icon-button.js +0 -72
- package/lib/commonjs/icon-button.js.map +0 -1
- package/lib/commonjs/object-utils.js +0 -20
- package/lib/commonjs/object-utils.js.map +0 -1
- package/lib/module/icon-button.js +0 -64
- package/lib/module/icon-button.js.map +0 -1
- package/lib/module/object-utils.js +0 -12
- package/lib/module/object-utils.js.map +0 -1
- package/lib/typescript/src/icon-button.d.ts +0 -13
- package/lib/typescript/src/icon-button.d.ts.map +0 -1
- package/lib/typescript/src/object-utils.d.ts +0 -3
- package/lib/typescript/src/object-utils.d.ts.map +0 -1
- package/src/icon-button.tsx +0 -142
- package/src/object-utils.ts +0 -25
package/README.md
ADDED
|
@@ -0,0 +1,373 @@
|
|
|
1
|
+

|
|
2
|
+
|
|
3
|
+
[](https://travis-ci.org/react-native-vector-icons/react-native-vector-icons) [](https://npmjs.com/package/react-native-vector-icons) [](https://npmjs.com/package/react-native-vector-icons)
|
|
4
|
+
|
|
5
|
+
# React Native Vector Icons
|
|
6
|
+
|
|
7
|
+
Elevate your React Native applications with the power of customizable vector
|
|
8
|
+
icons. Ideal for embellishing buttons, logos, and navigation or tab bars, these
|
|
9
|
+
icons seamlessly integrate into your projects. Their versatility makes
|
|
10
|
+
extension and styling effortless.
|
|
11
|
+
|
|
12
|
+
For the integration of `.svg` files natively, you can explore [`react-native-vector-image`](https://github.com/oblador/react-native-vector-image).
|
|
13
|
+
|
|
14
|
+
## Table of Contents
|
|
15
|
+
|
|
16
|
+
- [Sponsorship](#sponsorship)
|
|
17
|
+
- [Available Icon Sets](#available-icon-sets)
|
|
18
|
+
- [Installation](#installation)
|
|
19
|
+
- [iOS Setup](#ios-setup)
|
|
20
|
+
- [macOS Setup](#macos-setup)
|
|
21
|
+
- [Windows Setup](#windows-setup)
|
|
22
|
+
- [React-native-web Setup](#react-native-web-setup)
|
|
23
|
+
- [Web Setup](#web-setup)
|
|
24
|
+
- [Icon Component](#icon-component)
|
|
25
|
+
- [Usage as PNG Image/Source Object](#usage-as-png-imagesource-object)
|
|
26
|
+
- [Multi-Style Fonts](#multi-style-fonts)
|
|
27
|
+
- [Custom Fonts](#custom-fonts)
|
|
28
|
+
- [Animation](#animation)
|
|
29
|
+
- [Usage Examples](#usage-examples)
|
|
30
|
+
- [Generating Your Own Icon Package](#generating-your-own-icon-package)
|
|
31
|
+
- [Changelog](https://github.com/react-native-vector-icons/react-native-vector-icons/releases)
|
|
32
|
+
- [License](#license)
|
|
33
|
+
|
|
34
|
+
## Sponsorship
|
|
35
|
+
|
|
36
|
+
Should you find this library beneficial, kindly contemplate the option of
|
|
37
|
+
[sponsoring](https://github.com/sponsors/oblador).
|
|
38
|
+
|
|
39
|
+
## Available Icon Sets
|
|
40
|
+
|
|
41
|
+
[Explore all icons](https://react-native-vector-icons.github.io/react-native-vector-icons/).
|
|
42
|
+
|
|
43
|
+
RNVI comes with the following supported icons. You can [search NPM](https://www.npmjs.com/search?q=keywords%3Areact-native-vector-icons-icon) for third party icons.
|
|
44
|
+
|
|
45
|
+
### Actively maintained fonts
|
|
46
|
+
- [`AntDesign`](https://ant.design/components/icon) from Ant Group (v4.4.2 with _449_ icons)
|
|
47
|
+
- [`Feather`](http://feathericons.com) created by Cole Bemis & Contributors (v4.29.2 featuring _287_ icons)
|
|
48
|
+
- [`FontAwesome 6`](https://fontawesome.com/search) designed by Fonticons, Inc. (v6.5.2 featuring _2045_ free and _30199_ pro icons)
|
|
49
|
+
- [`Foundation`](http://zurb.com/playground/foundation-icon-fonts-3) by ZURB, Inc. (v3.0 with _283_ icons)
|
|
50
|
+
- [`Ionicons`](https://ionic.io/ionicons) crafted by Ionic (v7.4.0 containing _1356_ icons)
|
|
51
|
+
- [`MaterialDesignIcons`](https://pictogrammers.com/library/mdi/) from MaterialDesignIcons.com (v7.4.47 including _7448_ icons)
|
|
52
|
+
- [`Octicons`](https://primer.style/foundations/icons) designed by Github, Inc. (v19.19.0 with _326_ icons)
|
|
53
|
+
|
|
54
|
+
### No longer maintained upstream
|
|
55
|
+
- [`Entypo`](http://entypo.com) by Daniel Bruce (v1.0.1 with _411_ icons)
|
|
56
|
+
- [`EvilIcons`](http://evil-icons.io) designed by Alexander Madyankin & Roman Shamin (v1.10.1 with _70_ icons)
|
|
57
|
+
- [`FontAwesome`](https://fontawesome.com/v4/icons) by Fonticons, Inc. (v4.7.0 containing _785_ icons)
|
|
58
|
+
- [`FontAwesome 5`](https://fontawesome.com/v5/search) from Fonticons, Inc. (v5.15.4 offering _1611_ free and _7869_ pro icons)
|
|
59
|
+
- [`Fontisto`](https://github.com/kenangundogan/fontisto) created by Kenan Gündoğan (v3.0.4 featuring _617_ icons)
|
|
60
|
+
- [`MaterialIcons`](https://fonts.google.com/icons?icon.set=Material+Icons) by Google, Inc. (v4.0.0 featuring _2234_ icons)
|
|
61
|
+
- [`SimpleLineIcons`](https://simplelineicons.github.io/) crafted by Sabbir & Contributors (v2.5.5 with _189_ icons)
|
|
62
|
+
- [`Zocial`](https://smcllns.github.io/css-social-buttons) by Sam Collins (v1.1.1 with _100_ icons)
|
|
63
|
+
|
|
64
|
+
## Migration
|
|
65
|
+
|
|
66
|
+
See [MIGRATION.md](MIGRATION.md) if you are migrating from `react-native-vector-icons`
|
|
67
|
+
|
|
68
|
+
## Installation
|
|
69
|
+
|
|
70
|
+
1. Install the common package
|
|
71
|
+
```sh
|
|
72
|
+
npm install --save @react-native-vector-icons/common
|
|
73
|
+
```
|
|
74
|
+
1. Install the packages for the icons you want use
|
|
75
|
+
```sh
|
|
76
|
+
npm install --save @react-native-vector-icons/fontawesome6 @react-native-vector-icons/evilicons
|
|
77
|
+
```
|
|
78
|
+
1. Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions.
|
|
79
|
+
1. If you are using one of the following fonts refer to their guides for further instructions
|
|
80
|
+
* [FontAwesome 5](packages/fontawesome5/README.md)
|
|
81
|
+
* [FontAwesome 5 Pro](packages/fontawesome5-pro/README.md)
|
|
82
|
+
* [FontAwesome 6](packages/fontawesome6/README.md)
|
|
83
|
+
* [FontAwesome 6 Pro](packages/fontawesome6-pro/README.md)
|
|
84
|
+
* [Fontello](packages/fontello/README.md)
|
|
85
|
+
* [Icomoon](packages/icomoon/README.md)
|
|
86
|
+
|
|
87
|
+
### android
|
|
88
|
+
|
|
89
|
+
Nothing else needed.
|
|
90
|
+
|
|
91
|
+
### iOS
|
|
92
|
+
|
|
93
|
+
To use the bundled icons on iOS, follow these steps:
|
|
94
|
+
|
|
95
|
+
1. Update your pods
|
|
96
|
+
```sh
|
|
97
|
+
cd ios && pod update
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### macOS
|
|
101
|
+
|
|
102
|
+
This needs more work, see details in #1624
|
|
103
|
+
|
|
104
|
+
### Windows
|
|
105
|
+
|
|
106
|
+
TBA: It should just work???
|
|
107
|
+
|
|
108
|
+
### React-native-web Setup
|
|
109
|
+
|
|
110
|
+
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.
|
|
111
|
+
|
|
112
|
+
You will need add the font-family for each font you use to your css
|
|
113
|
+
|
|
114
|
+
You can debug missing font-families by looking in the Developer console in your web browser when debugging your web app.
|
|
115
|
+
|
|
116
|
+
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.
|
|
117
|
+
|
|
118
|
+
In your `App.css` or similar add the font-family specifications:
|
|
119
|
+
|
|
120
|
+
```css
|
|
121
|
+
@font-face {
|
|
122
|
+
src: url(path/to/fonts/Ionicons.ttf);
|
|
123
|
+
font-family: "Ionicons";
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
@font-face {
|
|
127
|
+
src: url(path/to/fonts/FontAwesome.ttf);
|
|
128
|
+
font-family: "FontAwesome";
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@font-face {
|
|
132
|
+
src: url(path/to/fonts/FontAwesome5_Brands.ttf);
|
|
133
|
+
font-family: "FontAwesome5_Brands";
|
|
134
|
+
font-weight: 400; /* Regular weight */
|
|
135
|
+
font-style: normal;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
@font-face {
|
|
139
|
+
src: url(path/to/fonts/FontAwesome5_Regular.ttf);
|
|
140
|
+
font-family: "FontAwesome5_Regular";
|
|
141
|
+
font-weight: 400; /* Regular weight */
|
|
142
|
+
font-style: normal;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
@font-face {
|
|
146
|
+
src: url(path/to/fonts/FontAwesome5_Solid.ttf);
|
|
147
|
+
font-family: "FontAwesome5_Solid";
|
|
148
|
+
font-weight: 900; /* Bold weight for solid */
|
|
149
|
+
font-style: normal;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
@font-face {
|
|
153
|
+
src: url(path/to/fonts/MaterialIcons.ttf);
|
|
154
|
+
font-family: "MaterialIcons";
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
@font-face {
|
|
158
|
+
src: url(path/to/fonts/Feather.ttf);
|
|
159
|
+
font-family: "Feather";
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
@font-face {
|
|
163
|
+
src: url(path/to/fonts/MaterialCommunityIcons.ttf);
|
|
164
|
+
font-family: "MaterialCommunityIcons";
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* TODO: Add other icons fonts here */
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### Web Setup
|
|
171
|
+
|
|
172
|
+
FIXME: Can we improve on this?
|
|
173
|
+
|
|
174
|
+
To integrate the library with your web project using [webpack](https://webpack.js.org/), follow these steps:
|
|
175
|
+
|
|
176
|
+
1. In your webpack configuration file, add a section to handle TTF files using `url-loader` or `file-loader`:
|
|
177
|
+
|
|
178
|
+
```js
|
|
179
|
+
{
|
|
180
|
+
test: /\.ttf$/,
|
|
181
|
+
loader: "url-loader", // or directly file-loader
|
|
182
|
+
include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
|
|
183
|
+
}
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
2. In your JavaScript entry point, consume the font files and inject the necessary style tag:
|
|
187
|
+
|
|
188
|
+
```js
|
|
189
|
+
import Icon from '@react-native-vector-icons/fontAwesome';
|
|
190
|
+
|
|
191
|
+
// Generate the required CSS
|
|
192
|
+
import iconFont from '@react-native-vector-icons/fontawesome/fonts/FontAwesome.ttf';
|
|
193
|
+
const iconFontStyles = `@font-face {
|
|
194
|
+
src: url(${iconFont});
|
|
195
|
+
font-family: FontAwesome;
|
|
196
|
+
}`;
|
|
197
|
+
|
|
198
|
+
// Create a stylesheet
|
|
199
|
+
const style = document.createElement('style');
|
|
200
|
+
style.type = 'text/css';
|
|
201
|
+
|
|
202
|
+
// Append the iconFontStyles to the stylesheet
|
|
203
|
+
if (style.styleSheet) {
|
|
204
|
+
style.styleSheet.cssText = iconFontStyles;
|
|
205
|
+
} else {
|
|
206
|
+
style.appendChild(document.createTextNode(iconFontStyles));
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
// Inject the stylesheet into the document head
|
|
210
|
+
document.head.appendChild(style);
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
By following these steps, you will seamlessly integrate the vector icons
|
|
214
|
+
library into your web project using [webpack](https://webpack.js.org/),
|
|
215
|
+
enabling you to effortlessly use the icons within your web application.
|
|
216
|
+
|
|
217
|
+
## `Icon` Component
|
|
218
|
+
|
|
219
|
+
You can either use one of the bundled icons above or roll your own custom font.
|
|
220
|
+
|
|
221
|
+
```js
|
|
222
|
+
import Icon from '@react-native-vector-icons/fontawesome';
|
|
223
|
+
const myIcon = <Icon name="rocket" size={30} color="#900" />;
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
### Properties
|
|
227
|
+
|
|
228
|
+
Any [Text property](https://reactnative.dev/docs/text.html) and the following:
|
|
229
|
+
|
|
230
|
+
| Prop | Description | Default |
|
|
231
|
+
| ----------- | ----------------------------------------------------------------------- | ----------- |
|
|
232
|
+
| **`size`** | Size of the icon, can also be passed as `fontSize` in the style object. | `12` |
|
|
233
|
+
| **`name`** | What icon to show, see Icon Explorer app or one of the links above. | _None_ |
|
|
234
|
+
| **`color`** | Color of the icon. | _Inherited_ |
|
|
235
|
+
|
|
236
|
+
### Static Methods
|
|
237
|
+
|
|
238
|
+
| Prop | Description |
|
|
239
|
+
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
240
|
+
| **`getImageSource`** | Returns a promise that resolving to the source of a bitmap version of the icon for use with `Image` component et al. Usage: `const source = await Icon.getImageSource(name, size, color)` |
|
|
241
|
+
| **`getImageSourceSync`** | Same as `getImageSource` but synchronous. Usage: `const source = Icon.getImageSourceSync(name, size, color)` |
|
|
242
|
+
|
|
243
|
+
### Styling
|
|
244
|
+
|
|
245
|
+
Since `Icon` builds on top of the `Text` component, most [style properties](https://reactnative.dev/docs/style.html) will work as expected, you might find it useful to play around with these:
|
|
246
|
+
|
|
247
|
+
- `backgroundColor`
|
|
248
|
+
- `borderWidth`
|
|
249
|
+
- `borderColor`
|
|
250
|
+
- `borderRadius`
|
|
251
|
+
- `padding`
|
|
252
|
+
- `margin`
|
|
253
|
+
- `color`
|
|
254
|
+
- `fontSize`
|
|
255
|
+
|
|
256
|
+
By combining some of these you can create for example :
|
|
257
|
+
|
|
258
|
+

|
|
259
|
+

|
|
260
|
+
|
|
261
|
+
## Usage as PNG Image/Source Object
|
|
262
|
+
|
|
263
|
+
Convenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons. Takes the arguments `name`, `size` and `color` as described above.
|
|
264
|
+
|
|
265
|
+
```jsx
|
|
266
|
+
const source = Icon.getImageSourceSync('user', 20, 'red');
|
|
267
|
+
return <Image source={source} />;
|
|
268
|
+
);
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
Alternatively you may use the async method `Icon.getImageSource`.
|
|
272
|
+
|
|
273
|
+
Keep in mind that `Icon.getImageSourceSync` is blocking and might incur performance penalties. Subsequent calls will use cache however.
|
|
274
|
+
|
|
275
|
+
## Multi-Style Fonts
|
|
276
|
+
|
|
277
|
+
Some fonts today use multiple styles, FontAwesome 5 for example, which is supported by this library. The usage is pretty much the same as the standard `Icon` component:
|
|
278
|
+
|
|
279
|
+
```jsx
|
|
280
|
+
import Icon from '@react-native-vector-icons/fontawesome5';
|
|
281
|
+
|
|
282
|
+
const myIcon1 = <Icon name="comments" size={30} color="#900" />; // Defaults to solid
|
|
283
|
+
const myIcon2 = <Icon name="comments" size={30} color="#900" iconType="solid" />;
|
|
284
|
+
const myIcon3 = <Icon name="comments" size={30} color="#900" iconType="light" />; // Only in FA5 Pro
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
### Static methods
|
|
288
|
+
|
|
289
|
+
All static methods from `Icon` is supported by multi-styled fonts.
|
|
290
|
+
|
|
291
|
+
| Prop | Description |
|
|
292
|
+
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
293
|
+
| **`getImageSource`** | Returns a promise that resolving to the source of a bitmap version of the icon for use with `Image` component et al. Usage: `const source = await Icon.getImageSource(name, size, color)` |
|
|
294
|
+
| **`getImageSourceSync`** | Same as `getImageSource` but synchronous. Usage: `const source = Icon.getImageSourceSync(name, size, color)` |
|
|
295
|
+
|
|
296
|
+
## Custom Fonts
|
|
297
|
+
|
|
298
|
+
The best approach is to use our icon generator to create your own icon package.
|
|
299
|
+
|
|
300
|
+
See [CREATE_FONT_PACKAGE.md] to learn how to create your own font packages.
|
|
301
|
+
|
|
302
|
+
You can also use `createIconSet(glyphMap, fontFamily[, fontFile])` directly in your project. This
|
|
303
|
+
returns your own custom font based on the `glyphMap` where the key is the icon
|
|
304
|
+
name and the value is either a UTF-8 character or it's character code.
|
|
305
|
+
`fontFamily` is the name of the postscript font **NOT** the filename. Open the font in
|
|
306
|
+
Font Book.app or similar to learn the name. Optionally pass the third
|
|
307
|
+
`fontFile` argument for android support, it should be the custom font file
|
|
308
|
+
name.
|
|
309
|
+
|
|
310
|
+
```js
|
|
311
|
+
import { createIconSet } from '@react-native-vector-icons/common';
|
|
312
|
+
const glyphMap = { 'icon-name': 1234, test: '∆' };
|
|
313
|
+
const Icon = createIconSet(glyphMap, 'FontName', 'font-name.ttf');
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
You should place the font ttf file into `rnvi-fonts`. You can customise this location by adding the following snippet to your package.json
|
|
317
|
+
```json
|
|
318
|
+
{
|
|
319
|
+
"reactNativeVectorIcons": {
|
|
320
|
+
"fontDir": "src/assets/fonts"
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
```
|
|
324
|
+
|
|
325
|
+
## Animation
|
|
326
|
+
|
|
327
|
+
React Native comes with an amazing animation library called
|
|
328
|
+
[`Animated`](https://reactnative.dev/docs/animated.html). To use it with an
|
|
329
|
+
icon, simply create an animated component with this line: `const AnimatedIcon =
|
|
330
|
+
Animated.createAnimatedComponent(Icon)`. You can also use the higher level
|
|
331
|
+
animation library
|
|
332
|
+
[react-native-animatable](https://github.com/oblador/react-native-animatable).
|
|
333
|
+
|
|
334
|
+
## Usage Examples
|
|
335
|
+
|
|
336
|
+
### IconExplorer
|
|
337
|
+
|
|
338
|
+
Try the `IconExplorer` project in `Examples/IconExplorer` folder, there you can also search for any icon.
|
|
339
|
+
|
|
340
|
+

|
|
341
|
+
|
|
342
|
+
### Basic Example
|
|
343
|
+
|
|
344
|
+
```js
|
|
345
|
+
import Icon from '@react-native-vector-icons/ionicons';
|
|
346
|
+
|
|
347
|
+
function ExampleView(props) {
|
|
348
|
+
return <Icon name="ios-person" size={30} color="#4F8EF7" />;
|
|
349
|
+
}
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
### Inline Icons
|
|
353
|
+
|
|
354
|
+
```js
|
|
355
|
+
import { Text } from 'react-native';
|
|
356
|
+
import Icon from '@react-native-vector-icons/ionicons';
|
|
357
|
+
|
|
358
|
+
function ExampleView(props) {
|
|
359
|
+
return (
|
|
360
|
+
<Text>
|
|
361
|
+
Lorem <Icon name="ios-book" color="#4F8EF7" /> Ipsum
|
|
362
|
+
</Text>
|
|
363
|
+
);
|
|
364
|
+
}
|
|
365
|
+
```
|
|
366
|
+
|
|
367
|
+
## [Changelog](https://github.com/react-native-vector-icons/react-native-vector-icons/releases)
|
|
368
|
+
|
|
369
|
+
## License
|
|
370
|
+
|
|
371
|
+
This project is licenced under the [MIT License](http://opensource.org/licenses/mit-license.html).
|
|
372
|
+
|
|
373
|
+
Any bundled fonts are copyright to their respective authors and mostly under MIT or [SIL OFL](http://scripts.sil.org/OFL).
|
package/android/build.gradle
CHANGED
|
@@ -79,12 +79,12 @@ android {
|
|
|
79
79
|
main {
|
|
80
80
|
if (isNewArchitectureEnabled()) {
|
|
81
81
|
java.srcDirs += [
|
|
82
|
-
|
|
82
|
+
"src/newarch",
|
|
83
83
|
// This is needed to build Kotlin project with NewArch enabled
|
|
84
84
|
"${project.buildDir}/generated/source/codegen/java"
|
|
85
85
|
]
|
|
86
86
|
} else {
|
|
87
|
-
java.srcDirs += [
|
|
87
|
+
java.srcDirs += ["src/oldarch"]
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
}
|
|
@@ -119,7 +119,7 @@ task copyFonts(type: Exec) {
|
|
|
119
119
|
standardOutput = fonts
|
|
120
120
|
|
|
121
121
|
doLast {
|
|
122
|
-
def files = fonts.toString().trim().split('\n')
|
|
122
|
+
def files = fonts.toString().trim().split('\n').findAll { it }
|
|
123
123
|
copy {
|
|
124
124
|
from files
|
|
125
125
|
|
package/ios/VectorIcons.mm
CHANGED
|
@@ -1,54 +1,55 @@
|
|
|
1
1
|
#import "VectorIcons.h"
|
|
2
2
|
|
|
3
3
|
#import <CoreText/CoreText.h>
|
|
4
|
-
#import <React/RCTConvert.h>
|
|
5
4
|
#import <React/RCTBridge.h>
|
|
6
|
-
#import <React/
|
|
5
|
+
#import <React/RCTConvert.h>
|
|
7
6
|
#import <React/RCTFont.h>
|
|
8
|
-
|
|
7
|
+
#import <React/RCTUtils.h>
|
|
9
8
|
|
|
10
9
|
NSString *const RNVIErrorDomain = @"com.reactnativevectoricons.common";
|
|
11
10
|
|
|
12
11
|
@implementation VectorIcons
|
|
13
12
|
RCT_EXPORT_MODULE()
|
|
14
13
|
|
|
15
|
-
- (NSString *)hexStringFromColor:(UIColor *)color
|
|
16
|
-
{
|
|
14
|
+
- (NSString *)hexStringFromColor:(UIColor *)color {
|
|
17
15
|
const CGFloat *components = CGColorGetComponents(color.CGColor);
|
|
18
16
|
|
|
19
17
|
CGFloat r = components[0];
|
|
20
18
|
CGFloat g = components[1];
|
|
21
19
|
CGFloat b = components[2];
|
|
22
20
|
|
|
23
|
-
return [NSString stringWithFormat:@"#%02lX%02lX%02lX",
|
|
24
|
-
|
|
25
|
-
lroundf(g * 255),
|
|
26
|
-
lroundf(b * 255)];
|
|
21
|
+
return [NSString stringWithFormat:@"#%02lX%02lX%02lX", lroundf(r * 255),
|
|
22
|
+
lroundf(g * 255), lroundf(b * 255)];
|
|
27
23
|
}
|
|
28
24
|
|
|
29
|
-
- (NSString *)generateFilePath:(NSString *)glyph
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
{
|
|
25
|
+
- (NSString *)generateFilePath:(NSString *)glyph
|
|
26
|
+
withFontName:(NSString *)fontName
|
|
27
|
+
withFontSize:(CGFloat)fontSize
|
|
28
|
+
withColor:(UIColor *)color
|
|
29
|
+
withExtraIdentifier:(NSString *)identifier {
|
|
34
30
|
CGFloat screenScale = RCTScreenScale();
|
|
35
31
|
NSString *hexColor = [self hexStringFromColor:color];
|
|
36
|
-
NSString *fileName =
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
32
|
+
NSString *fileName =
|
|
33
|
+
[NSString stringWithFormat:@"%@RNVectorIcons_%@_%@_%@_%.f%@@%.fx.png",
|
|
34
|
+
NSTemporaryDirectory(), identifier, fontName,
|
|
35
|
+
glyph, fontSize, hexColor, screenScale];
|
|
40
36
|
|
|
41
37
|
return fileName;
|
|
42
38
|
}
|
|
43
39
|
|
|
44
|
-
- (BOOL)createAndSaveGlyphImage:(NSString *)glyph
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
{
|
|
48
|
-
if(![[NSFileManager defaultManager] fileExistsAtPath:filePath]) {
|
|
40
|
+
- (BOOL)createAndSaveGlyphImage:(NSString *)glyph
|
|
41
|
+
withFont:(UIFont *)font
|
|
42
|
+
withFilePath:(NSString *)filePath
|
|
43
|
+
withColor:(UIColor *)color {
|
|
44
|
+
if (![[NSFileManager defaultManager] fileExistsAtPath:filePath]) {
|
|
49
45
|
// No cached icon exists, we need to create it and persist to disk
|
|
50
46
|
|
|
51
|
-
NSAttributedString *attributedString =
|
|
47
|
+
NSAttributedString *attributedString =
|
|
48
|
+
[[NSAttributedString alloc] initWithString:glyph
|
|
49
|
+
attributes:@{
|
|
50
|
+
NSFontAttributeName : font,
|
|
51
|
+
NSForegroundColorAttributeName : color
|
|
52
|
+
}];
|
|
52
53
|
|
|
53
54
|
CGSize iconSize = [attributedString size];
|
|
54
55
|
UIGraphicsBeginImageContextWithOptions(iconSize, NO, 0.0);
|
|
@@ -66,86 +67,96 @@ RCT_EXPORT_MODULE()
|
|
|
66
67
|
|
|
67
68
|
- (NSString *)createGlyphImagePathForFont:(NSString *)fontName
|
|
68
69
|
withGlyph:(NSString *)glyph
|
|
69
|
-
|
|
70
|
+
withFontSize:(CGFloat)fontSize
|
|
70
71
|
withColor:(double)color
|
|
71
|
-
withError:(NSError **)error
|
|
72
|
-
{
|
|
72
|
+
withError:(NSError **)error {
|
|
73
73
|
UIColor *parsedColor = [RCTConvert UIColor:@(color)];
|
|
74
74
|
UIFont *font = [UIFont fontWithName:fontName size:fontSize];
|
|
75
|
-
NSString *filePath = [self generateFilePath:glyph
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
75
|
+
NSString *filePath = [self generateFilePath:glyph
|
|
76
|
+
withFontName:fontName
|
|
77
|
+
withFontSize:fontSize
|
|
78
|
+
withColor:parsedColor
|
|
79
|
+
withExtraIdentifier:@""];
|
|
79
80
|
|
|
80
|
-
BOOL success = [self createAndSaveGlyphImage:glyph
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
BOOL success = [self createAndSaveGlyphImage:glyph
|
|
82
|
+
withFont:font
|
|
83
|
+
withFilePath:filePath
|
|
84
|
+
withColor:parsedColor];
|
|
83
85
|
|
|
84
86
|
if (!success) {
|
|
85
|
-
*error = [NSError errorWithDomain:RNVIErrorDomain
|
|
87
|
+
*error = [NSError errorWithDomain:RNVIErrorDomain
|
|
88
|
+
code:RNVIGenericError
|
|
89
|
+
userInfo:@{
|
|
90
|
+
NSLocalizedDescriptionKey :
|
|
91
|
+
@"Failed to write rendered icon image"
|
|
92
|
+
}];
|
|
86
93
|
return nil;
|
|
87
94
|
}
|
|
88
95
|
return filePath;
|
|
89
96
|
}
|
|
90
97
|
|
|
91
|
-
RCT_EXPORT_METHOD(
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
) {
|
|
98
|
+
RCT_EXPORT_METHOD(getImageForFont
|
|
99
|
+
: (NSString *)fontName glyph
|
|
100
|
+
: (NSString *)glyph fontSize
|
|
101
|
+
: (CGFloat)fontSize color
|
|
102
|
+
: (double)color resolve
|
|
103
|
+
: (RCTPromiseResolveBlock)resolve reject
|
|
104
|
+
: (RCTPromiseRejectBlock)reject) {
|
|
99
105
|
NSError *error = nil;
|
|
100
106
|
NSString *filePath = [self createGlyphImagePathForFont:fontName
|
|
101
107
|
withGlyph:glyph
|
|
102
|
-
|
|
108
|
+
withFontSize:fontSize
|
|
103
109
|
withColor:color
|
|
104
110
|
withError:&error];
|
|
105
111
|
if (error != nil) {
|
|
106
|
-
reject([NSString stringWithFormat:@"%ld", (long)error.code],
|
|
112
|
+
reject([NSString stringWithFormat:@"%ld", (long)error.code],
|
|
113
|
+
error.localizedDescription, error);
|
|
107
114
|
} else {
|
|
108
115
|
resolve(filePath);
|
|
109
116
|
}
|
|
110
117
|
}
|
|
111
118
|
|
|
112
|
-
RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
) {
|
|
119
|
+
RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getImageForFontSync
|
|
120
|
+
: (NSString *)fontName glyph
|
|
121
|
+
: (NSString *)glyph fontSize
|
|
122
|
+
: (CGFloat)fontSize color
|
|
123
|
+
: (double)color) {
|
|
118
124
|
NSError *error = nil;
|
|
119
125
|
return [self createGlyphImagePathForFont:fontName
|
|
120
126
|
withGlyph:glyph
|
|
121
|
-
|
|
127
|
+
withFontSize:fontSize
|
|
122
128
|
withColor:color
|
|
123
129
|
withError:&error];
|
|
124
130
|
}
|
|
125
131
|
|
|
126
|
-
RCT_EXPORT_METHOD(
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
) {
|
|
132
|
+
RCT_EXPORT_METHOD(loadFontWithFileName
|
|
133
|
+
: (NSString *)fontFileName extension
|
|
134
|
+
: (NSString *)extension subdirectory
|
|
135
|
+
: (NSString *)subdirectory resolve
|
|
136
|
+
: (RCTPromiseResolveBlock)resolve reject
|
|
137
|
+
: (RCTPromiseRejectBlock)reject) {
|
|
133
138
|
NSBundle *bundle = [NSBundle bundleForClass:[self class]];
|
|
134
|
-
NSURL *fontURL = [bundle URLForResource:fontFileName
|
|
139
|
+
NSURL *fontURL = [bundle URLForResource:fontFileName
|
|
140
|
+
withExtension:extension
|
|
141
|
+
subdirectory:subdirectory];
|
|
135
142
|
NSData *fontData = [NSData dataWithContentsOfURL:fontURL];
|
|
136
143
|
|
|
137
|
-
CGDataProviderRef provider =
|
|
144
|
+
CGDataProviderRef provider =
|
|
145
|
+
CGDataProviderCreateWithCFData((CFDataRef)fontData);
|
|
138
146
|
CGFontRef font = CGFontCreateWithDataProvider(provider);
|
|
139
147
|
|
|
140
148
|
if (font) {
|
|
141
149
|
CFErrorRef errorRef = NULL;
|
|
142
150
|
if (CTFontManagerRegisterGraphicsFont(font, &errorRef) == NO) {
|
|
143
151
|
NSError *error = (__bridge NSError *)errorRef;
|
|
144
|
-
if (error.code == kCTFontManagerErrorAlreadyRegistered ||
|
|
145
|
-
|
|
152
|
+
if (error.code == kCTFontManagerErrorAlreadyRegistered ||
|
|
153
|
+
error.code == kCTFontManagerErrorDuplicatedName) {
|
|
154
|
+
// NSLog(@"Loaded font already %@/%@.%@", subdirectory, fontFileName,
|
|
155
|
+
// extension);
|
|
146
156
|
resolve(nil);
|
|
147
157
|
} else {
|
|
148
|
-
NSString *errorMessage = [NSString
|
|
158
|
+
NSString *errorMessage = [NSString
|
|
159
|
+
stringWithFormat:@"Font '%@' failed to load", fontFileName];
|
|
149
160
|
reject(@"font_load_failed", errorMessage, error);
|
|
150
161
|
}
|
|
151
162
|
} else {
|
|
@@ -153,24 +164,27 @@ RCT_EXPORT_METHOD(
|
|
|
153
164
|
resolve(nil);
|
|
154
165
|
}
|
|
155
166
|
|
|
167
|
+
if (errorRef) {
|
|
168
|
+
CFRelease(errorRef);
|
|
169
|
+
}
|
|
170
|
+
|
|
156
171
|
CFRelease(font);
|
|
157
172
|
} else {
|
|
158
173
|
// TODO: Should we reject back to javascript?
|
|
159
|
-
NSLog(@"RNVI: failed to find font %@/%@.%@", subdirectory, fontFileName,
|
|
174
|
+
NSLog(@"RNVI: failed to find font %@/%@.%@", subdirectory, fontFileName,
|
|
175
|
+
extension);
|
|
160
176
|
}
|
|
161
177
|
|
|
162
178
|
if (provider) {
|
|
163
179
|
CFRelease(provider);
|
|
164
180
|
}
|
|
165
|
-
|
|
166
181
|
}
|
|
167
182
|
|
|
168
183
|
// Don't compile this code when we build for the old architecture.
|
|
169
184
|
#ifdef RCT_NEW_ARCH_ENABLED
|
|
170
185
|
- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
|
|
171
|
-
(const facebook::react::ObjCTurboModule::InitParams &)params
|
|
172
|
-
|
|
173
|
-
return std::make_shared<facebook::react::NativeVectorIconsSpecJSI>(params);
|
|
186
|
+
(const facebook::react::ObjCTurboModule::InitParams &)params {
|
|
187
|
+
return std::make_shared<facebook::react::NativeVectorIconsSpecJSI>(params);
|
|
174
188
|
}
|
|
175
189
|
#endif
|
|
176
190
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_default","exports","default","TurboModuleRegistry","getEnforcing"],"sourceRoot":"../../src","sources":["NativeVectorIcons.ts"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AAAmD,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_default","exports","default","TurboModuleRegistry","getEnforcing"],"sourceRoot":"../../src","sources":["NativeVectorIcons.ts"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AAAmD,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAUpCC,gCAAmB,CAACC,YAAY,CAAO,aAAa,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../src","sources":["NativeVectorIcons.web.ts"],"mappings":";;;;;;iCAAe,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../src","sources":["NativeVectorIcons.web.ts"],"mappings":";;;;;;iCAAe,CAAC,CAAC","ignoreList":[]}
|