{"id":17700994,"url":"https://github.com/wrathchaos/react-native-dynamic-vector-icons","last_synced_at":"2025-04-07T15:08:12.200Z","repository":{"id":38825100,"uuid":"171281678","full_name":"WrathChaos/react-native-dynamic-vector-icons","owner":"WrathChaos","description":"Wrapper of react-native-vector-icons to use dynamic types","archived":false,"fork":false,"pushed_at":"2024-04-29T11:37:23.000Z","size":26148,"stargazers_count":96,"open_issues_count":6,"forks_count":13,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-01T14:29:10.781Z","etag":null,"topics":["android","icon","icon-library","icons","ios","mobile","mobile-app-development","react","react-native","ui","ux"],"latest_commit_sha":null,"homepage":"https://www.freakycoder.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WrathChaos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-18T12:38:16.000Z","updated_at":"2024-05-06T12:40:55.615Z","dependencies_parsed_at":"2023-10-19T12:42:58.316Z","dependency_job_id":"28954663-9a8d-4923-918a-4ff0681e51d6","html_url":"https://github.com/WrathChaos/react-native-dynamic-vector-icons","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-dynamic-vector-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-dynamic-vector-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-dynamic-vector-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-dynamic-vector-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WrathChaos","download_url":"https://codeload.github.com/WrathChaos/react-native-dynamic-vector-icons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247675597,"owners_count":20977376,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","icon","icon-library","icons","ios","mobile","mobile-app-development","react","react-native","ui","ux"],"created_at":"2024-10-24T17:43:47.932Z","updated_at":"2025-04-07T15:08:12.174Z","avatar_url":"https://github.com/WrathChaos.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"React Native Bottom Bar\" src=\"https://github.com/WrathChaos/react-native-dynamic-vector-icons/blob/master/assets/logo.png\" width=\"1050\"/\u003e\n\n[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-dynamic-vector-icons)\n\n[![Wrapper of react-native-vector-icons to use dynamic types](https://img.shields.io/badge/-Wrapper%20of%20react--native--vector--icons%20to%20use%20dynamic%20types-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-dynamic-vector-icons)\n\n[![npm version](https://img.shields.io/npm/v/react-native-dynamic-vector-icons.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-dynamic-vector-icons)\n[![npm](https://img.shields.io/npm/dt/react-native-dynamic-vector-icons.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-dynamic-vector-icons)\n![expo-compatible](https://img.shields.io/badge/Expo-compatible-9cf.svg?style=for-the-badge)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n\n## Installation\n\nAdd the dependency:\n\n### Pure React Native:\n\n```ruby\nnpm i react-native-dynamic-vector-icons\nnpm i react-native-vector-icons\n# iOS Only\nnpx pod-install\n```\n\n### Expo Version:\n\n```ruby\n\"react-native-dynamic-vector-icons\": \"WrathChaos/react-native-dynamic-vector-icons#expo\"\n```\n\n## Peer Dependencies\n\n##### IMPORTANT! You need install them.\n\n```\n\"react-native-vector-icons\": \"\u003e= 6.x.x\"\n```\n\n## Import\n\n```js\nimport Icon, { IconType } from \"react-native-dynamic-vector-icons\";\n```\n\n## Basic Usage\n\n```jsx\n\u003cIcon\n  name=\"github\"\n  type={IconType.AntDesign}\n  size={30}\n  color=\"purple\"\n  onPress={() =\u003e {}}\n/\u003e\n```\n\n## Bundled Icon Sets\n\n[Browse all](https://oblador.github.io/react-native-vector-icons/).\n\n- [`AntDesign`](https://ant.design/) by AntFinance (**297** icons)\n- [`Entypo`](http://entypo.com) by Daniel Bruce (**411** icons)\n- [`EvilIcons`](http://evil-icons.io) by Alexander Madyankin \u0026 Roman Shamin (v1.10.1, **70** icons)\n- [`Feather`](http://feathericons.com) by Cole Bemis \u0026 Contributors (v4.21.0, **279** icons)\n- [`FontAwesome`](http://fortawesome.github.io/Font-Awesome/icons/) by Dave Gandy (v4.7.0, **675** icons)\n- [`FontAwesome 5`](https://fontawesome.com) by Fonticons, Inc. (v5.7.0, 1500 (free) **5082** (pro) icons)\n- [`Fontisto`](https://github.com/kenangundogan/fontisto) by Kenan Gündoğan (v3.0.4, **615** icons)\n- [`Foundation`](http://zurb.com/playground/foundation-icon-fonts-3) by ZURB, Inc. (v3.0, **283** icons)\n- [`Ionicons`](https://ionicons.com/) by Ben Sperry (v4.2.4, **696** icons)\n- [`MaterialIcons`](https://www.google.com/design/icons/) by Google, Inc. (v3.0.1, **932** icons)\n- [`MaterialCommunityIcons`](https://materialdesignicons.com/) by MaterialDesignIcons.com (v4.0.96, **4416** icons)\n- [`Octicons`](http://octicons.github.com) by Github, Inc. (v8.4.1, **184** icons)\n- [`Zocial`](http://zocial.smcllns.com/) by Sam Collins (v1.0, **100** icons)\n- [`SimpleLineIcons`](https://simplelineicons.github.io/) by Sabbir \u0026 Contributors (v2.4.1, **189** icons)\n\n## Installation for iOS and Android\n\n \u003cdetails\u003e\u003csummary\u003eList of all available fonts to copy \u0026 paste in info.plist (Most Stable)\u003c/summary\u003e\n  \n  ```xml\n  \u003ckey\u003eUIAppFonts\u003c/key\u003e\n  \u003carray\u003e\n    \u003cstring\u003eAntDesign.ttf\u003c/string\u003e\n    \u003cstring\u003eEntypo.ttf\u003c/string\u003e\n    \u003cstring\u003eEvilIcons.ttf\u003c/string\u003e\n    \u003cstring\u003eFeather.ttf\u003c/string\u003e\n    \u003cstring\u003eFontAwesome.ttf\u003c/string\u003e\n    \u003cstring\u003eFontAwesome5_Brands.ttf\u003c/string\u003e\n    \u003cstring\u003eFontAwesome5_Regular.ttf\u003c/string\u003e\n    \u003cstring\u003eFontAwesome5_Solid.ttf\u003c/string\u003e\n    \u003cstring\u003eFoundation.ttf\u003c/string\u003e\n    \u003cstring\u003eIonicons.ttf\u003c/string\u003e\n    \u003cstring\u003eMaterialIcons.ttf\u003c/string\u003e\n    \u003cstring\u003eMaterialCommunityIcons.ttf\u003c/string\u003e\n    \u003cstring\u003eSimpleLineIcons.ttf\u003c/string\u003e\n    \u003cstring\u003eOcticons.ttf\u003c/string\u003e\n    \u003cstring\u003eZocial.ttf\u003c/string\u003e\n    \u003cstring\u003eFontisto.ttf\u003c/string\u003e\n  \u003c/array\u003e\n  ```\n  \n\u003c/details\u003e\n\n\u003cbr\u003e\n\n_Note: you need to recompile your project after adding new fonts, also ensure that they also appear under **Copy Bundle Resources** in **Build Phases**._\n\nIf 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).\n\n#### Option: With `react-native link`\n\n`$ react-native link react-native-vector-icons`\n\n_Note: Some users are having trouble using this method, try one of the others if you are too._\n\n#### Option: With [CocoaPods](https://cocoapods.org/)\n\nAdd the following to your `Podfile` and run `pod update`:\n\n```\npod 'RNVectorIcons', :path =\u003e '../node_modules/react-native-vector-icons'\n```\n\nEdit `Info.plist` as described above.\n\nIf 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.\n\n_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._\n\n### Android\n\n#### Option: With Gradle (recommended)\n\nThis 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.\n\nEdit `android/app/build.gradle` ( NOT `android/build.gradle` ) and add the following:\n\n```gradle\napply from: \"../../node_modules/react-native-vector-icons/fonts.gradle\"\n```\n\nTo customize the files being copied, add the following instead:\n\n```gradle\nproject.ext.vectoricons = [\n    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy\n]\n\napply from: \"../../node_modules/react-native-vector-icons/fonts.gradle\"\n```\n\n#### Option: Manually\n\n- Copy the contents in the `Fonts` folder to `android/app/src/main/assets/fonts` (_note lowercase fonts folder_).\n\n##### Integrating library for `getImageSource` support\n\nThese steps are optional and only needed if you want to use the `Icon.getImageSource` function.\n\n- Edit `android/settings.gradle` to look like this (without the +):\n\n  ```diff\n  rootProject.name = 'MyApp'\n\n  include ':app'\n\n  + include ':react-native-vector-icons'\n  + project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')\n  ```\n\n- Edit `android/app/build.gradle` (note: **app** folder) to look like this:\n\n  ```diff\n  apply plugin: 'com.android.application'\n\n  android {\n    ...\n  }\n\n  dependencies {\n    compile fileTree(dir: 'libs', include: ['*.jar'])\n    compile \"com.android.support:appcompat-v7:23.0.1\"\n    compile \"com.facebook.react:react-native:+\"  // From node_modules\n  + compile project(':react-native-vector-icons')\n  }\n  ```\n\n- Edit your `MainApplication.java` (deep in `android/app/src/main/java/...`) to look like this (note **two** places to edit):\n\n  ```diff\n  package com.myapp;\n\n  + import com.oblador.vectoricons.VectorIconsPackage;\n\n  ....\n\n    @Override\n    protected List\u003cReactPackage\u003e getPackages() {\n      return Arrays.\u003cReactPackage\u003easList(\n        new MainReactPackage()\n  +   , new VectorIconsPackage()\n      );\n    }\n\n  }\n  ```\n\n### Configuration - Props\n\n| Property |   Type   |  Default  | Description                                      |\n| -------- | :------: | :-------: | ------------------------------------------------ |\n| style    |  style   |   style   | use this to change the Icon's style              |\n| name     |  string  |   null    | use this to change icon's itself                 |\n| type     | IconType |   null    | set the icon's type                              |\n| size     |  number  |   null    | changes the icon's size                          |\n| color    |  color   |   null    | use this to change icon's color                  |\n| onPress  | function | undefined | use this to set the icon's onPress functionality |\n\n### Credits\n\nSpecial 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.\n\n## Author\n\nFreakyCoder, kurayogun@gmail.com\n\n## License\n\nReact Native Dynamic Vector Icons Library is available under the MIT license. See the LICENSE file for more info.\n)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-dynamic-vector-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwrathchaos%2Freact-native-dynamic-vector-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-dynamic-vector-icons/lists"}