Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wrathchaos/react-native-dynamic-vector-icons
Wrapper of react-native-vector-icons to use dynamic types
https://github.com/wrathchaos/react-native-dynamic-vector-icons
android icon icon-library icons ios mobile mobile-app-development react react-native ui ux
Last synced: 14 days ago
JSON representation
Wrapper of react-native-vector-icons to use dynamic types
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-dynamic-vector-icons
- Owner: WrathChaos
- License: mit
- Created: 2019-02-18T12:38:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-29T11:37:23.000Z (7 months ago)
- Last Synced: 2024-05-01T14:29:10.781Z (7 months ago)
- Topics: android, icon, icon-library, icons, ios, mobile, mobile-app-development, react, react-native, ui, ux
- Language: TypeScript
- Homepage: https://www.freakycoder.com
- Size: 24.9 MB
- Stars: 96
- Watchers: 3
- Forks: 13
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-dynamic-vector-icons)
[](https://github.com/WrathChaos/react-native-dynamic-vector-icons)
[](https://www.npmjs.com/package/react-native-dynamic-vector-icons)
[](https://www.npmjs.com/package/react-native-dynamic-vector-icons)
[](https://opensource.org/licenses/MIT)
## Installation
Add the dependency:
### Pure React Native:
```ruby
npm i react-native-dynamic-vector-icons
npm i react-native-vector-icons
# iOS Only
npx pod-install
```
### Expo Version:
```ruby
"react-native-dynamic-vector-icons": "WrathChaos/react-native-dynamic-vector-icons#expo"
```
## Peer Dependencies
##### IMPORTANT! You need install them.
```
"react-native-vector-icons": ">= 6.x.x"
```
## Import
```js
import Icon, { IconType } from "react-native-dynamic-vector-icons";
```
## Basic Usage
```jsx
{}}
/>
```
## Bundled Icon Sets
[Browse all](https://oblador.github.io/react-native-vector-icons/).
- [`AntDesign`](https://ant.design/) by AntFinance (**297** icons)
- [`Entypo`](http://entypo.com) by Daniel Bruce (**411** icons)
- [`EvilIcons`](http://evil-icons.io) by Alexander Madyankin & Roman Shamin (v1.10.1, **70** icons)
- [`Feather`](http://feathericons.com) by Cole Bemis & Contributors (v4.21.0, **279** icons)
- [`FontAwesome`](http://fortawesome.github.io/Font-Awesome/icons/) by Dave Gandy (v4.7.0, **675** icons)
- [`FontAwesome 5`](https://fontawesome.com) by Fonticons, Inc. (v5.7.0, 1500 (free) **5082** (pro) icons)
- [`Fontisto`](https://github.com/kenangundogan/fontisto) by Kenan Gündoğan (v3.0.4, **615** icons)
- [`Foundation`](http://zurb.com/playground/foundation-icon-fonts-3) by ZURB, Inc. (v3.0, **283** icons)
- [`Ionicons`](https://ionicons.com/) by Ben Sperry (v4.2.4, **696** icons)
- [`MaterialIcons`](https://www.google.com/design/icons/) by Google, Inc. (v3.0.1, **932** icons)
- [`MaterialCommunityIcons`](https://materialdesignicons.com/) by MaterialDesignIcons.com (v4.0.96, **4416** icons)
- [`Octicons`](http://octicons.github.com) by Github, Inc. (v8.4.1, **184** icons)
- [`Zocial`](http://zocial.smcllns.com/) by Sam Collins (v1.0, **100** icons)
- [`SimpleLineIcons`](https://simplelineicons.github.io/) by Sabbir & Contributors (v2.4.1, **189** icons)
## Installation for iOS and Android
List of all available fonts to copy & paste in info.plist (Most Stable)
```xml
UIAppFonts
AntDesign.ttf
Entypo.ttf
EvilIcons.ttf
Feather.ttf
FontAwesome.ttf
FontAwesome5_Brands.ttf
FontAwesome5_Regular.ttf
FontAwesome5_Solid.ttf
Foundation.ttf
Ionicons.ttf
MaterialIcons.ttf
MaterialCommunityIcons.ttf
SimpleLineIcons.ttf
Octicons.ttf
Zocial.ttf
Fontisto.ttf
```
_Note: you need to recompile your project after adding new fonts, also ensure that they also appear under **Copy Bundle Resources** in **Build Phases**._
If you want to use the TabBar/NavigatorIOS integration or use `getImageSource`/`getImageSourceSync`, then you need to add `RNVectorIcons.xcodeproj` to **Libraries** and add `libRNVectorIcons.a` to **Link Binary With Libraries** under **Build Phases**. [More info and screenshots about how to do this is available in the React Native documentation](https://reactnative.dev/docs/linking-libraries-ios.html#content).
#### Option: With `react-native link`
`$ react-native link react-native-vector-icons`
_Note: Some users are having trouble using this method, try one of the others if you are too._
#### Option: With [CocoaPods](https://cocoapods.org/)
Add the following to your `Podfile` and run `pod update`:
```
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
```
Edit `Info.plist` as described above.
If you are using `use_frameworks!` in your `Podfile` you instead need to dynamically load the icon font by doing `Icon.loadFont()` when boostrapping your application.
_Note: You must be consuming React itself via CocoaPods for this to work, see [React Native documentation](https://reactnative.dev/docs/integration-with-existing-apps) on how to set that up._
### Android
#### Option: With Gradle (recommended)
This method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.
Edit `android/app/build.gradle` ( NOT `android/build.gradle` ) and add the following:
```gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```
To customize the files being copied, add the following instead:
```gradle
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```
#### Option: Manually
- Copy the contents in the `Fonts` folder to `android/app/src/main/assets/fonts` (_note lowercase fonts folder_).
##### Integrating library for `getImageSource` support
These steps are optional and only needed if you want to use the `Icon.getImageSource` function.
- Edit `android/settings.gradle` to look like this (without the +):
```diff
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')
```
- Edit `android/app/build.gradle` (note: **app** folder) to look like this:
```diff
apply plugin: 'com.android.application'
android {
...
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
+ compile project(':react-native-vector-icons')
}
```
- Edit your `MainApplication.java` (deep in `android/app/src/main/java/...`) to look like this (note **two** places to edit):
```diff
package com.myapp;
+ import com.oblador.vectoricons.VectorIconsPackage;
....
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage()
+ , new VectorIconsPackage()
);
}
}
```
### Configuration - Props
| Property | Type | Default | Description |
| -------- | :------: | :-------: | ------------------------------------------------ |
| style | style | style | use this to change the Icon's style |
| name | string | null | use this to change icon's itself |
| type | IconType | null | set the icon's type |
| size | number | null | changes the icon's size |
| color | color | null | use this to change icon's color |
| onPress | function | undefined | use this to set the icon's onPress functionality |
### Credits
Special thanks to [oblador, react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) to make a great icon library :) This library is a little wrapper for react-native-vector-icons to make their icon type dynamically.
## Author
FreakyCoder, [email protected]
## License
React Native Dynamic Vector Icons Library is available under the MIT license. See the LICENSE file for more info.
)