@react-native-vector-icons/common 0.0.1-alpha.2 → 0.0.1-alpha.3
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 +307 -0
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,307 @@
|
|
|
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
|
+
- [Web Setup](#web-setup)
|
|
23
|
+
- [Icon Component](#icon-component)
|
|
24
|
+
- [Usage as PNG Image/Source Object](#usage-as-png-imagesource-object)
|
|
25
|
+
- [Multi-Style Fonts](#multi-style-fonts)
|
|
26
|
+
- [Custom Fonts](#custom-fonts)
|
|
27
|
+
- [Animation](#animation)
|
|
28
|
+
- [Usage Examples](#usage-examples)
|
|
29
|
+
- [Generating Your Own Icon Package](#generating-your-own-icon-package)
|
|
30
|
+
- [Changelog](https://github.com/react-native-vector-icons/react-native-vector-icons/releases)
|
|
31
|
+
- [License](#license)
|
|
32
|
+
|
|
33
|
+
## Sponsorship
|
|
34
|
+
|
|
35
|
+
Should you find this library beneficial, kindly contemplate the option of
|
|
36
|
+
[sponsoring](https://github.com/sponsors/oblador). Our envisioned endeavors
|
|
37
|
+
encompass the restructuring of the repository into a monorepo architecture.
|
|
38
|
+
This transition will empower independent versioning of icon sets, enhance
|
|
39
|
+
performance, reduce bundle size, and simplify community contributions. Your
|
|
40
|
+
sponsorship plays a pivotal role in materializing these advancements.
|
|
41
|
+
|
|
42
|
+
## Available Icon Sets
|
|
43
|
+
|
|
44
|
+
[Explore all icons](https://react-native-vector-icons.github.io/react-native-vector-icons/).
|
|
45
|
+
|
|
46
|
+
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.
|
|
47
|
+
|
|
48
|
+
FIXME: update all of these
|
|
49
|
+
FIXME: update all of these
|
|
50
|
+
FIXME: update all of these
|
|
51
|
+
FIXME: update all of these
|
|
52
|
+
|
|
53
|
+
- [`AntDesign`](https://ant.design/) from AntFinance (_298_ icons)
|
|
54
|
+
- [`Entypo`](http://entypo.com) by Daniel Bruce (v1.0.1 with _411_ icons)
|
|
55
|
+
- [`EvilIcons`](http://evil-icons.io) designed by Alexander Madyankin & Roman Shamin (v1.10.1 with _70_ icons)
|
|
56
|
+
- [`Feather`](http://feathericons.com) created by Cole Bemis & Contributors (v4.28.0 featuring _286_ icons)
|
|
57
|
+
- [`FontAwesome`](http://fortawesome.github.io/Font-Awesome/icons/) by Dave Gandy (v4.7.0 containing _675_ icons)
|
|
58
|
+
- [`FontAwesome 5`](https://fontawesome.com/v5/icons/) from Fonticons, Inc. (v5.15.3 offering _1598_ free and _7848_ pro icons)
|
|
59
|
+
- [`FontAwesome 6`](https://fontawesome.com) designed by Fonticons, Inc. (v6.1.2 featuring _2016_ free and _16150_ pro icons)
|
|
60
|
+
- [`Fontisto`](https://github.com/kenangundogan/fontisto) created by Kenan Gündoğan (v3.0.4 featuring _615_ icons)
|
|
61
|
+
- [`Foundation`](http://zurb.com/playground/foundation-icon-fonts-3) by ZURB, Inc. (v3.0 with _283_ icons)
|
|
62
|
+
- [`Ionicons`](https://ionicons.com/) crafted by Ionic (v7.1.0 containing _1338_ icons)
|
|
63
|
+
- [`MaterialIcons`](https://fonts.google.com/icons/) by Google, Inc. (v4.0.0 featuring _2189_ icons)
|
|
64
|
+
- [`MaterialCommunityIcons`](https://materialdesignicons.com/) from MaterialDesignIcons.com (v6.5.95 including _6596_ icons)
|
|
65
|
+
- [`Octicons`](http://octicons.github.com) designed by Github, Inc. (v16.3.1 with _250_ icons)
|
|
66
|
+
- [`Zocial`](http://zocial.smcllns.com/) by Sam Collins (v1.4.0 with _100_ icons)
|
|
67
|
+
- [`SimpleLineIcons`](https://simplelineicons.github.io/) crafted by Sabbir & Contributors (v2.5.5 with _189_ icons)
|
|
68
|
+
|
|
69
|
+
## Installation
|
|
70
|
+
|
|
71
|
+
1. Install the common package
|
|
72
|
+
```sh
|
|
73
|
+
npm install --save @react-native-vector-icons/common
|
|
74
|
+
```
|
|
75
|
+
1. Install the packages for the icons you want use
|
|
76
|
+
```sh
|
|
77
|
+
npm install --save @react-native-vector-icons/fontawesome6 @react-native-vector-icons/evilicons
|
|
78
|
+
```
|
|
79
|
+
1. Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions.
|
|
80
|
+
1. If you are using one of the following fonts refer to their guides for further instructions
|
|
81
|
+
* [FontAwesome 5](packages/fontawesome5/README.md)
|
|
82
|
+
* [FontAwesome 5 Pro](packages/fontawesome5-pro/README.md)
|
|
83
|
+
* [FontAwesome 6](packages/fontawesome6/README.md)
|
|
84
|
+
* [FontAwesome 6 Pro](packages/fontawesome6-pro/README.md)
|
|
85
|
+
* [Fontello](packages/fontello/README.md)
|
|
86
|
+
|
|
87
|
+
### iOS Setup
|
|
88
|
+
|
|
89
|
+
To use the bundled icons on iOS, follow these steps:
|
|
90
|
+
|
|
91
|
+
1. Update your pods
|
|
92
|
+
```sh
|
|
93
|
+
cd ios && pod update
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### macOS Setup
|
|
97
|
+
|
|
98
|
+
TBA: It should just work???
|
|
99
|
+
|
|
100
|
+
### Windows Setup
|
|
101
|
+
|
|
102
|
+
TBA: It should just work???
|
|
103
|
+
|
|
104
|
+
### Web Setup
|
|
105
|
+
|
|
106
|
+
FIXME: Can we improve on this?
|
|
107
|
+
|
|
108
|
+
To integrate the library with your web project using [webpack](https://webpack.js.org/), follow these steps:
|
|
109
|
+
|
|
110
|
+
1. In your webpack configuration file, add a section to handle TTF files using `url-loader` or `file-loader`:
|
|
111
|
+
|
|
112
|
+
```js
|
|
113
|
+
{
|
|
114
|
+
test: /\.ttf$/,
|
|
115
|
+
loader: "url-loader", // or directly file-loader
|
|
116
|
+
include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
2. In your JavaScript entry point, consume the font files and inject the necessary style tag:
|
|
121
|
+
|
|
122
|
+
```js
|
|
123
|
+
import Icon from '@react-native-vector-icons/fontAwesome';
|
|
124
|
+
|
|
125
|
+
// Generate the required CSS
|
|
126
|
+
import iconFont from '@react-native-vector-icons/fontawesome/fonts/FontAwesome.ttf';
|
|
127
|
+
const iconFontStyles = `@font-face {
|
|
128
|
+
src: url(${iconFont});
|
|
129
|
+
font-family: FontAwesome;
|
|
130
|
+
}`;
|
|
131
|
+
|
|
132
|
+
// Create a stylesheet
|
|
133
|
+
const style = document.createElement('style');
|
|
134
|
+
style.type = 'text/css';
|
|
135
|
+
|
|
136
|
+
// Append the iconFontStyles to the stylesheet
|
|
137
|
+
if (style.styleSheet) {
|
|
138
|
+
style.styleSheet.cssText = iconFontStyles;
|
|
139
|
+
} else {
|
|
140
|
+
style.appendChild(document.createTextNode(iconFontStyles));
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
// Inject the stylesheet into the document head
|
|
144
|
+
document.head.appendChild(style);
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
By following these steps, you will seamlessly integrate the vector icons
|
|
148
|
+
library into your web project using [webpack](https://webpack.js.org/),
|
|
149
|
+
enabling you to effortlessly use the icons within your web application.
|
|
150
|
+
|
|
151
|
+
## `Icon` Component
|
|
152
|
+
|
|
153
|
+
You can either use one of the bundled icons above or roll your own custom font.
|
|
154
|
+
|
|
155
|
+
```js
|
|
156
|
+
import Icon from '@react-native-vector-icons/fontawesome';
|
|
157
|
+
const myIcon = <Icon name="rocket" size={30} color="#900" />;
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
### Properties
|
|
161
|
+
|
|
162
|
+
Any [Text property](https://reactnative.dev/docs/text.html) and the following:
|
|
163
|
+
|
|
164
|
+
| Prop | Description | Default |
|
|
165
|
+
| ----------- | ----------------------------------------------------------------------- | ----------- |
|
|
166
|
+
| **`size`** | Size of the icon, can also be passed as `fontSize` in the style object. | `12` |
|
|
167
|
+
| **`name`** | What icon to show, see Icon Explorer app or one of the links above. | _None_ |
|
|
168
|
+
| **`color`** | Color of the icon. | _Inherited_ |
|
|
169
|
+
|
|
170
|
+
### Static Methods
|
|
171
|
+
|
|
172
|
+
| Prop | Description |
|
|
173
|
+
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
174
|
+
| **`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)` |
|
|
175
|
+
| **`getImageSourceSync`** | Same as `getImageSource` but synchronous. Usage: `const source = Icon.getImageSourceSync(name, size, color)` |
|
|
176
|
+
|
|
177
|
+
### Styling
|
|
178
|
+
|
|
179
|
+
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:
|
|
180
|
+
|
|
181
|
+
- `backgroundColor`
|
|
182
|
+
- `borderWidth`
|
|
183
|
+
- `borderColor`
|
|
184
|
+
- `borderRadius`
|
|
185
|
+
- `padding`
|
|
186
|
+
- `margin`
|
|
187
|
+
- `color`
|
|
188
|
+
- `fontSize`
|
|
189
|
+
|
|
190
|
+
By combining some of these you can create for example :
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
## Usage as PNG Image/Source Object
|
|
196
|
+
|
|
197
|
+
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.
|
|
198
|
+
|
|
199
|
+
```jsx
|
|
200
|
+
const source = Icon.getImageSourceSync('user', 20, 'red');
|
|
201
|
+
return <Image source={source} />;
|
|
202
|
+
);
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
Alternatively you may use the async method `Icon.getImageSource`.
|
|
206
|
+
|
|
207
|
+
Keep in mind that `Icon.getImageSourceSync` is blocking and might incur performance penalties. Subsequent calls will use cache however.
|
|
208
|
+
|
|
209
|
+
## Multi-Style Fonts
|
|
210
|
+
|
|
211
|
+
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:
|
|
212
|
+
|
|
213
|
+
```jsx
|
|
214
|
+
import Icon from '@react-native-vector-icons/fontawesome5';
|
|
215
|
+
|
|
216
|
+
const myIcon1 = <Icon name="comments" size={30} color="#900" />; // Defaults to solid
|
|
217
|
+
const myIcon2 = <Icon name="comments" size={30} color="#900" iconType="solid" />;
|
|
218
|
+
const myIcon3 = <Icon name="comments" size={30} color="#900" iconType="light" />; // Only in FA5 Pro
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
### Static methods
|
|
222
|
+
|
|
223
|
+
All static methods from `Icon` is supported by multi-styled fonts.
|
|
224
|
+
|
|
225
|
+
| Prop | Description |
|
|
226
|
+
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
227
|
+
| **`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)` |
|
|
228
|
+
| **`getImageSourceSync`** | Same as `getImageSource` but synchronous. Usage: `const source = Icon.getImageSourceSync(name, size, color)` |
|
|
229
|
+
|
|
230
|
+
## Custom Fonts
|
|
231
|
+
|
|
232
|
+
The best approach is to use our icon generator to create your own icon package.
|
|
233
|
+
|
|
234
|
+
See [CREATE_FONT_PACKAGE.md] to learn how to create your own font packages.
|
|
235
|
+
|
|
236
|
+
You can also use `createIconSet(glyphMap, fontFamily[, fontFile])` directly in your project. This
|
|
237
|
+
returns your own custom font based on the `glyphMap` where the key is the icon
|
|
238
|
+
name and the value is either a UTF-8 character or it's character code.
|
|
239
|
+
`fontFamily` is the name of the postscript font **NOT** the filename. Open the font in
|
|
240
|
+
Font Book.app or similar to learn the name. Optionally pass the third
|
|
241
|
+
`fontFile` argument for android support, it should be the custom font file
|
|
242
|
+
name.
|
|
243
|
+
|
|
244
|
+
```js
|
|
245
|
+
import { createIconSet } from '@react-native-vector-icons/common';
|
|
246
|
+
const glyphMap = { 'icon-name': 1234, test: '∆' };
|
|
247
|
+
const Icon = createIconSet(glyphMap, 'FontName', 'font-name.ttf');
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
You should place the font ttf file into `rnvi-fonts`. You can customise this location by adding the following snippet to your package.json
|
|
251
|
+
```json
|
|
252
|
+
{
|
|
253
|
+
"reactNativeVectorIcons": {
|
|
254
|
+
"fontDir": "src/assets/fonts"
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
## Animation
|
|
260
|
+
|
|
261
|
+
React Native comes with an amazing animation library called
|
|
262
|
+
[`Animated`](https://reactnative.dev/docs/animated.html). To use it with an
|
|
263
|
+
icon, simply create an animated component with this line: `const AnimatedIcon =
|
|
264
|
+
Animated.createAnimatedComponent(Icon)`. You can also use the higher level
|
|
265
|
+
animation library
|
|
266
|
+
[react-native-animatable](https://github.com/oblador/react-native-animatable).
|
|
267
|
+
|
|
268
|
+
## Usage Examples
|
|
269
|
+
|
|
270
|
+
### IconExplorer
|
|
271
|
+
|
|
272
|
+
Try the `IconExplorer` project in `Examples/IconExplorer` folder, there you can also search for any icon.
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
|
|
276
|
+
### Basic Example
|
|
277
|
+
|
|
278
|
+
```js
|
|
279
|
+
import Icon from '@react-native-vector-icons/ionicons';
|
|
280
|
+
|
|
281
|
+
function ExampleView(props) {
|
|
282
|
+
return <Icon name="ios-person" size={30} color="#4F8EF7" />;
|
|
283
|
+
}
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
### Inline Icons
|
|
287
|
+
|
|
288
|
+
```js
|
|
289
|
+
import { Text } from 'react-native';
|
|
290
|
+
import Icon from '@react-native-vector-icons/ionicons';
|
|
291
|
+
|
|
292
|
+
function ExampleView(props) {
|
|
293
|
+
return (
|
|
294
|
+
<Text>
|
|
295
|
+
Lorem <Icon name="ios-book" color="#4F8EF7" /> Ipsum
|
|
296
|
+
</Text>
|
|
297
|
+
);
|
|
298
|
+
}
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
## [Changelog](https://github.com/react-native-vector-icons/react-native-vector-icons/releases)
|
|
302
|
+
|
|
303
|
+
## License
|
|
304
|
+
|
|
305
|
+
This project is licenced under the [MIT License](http://opensource.org/licenses/mit-license.html).
|
|
306
|
+
|
|
307
|
+
Any bundled fonts are copyright to their respective authors and mostly under MIT or [SIL OFL](http://scripts.sil.org/OFL).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-native-vector-icons/common",
|
|
3
|
-
"version": "0.0.1-alpha.
|
|
3
|
+
"version": "0.0.1-alpha.3",
|
|
4
4
|
"description": "Customizable Icons for React Native with support for image source and full styling.",
|
|
5
5
|
"main": "lib/commonjs/index",
|
|
6
6
|
"module": "lib/module/index",
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
"scripts": {
|
|
29
29
|
"clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
|
|
30
30
|
"prepare": "bob build",
|
|
31
|
-
"
|
|
32
|
-
"
|
|
31
|
+
"prepack": "cp ../../README.md .",
|
|
32
|
+
"postpack": "rm README.md",
|
|
33
33
|
"watch": "onchange 'src/**' --initial -- yarn run prepare"
|
|
34
34
|
},
|
|
35
35
|
"keywords": [
|
|
@@ -166,5 +166,5 @@
|
|
|
166
166
|
}
|
|
167
167
|
},
|
|
168
168
|
"packageManager": "yarn@4.0.1",
|
|
169
|
-
"gitHead": "
|
|
169
|
+
"gitHead": "5e029cbce89086e6e93261f43ce6382d9e2d0bbe"
|
|
170
170
|
}
|