├── directory ├── README.md ├── src │ ├── index.css │ ├── index.js │ └── App.css ├── package.json └── public │ └── index.html ├── Examples ├── IconExplorer │ ├── .watchmanconfig │ ├── .gitattributes │ ├── react-native.ios.js │ ├── react-native.android.js │ ├── react-native.osx.js │ ├── react-native.windows.js │ ├── app.json │ ├── babel.config.js │ ├── android │ │ ├── app │ │ │ ├── src │ │ │ │ ├── main │ │ │ │ │ ├── res │ │ │ │ │ │ ├── values │ │ │ │ │ │ │ ├── strings.xml │ │ │ │ │ │ │ └── styles.xml │ │ │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ └── mipmap-xxxhdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── java │ │ │ │ │ │ └── com │ │ │ │ │ │ │ └── iconexplorer │ │ │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ │ │ └── MainApplication.java │ │ │ │ │ └── AndroidManifest.xml │ │ │ │ └── debug │ │ │ │ │ └── AndroidManifest.xml │ │ │ ├── proguard-rules.pro │ │ │ ├── build_defs.bzl │ │ │ └── BUCK │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── settings.gradle │ │ ├── gradle.properties │ │ ├── build.gradle │ │ └── gradlew.bat │ ├── ios │ │ ├── IconExplorer │ │ │ ├── Images.xcassets │ │ │ │ ├── Contents.json │ │ │ │ └── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ ├── AppDelegate.h │ │ │ ├── main.m │ │ │ ├── AppDelegate.m │ │ │ ├── Info.plist │ │ │ └── Base.lproj │ │ │ │ └── LaunchScreen.xib │ │ ├── IconExplorer.xcworkspace │ │ │ └── contents.xcworkspacedata │ │ ├── IconExplorerTests │ │ │ ├── Info.plist │ │ │ └── IconExplorerTests.m │ │ ├── IconExplorer-tvOSTests │ │ │ └── Info.plist │ │ ├── IconExplorer-tvOS │ │ │ └── Info.plist │ │ └── Podfile │ ├── .buckconfig │ ├── windows │ │ ├── IconExplorer │ │ │ ├── Assets │ │ │ │ ├── StoreLogo.png │ │ │ │ ├── SplashScreen.scale-200.png │ │ │ │ ├── LockScreenLogo.scale-200.png │ │ │ │ ├── Square44x44Logo.scale-200.png │ │ │ │ ├── Wide310x150Logo.scale-200.png │ │ │ │ ├── Square150x150Logo.scale-200.png │ │ │ │ └── Square44x44Logo.targetsize-24_altform-unplated.png │ │ │ ├── IconExplorer_TemporaryKey.pfx │ │ │ ├── App.xaml │ │ │ ├── project.json │ │ │ ├── Properties │ │ │ │ ├── AssemblyInfo.cs │ │ │ │ └── Default.rd.xml │ │ │ ├── MainPage.cs │ │ │ ├── Package.appxmanifest │ │ │ └── App.xaml.cs │ │ └── .gitignore │ ├── README.md │ ├── __tests__ │ │ └── App-test.js │ ├── metro.config.js │ ├── osx │ │ ├── IconExplorer │ │ │ ├── AppDelegate.h │ │ │ ├── Images.xcassets │ │ │ │ └── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ ├── main.m │ │ │ └── Info.plist │ │ ├── IconExplorerTests │ │ │ ├── Info.plist │ │ │ └── IconExplorerTests.m │ │ └── IconExplorer.xcodeproj │ │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── IconExplorer.xcscheme │ ├── package.json │ ├── .gitignore │ ├── index.js │ ├── index.osx.js │ ├── index.windows.js │ ├── icon-sets.js │ ├── IconList.js │ └── .flowconfig └── TabBarExample │ ├── .watchmanconfig │ ├── .gitattributes │ ├── .babelrc │ ├── app.json │ ├── iOS │ ├── TabBarExample │ │ ├── Images.xcassets │ │ │ ├── Contents.json │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── AppDelegate.h │ │ ├── main.m │ │ ├── AppDelegate.m │ │ ├── Info.plist │ │ └── Base.lproj │ │ │ └── LaunchScreen.xib │ └── TabBarExampleTests │ │ ├── Info.plist │ │ └── TabBarExampleTests.m │ ├── .buckconfig │ ├── index.js │ ├── package.json │ ├── .gitignore │ └── .flowconfig ├── lib ├── react-native.js ├── react-native.web.js ├── react-native.osx.js ├── create-icon-set-from-fontello.js ├── create-icon-set-from-icomoon.js ├── ensure-native-module-available.js ├── create-icon-set-from-fontawesome5.js ├── generate-icon-set-from-css.js ├── tab-bar-item-ios.js ├── icon-button.js └── create-multi-style-icon-set.js ├── .babelrc ├── .prettierrc ├── Fonts ├── Entypo.ttf ├── Feather.ttf ├── Zocial.ttf ├── AntDesign.ttf ├── EvilIcons.ttf ├── Fontisto.ttf ├── Foundation.ttf ├── Ionicons.ttf ├── Octicons.ttf ├── FontAwesome.ttf ├── MaterialIcons.ttf ├── SimpleLineIcons.ttf ├── FontAwesome5_Brands.ttf ├── FontAwesome5_Regular.ttf ├── FontAwesome5_Solid.ttf └── MaterialCommunityIcons.ttf ├── react-native.config.js ├── android ├── src │ └── main │ │ ├── AndroidManifest.xml │ │ └── java │ │ └── com │ │ └── oblador │ │ └── vectoricons │ │ ├── VectorIconsPackage.java │ │ └── VectorIconsModule.java └── build.gradle ├── RNVectorIcons.xcodeproj └── project.xcworkspace │ ├── contents.xcworkspacedata │ ├── xcuserdata │ └── joel.xcuserdatad │ │ └── UserInterfaceState.xcuserstate │ └── xcshareddata │ └── RNVectorIcons.xccheckout ├── .editorconfig ├── .npmignore ├── .gitignore ├── scripts ├── ionicons.sh ├── zocial.sh ├── fontisto.sh ├── fontawesome.sh ├── foundation.sh ├── materialicons.sh ├── simplelineicons.sh ├── materialcommunityicons.sh ├── octicons.sh ├── evilicons.sh ├── antdesign.sh ├── build-flow.sh ├── entypo.sh ├── build-icons.sh ├── fontawesome5.sh └── feather.sh ├── index.js ├── bower.json ├── Entypo.js ├── Zocial.js ├── Feather.js ├── Fontisto.js ├── Ionicons.js ├── Octicons.js ├── AntDesign.js ├── EvilIcons.js ├── Foundation.js ├── FontAwesome.js ├── MaterialIcons.js ├── .github └── ISSUE_TEMPLATE │ ├── feature_request.md │ ├── support.md │ └── bug_report.md ├── bin ├── add-font-assets.js ├── generate-fontawesome5-metadata.js ├── generate-flow.js ├── generate-icon.js ├── generate-material-icons.js └── fa5-upgrade.sh ├── SimpleLineIcons.js ├── templates ├── bundled-icon-set.tpl └── separated-icon-set.tpl ├── MaterialCommunityIcons.js ├── FontAwesome5.js ├── FontAwesome5Pro.js ├── RNVectorIcons.podspec ├── BUILDING_FEATHER.md ├── .eslintrc ├── LICENSE ├── RNVectorIconsManager └── RNVectorIconsManager.h ├── CONTRIBUTING.md ├── glyphmaps ├── EvilIcons.json ├── Zocial.json └── Octicons.json ├── RNIMigration.js ├── .travis.yml ├── fonts.gradle ├── index.js.flow ├── package.json └── FONTAWESOME5.md /directory/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Examples/IconExplorer/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /Examples/TabBarExample/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /lib/react-native.js: -------------------------------------------------------------------------------- 1 | export * from 'react-native'; 2 | -------------------------------------------------------------------------------- /Examples/IconExplorer/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /Examples/TabBarExample/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /Examples/IconExplorer/react-native.ios.js: -------------------------------------------------------------------------------- 1 | export * from 'react-native'; 2 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["module:metro-react-native-babel-preset"] 3 | } 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5" 4 | } 5 | -------------------------------------------------------------------------------- /Examples/IconExplorer/react-native.android.js: -------------------------------------------------------------------------------- 1 | export * from 'react-native'; 2 | -------------------------------------------------------------------------------- /Examples/IconExplorer/react-native.osx.js: -------------------------------------------------------------------------------- 1 | export * from 'react-native-desktop'; 2 | -------------------------------------------------------------------------------- /Examples/IconExplorer/react-native.windows.js: -------------------------------------------------------------------------------- 1 | export * from 'react-native'; 2 | -------------------------------------------------------------------------------- /Examples/IconExplorer/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "IconExplorer", 3 | "displayName": "IconExplorer" 4 | } -------------------------------------------------------------------------------- /Examples/TabBarExample/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["module:metro-react-native-babel-preset"] 3 | } 4 | -------------------------------------------------------------------------------- /Examples/TabBarExample/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "TabBarExample", 3 | "displayName": "TabBarExample" 4 | } -------------------------------------------------------------------------------- /Fonts/Entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/Entypo.ttf -------------------------------------------------------------------------------- /Fonts/Feather.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/Feather.ttf -------------------------------------------------------------------------------- /Fonts/Zocial.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/Zocial.ttf -------------------------------------------------------------------------------- /react-native.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dependency: { 3 | assets: ['Fonts'], 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /Fonts/AntDesign.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/AntDesign.ttf -------------------------------------------------------------------------------- /Fonts/EvilIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/EvilIcons.ttf -------------------------------------------------------------------------------- /Fonts/Fontisto.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/Fontisto.ttf -------------------------------------------------------------------------------- /Fonts/Foundation.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/Foundation.ttf -------------------------------------------------------------------------------- /Fonts/Ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/Ionicons.ttf -------------------------------------------------------------------------------- /Fonts/Octicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/Octicons.ttf -------------------------------------------------------------------------------- /lib/react-native.web.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-unresolved */ 2 | 3 | export * from 'react-native-web'; 4 | -------------------------------------------------------------------------------- /Fonts/FontAwesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/FontAwesome.ttf -------------------------------------------------------------------------------- /lib/react-native.osx.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-unresolved */ 2 | 3 | export * from 'react-native-desktop'; 4 | -------------------------------------------------------------------------------- /Fonts/MaterialIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/MaterialIcons.ttf -------------------------------------------------------------------------------- /Fonts/SimpleLineIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/SimpleLineIcons.ttf -------------------------------------------------------------------------------- /Examples/IconExplorer/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /Fonts/FontAwesome5_Brands.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/FontAwesome5_Brands.ttf -------------------------------------------------------------------------------- /Fonts/FontAwesome5_Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/FontAwesome5_Regular.ttf -------------------------------------------------------------------------------- /Fonts/FontAwesome5_Solid.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/FontAwesome5_Solid.ttf -------------------------------------------------------------------------------- /Fonts/MaterialCommunityIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Fonts/MaterialCommunityIcons.ttf -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | IconExplorer 3 | 4 | -------------------------------------------------------------------------------- /Examples/IconExplorer/ios/IconExplorer/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Examples/TabBarExample/iOS/TabBarExample/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /directory/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | overflow-x: hidden; 6 | overflow-y: scroll; 7 | } 8 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /Examples/IconExplorer/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /Examples/TabBarExample/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /Examples/IconExplorer/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/IconExplorer/Assets/StoreLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/windows/IconExplorer/Assets/StoreLogo.png -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/IconExplorer/IconExplorer_TemporaryKey.pfx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/windows/IconExplorer/IconExplorer_TemporaryKey.pfx -------------------------------------------------------------------------------- /Examples/TabBarExample/index.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import App from './App'; 3 | import { name as appName } from './app.json'; 4 | 5 | AppRegistry.registerComponent(appName, () => App); 6 | -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/IconExplorer/Assets/SplashScreen.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/windows/IconExplorer/Assets/SplashScreen.scale-200.png -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/IconExplorer/Assets/LockScreenLogo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/windows/IconExplorer/Assets/LockScreenLogo.scale-200.png -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/IconExplorer/Assets/Square44x44Logo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/windows/IconExplorer/Assets/Square44x44Logo.scale-200.png -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/IconExplorer/Assets/Wide310x150Logo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/windows/IconExplorer/Assets/Wide310x150Logo.scale-200.png -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/IconExplorer/Assets/Square150x150Logo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/windows/IconExplorer/Assets/Square150x150Logo.scale-200.png -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /directory/src/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-env browser */ 2 | 3 | import React from 'react'; 4 | import ReactDOM from 'react-dom'; 5 | import App from './App'; 6 | import './index.css'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /Examples/IconExplorer/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'IconExplorer' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | -------------------------------------------------------------------------------- /RNVectorIcons.xcodeproj/project.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/IconExplorer/Assets/Square44x44Logo.targetsize-24_altform-unplated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/Examples/IconExplorer/windows/IconExplorer/Assets/Square44x44Logo.targetsize-24_altform-unplated.png -------------------------------------------------------------------------------- /RNVectorIcons.xcodeproj/project.xcworkspace/xcuserdata/joel.xcuserdatad/UserInterfaceState.xcuserstate: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ethan0007/react-native-vector-icons/master/RNVectorIcons.xcodeproj/project.xcworkspace/xcuserdata/joel.xcuserdatad/UserInterfaceState.xcuserstate -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /Examples/IconExplorer/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/IconExplorer/App.xaml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | *.log 3 | 4 | # Runtime data 5 | tmp 6 | .fontcustom-manifest.json 7 | 8 | # Dependency directory 9 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 10 | node_modules 11 | bower_components 12 | 13 | Examples 14 | .* 15 | directory 16 | bower.json 17 | scripts 18 | -------------------------------------------------------------------------------- /Examples/IconExplorer/README.md: -------------------------------------------------------------------------------- 1 | # IconExplorer 2 | 3 | To run on OSX you must first install `react-native-desktop` with: 4 | 5 | ``` 6 | $ npm install react-native-desktop@0.6.5 7 | ``` 8 | 9 | To run on Windows you must first install `react-native-windows` with: 10 | 11 | ``` 12 | $ npm install react-native-windows 13 | ``` 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | *.log 3 | 4 | # Runtime data 5 | tmp 6 | .fontcustom-manifest.json 7 | build 8 | dist 9 | *.js.flow 10 | 11 | # Dependency directory 12 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 13 | node_modules 14 | bower_components 15 | 16 | # Xcode 17 | 18 | xcuserdata 19 | -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Examples/IconExplorer/ios/IconExplorer.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Examples/IconExplorer/__tests__/App-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /scripts/ionicons.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash -e 2 | 3 | node bin/generate-icon node_modules/ionicons/dist/css/ionicons.css\ 4 | --prefix=.ion-\ 5 | --componentName=Ionicons\ 6 | --fontFamily=Ionicons\ 7 | --template=templates/separated-icon-set.tpl\ 8 | --glyphmap=glyphmaps/Ionicons.json\ 9 | > Ionicons.js 10 | cp node_modules/ionicons/dist/fonts/ionicons.ttf Fonts/Ionicons.ttf 11 | -------------------------------------------------------------------------------- /scripts/zocial.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash -e 2 | 3 | node bin/generate-icon bower_components/css-social-buttons/css/zocial.css\ 4 | --prefix=.zocial.\ 5 | --componentName=Zocial\ 6 | --fontFamily=zocial\ 7 | --template=templates/separated-icon-set.tpl\ 8 | --glyphmap=glyphmaps/Zocial.json\ 9 | > Zocial.js 10 | cp bower_components/css-social-buttons/css/zocial.ttf Fonts/Zocial.ttf 11 | -------------------------------------------------------------------------------- /scripts/fontisto.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash -e 2 | 3 | node bin/generate-icon node_modules/fontisto/css/fontisto/fontisto.css\ 4 | --prefix=.fi-\ 5 | --componentName=Fontisto\ 6 | --fontFamily=Fontisto\ 7 | --template=templates/separated-icon-set.tpl\ 8 | --glyphmap=glyphmaps/Fontisto.json\ 9 | > Fontisto.js 10 | cp node_modules/fontisto/fonts/fontisto/fontisto.ttf Fonts/Fontisto.ttf 11 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | export { default as createIconSet } from './lib/create-icon-set'; 2 | export { 3 | default as createMultiStyleIconSet, 4 | } from './lib/create-multi-style-icon-set'; 5 | export { 6 | default as createIconSetFromFontello, 7 | } from './lib/create-icon-set-from-fontello'; 8 | export { 9 | default as createIconSetFromIcoMoon, 10 | } from './lib/create-icon-set-from-icomoon'; 11 | -------------------------------------------------------------------------------- /Examples/IconExplorer/metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | module.exports = { 9 | transformer: { 10 | getTransformOptions: async () => ({ 11 | transform: { 12 | experimentalImportSupport: false, 13 | inlineRequires: false, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /scripts/fontawesome.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash -e 2 | 3 | node bin/generate-icon node_modules/font-awesome/css/font-awesome.css\ 4 | --prefix=.fa-\ 5 | --componentName=FontAwesome\ 6 | --fontFamily=FontAwesome\ 7 | --template=templates/separated-icon-set.tpl\ 8 | --glyphmap=glyphmaps/FontAwesome.json\ 9 | > FontAwesome.js 10 | cp node_modules/font-awesome/fonts/fontawesome-webfont.ttf Fonts/FontAwesome.ttf 11 | -------------------------------------------------------------------------------- /scripts/foundation.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash -e 2 | 3 | node bin/generate-icon bower_components/foundation-icon-fonts/foundation-icons.css\ 4 | --prefix=.fi-\ 5 | --componentName=Foundation\ 6 | --fontFamily=fontcustom\ 7 | --template=templates/separated-icon-set.tpl\ 8 | --glyphmap=glyphmaps/Foundation.json\ 9 | > Foundation.js 10 | cp bower_components/foundation-icon-fonts/foundation-icons.ttf Fonts/Foundation.ttf 11 | -------------------------------------------------------------------------------- /Examples/TabBarExample/iOS/TabBarExample/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | 10 | @interface AppDelegate : UIResponder 11 | 12 | @property (nonatomic, strong) UIWindow *window; 13 | 14 | @end 15 | -------------------------------------------------------------------------------- /scripts/materialicons.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash -e 2 | 3 | node bin/generate-material-icons node_modules/material-design-icons/iconfont/codepoints\ 4 | --componentName=MaterialIcons\ 5 | --fontFamily='Material Icons'\ 6 | --template=templates/separated-icon-set.tpl\ 7 | --glyphmap=glyphmaps/MaterialIcons.json\ 8 | > MaterialIcons.js 9 | cp node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf Fonts/MaterialIcons.ttf 10 | -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/IconExplorer/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "Facebook.CSSLayout": "2.0.1-pre", 4 | "Microsoft.NETCore.UniversalWindowsPlatform": "5.2.2" 5 | }, 6 | "frameworks": { 7 | "uap10.0": {} 8 | }, 9 | "runtimes": { 10 | "win10-arm": {}, 11 | "win10-arm-aot": {}, 12 | "win10-x86": {}, 13 | "win10-x86-aot": {}, 14 | "win10-x64": {}, 15 | "win10-x64-aot": {} 16 | } 17 | } -------------------------------------------------------------------------------- /scripts/simplelineicons.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash -e 2 | 3 | node bin/generate-icon bower_components/simple-line-icons/css/simple-line-icons.css\ 4 | --prefix=.icon-\ 5 | --componentName=SimpleLineIcons\ 6 | --fontFamily=simple-line-icons\ 7 | --template=templates/separated-icon-set.tpl\ 8 | --glyphmap=glyphmaps/SimpleLineIcons.json\ 9 | > SimpleLineIcons.js 10 | cp bower_components/simple-line-icons/fonts/Simple-Line-Icons.ttf Fonts/SimpleLineIcons.ttf 11 | -------------------------------------------------------------------------------- /scripts/materialcommunityicons.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash -e 2 | 3 | node bin/generate-icon node_modules/@mdi/font/css/materialdesignicons.css\ 4 | --prefix=.mdi-\ 5 | --componentName=MaterialCommunityIcons\ 6 | --fontFamily='Material Design Icons'\ 7 | --template=templates/separated-icon-set.tpl\ 8 | --glyphmap=glyphmaps/MaterialCommunityIcons.json\ 9 | > MaterialCommunityIcons.js 10 | cp node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf Fonts/MaterialCommunityIcons.ttf 11 | -------------------------------------------------------------------------------- /lib/create-icon-set-from-fontello.js: -------------------------------------------------------------------------------- 1 | import createIconSet from './create-icon-set'; 2 | 3 | export default function createIconSetFromFontello( 4 | config, 5 | fontFamilyArg, 6 | fontFile 7 | ) { 8 | const glyphMap = {}; 9 | config.glyphs.forEach(glyph => { 10 | glyphMap[glyph.css] = glyph.code; 11 | }); 12 | 13 | const fontFamily = fontFamilyArg || config.name || 'fontello'; 14 | 15 | return createIconSet(glyphMap, fontFamily, fontFile || `${fontFamily}.ttf`); 16 | } 17 | -------------------------------------------------------------------------------- /Examples/TabBarExample/iOS/TabBarExample/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | 10 | #import "AppDelegate.h" 11 | 12 | int main(int argc, char * argv[]) { 13 | @autoreleasepool { 14 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Examples/IconExplorer/ios/IconExplorer/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | #import 10 | 11 | @interface AppDelegate : UIResponder 12 | 13 | @property (nonatomic, strong) UIWindow *window; 14 | 15 | @end 16 | -------------------------------------------------------------------------------- /Examples/IconExplorer/ios/IconExplorer/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | 10 | #import "AppDelegate.h" 11 | 12 | int main(int argc, char * argv[]) { 13 | @autoreleasepool { 14 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/main/java/com/iconexplorer/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.iconexplorer; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "IconExplorer"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /scripts/octicons.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash -e 2 | 3 | TEMP_DIR=`mktemp -d -t rnvi` 4 | fontcustom compile node_modules/octicons/build/svg -o $TEMP_DIR -n Octicons -t css -h -A 5 | node bin/generate-icon $TEMP_DIR/Octicons.css\ 6 | --prefix=.icon-\ 7 | --componentName=Octicons\ 8 | --template=templates/separated-icon-set.tpl\ 9 | --glyphmap=glyphmaps/Octicons.json\ 10 | --fontFamily=Octicons\ 11 | > Octicons.js 12 | cp $TEMP_DIR/Octicons.ttf Fonts 13 | rm -rf $TEMP_DIR 14 | rm -rf .fontcustom-manifest.json 15 | -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /scripts/evilicons.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash -e 2 | 3 | TEMP_DIR=`mktemp -d -t rnvi` 4 | fontcustom compile node_modules/evil-icons/assets/icons -o $TEMP_DIR -n EvilIcons -t css -h 5 | node bin/generate-icon $TEMP_DIR/EvilIcons.css\ 6 | --prefix=.icon-ei-\ 7 | --componentName=EvilIcons\ 8 | --template=templates/separated-icon-set.tpl\ 9 | --glyphmap=glyphmaps/EvilIcons.json\ 10 | --fontFamily=EvilIcons\ 11 | > EvilIcons.js 12 | cp $TEMP_DIR/EvilIcons.ttf Fonts 13 | rm -rf $TEMP_DIR 14 | rm -rf .fontcustom-manifest.json 15 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-vector-icons", 3 | "main": "index.js", 4 | "version": "0.1.0", 5 | "homepage": "https://github.com/oblador/react-native-vector-icons", 6 | "authors": [ 7 | "Joel Arvidsson " 8 | ], 9 | "license": "MIT", 10 | "ignore": [ 11 | "**/.*", 12 | "node_modules", 13 | "bower_components", 14 | "test", 15 | "tests" 16 | ], 17 | "devDependencies": { 18 | "css-social-buttons": "~1.0.0", 19 | "foundation-icon-fonts": "*", 20 | "simple-line-icons": "2.4.1" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /scripts/antdesign.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | TEMP=$(mktemp -d -t rnvi) 4 | pushd ${TEMP} 5 | curl -o font.zip -L https://github.com/ant-design/ant-design/releases/download/resource/iconfont-3.x.zip 6 | unzip -j -d font font.zip 7 | popd 8 | 9 | node bin/generate-icon ${TEMP}/font/iconfont.css\ 10 | --prefix=.icon-\ 11 | --componentName=AntDesign\ 12 | --fontFamily=anticon\ 13 | --template=templates/separated-icon-set.tpl\ 14 | --glyphmap=glyphmaps/AntDesign.json\ 15 | > AntDesign.js 16 | 17 | mv ${TEMP}/font/iconfont.ttf Fonts/AntDesign.ttf 18 | 19 | rm -r ${TEMP} 20 | 21 | -------------------------------------------------------------------------------- /lib/create-icon-set-from-icomoon.js: -------------------------------------------------------------------------------- 1 | import createIconSet from './create-icon-set'; 2 | 3 | export default function createIconSetFromIcoMoon( 4 | config, 5 | fontFamilyArg, 6 | fontFile 7 | ) { 8 | const glyphMap = {}; 9 | config.icons.forEach(icon => { 10 | icon.properties.name.split(/\s*,\s*/g).forEach(name => { 11 | glyphMap[name] = icon.properties.code; 12 | }); 13 | }); 14 | 15 | const fontFamily = 16 | fontFamilyArg || config.preferences.fontPref.metadata.fontFamily; 17 | 18 | return createIconSet(glyphMap, fontFamily, fontFile || `${fontFamily}.ttf`); 19 | } 20 | -------------------------------------------------------------------------------- /Entypo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Entypo icon set component. 3 | * Usage: 4 | */ 5 | 6 | import createIconSet from './lib/create-icon-set'; 7 | import glyphMap from './glyphmaps/Entypo.json'; 8 | 9 | const iconSet = createIconSet(glyphMap, 'Entypo', 'Entypo.ttf'); 10 | 11 | export default iconSet; 12 | 13 | export const Button = iconSet.Button; 14 | export const TabBarItem = iconSet.TabBarItem; 15 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 16 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 17 | export const getImageSource = iconSet.getImageSource; 18 | 19 | -------------------------------------------------------------------------------- /Zocial.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Zocial icon set component. 3 | * Usage: 4 | */ 5 | 6 | import createIconSet from './lib/create-icon-set'; 7 | import glyphMap from './glyphmaps/Zocial.json'; 8 | 9 | const iconSet = createIconSet(glyphMap, 'zocial', 'Zocial.ttf'); 10 | 11 | export default iconSet; 12 | 13 | export const Button = iconSet.Button; 14 | export const TabBarItem = iconSet.TabBarItem; 15 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 16 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 17 | export const getImageSource = iconSet.getImageSource; 18 | 19 | -------------------------------------------------------------------------------- /scripts/build-flow.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash -e 2 | 3 | rm -rf AntDesign.js.flow Entypo.js.flow EvilIcons.js.flow Feather.js.flow \ 4 | FontAwesome.js.flow FontAwesome5.js.flow FontAwesome5Pro.js.flow \ 5 | Foundation.js.flow Ionicons.js.flow MaterialCommunityIcons.js.flow \ 6 | MaterialIcons.js.flow Octicons.js.flow SimpleLineIcons.js.flow \ 7 | Zocial.js.flow 8 | 9 | node bin/generate-flow AntDesign Entypo EvilIcons Feather FontAwesome \ 10 | FontAwesome5 FontAwesome5Pro Fontisto Foundation Ionicons \ 11 | MaterialCommunityIcons MaterialIcons Octicons SimpleLineIcons Zocial 12 | 13 | cp *.js.flow dist/ 14 | -------------------------------------------------------------------------------- /Feather.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Feather icon set component. 3 | * Usage: 4 | */ 5 | 6 | import createIconSet from './lib/create-icon-set'; 7 | import glyphMap from './glyphmaps/Feather.json'; 8 | 9 | const iconSet = createIconSet(glyphMap, 'Feather', 'Feather.ttf'); 10 | 11 | export default iconSet; 12 | 13 | export const Button = iconSet.Button; 14 | export const TabBarItem = iconSet.TabBarItem; 15 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 16 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 17 | export const getImageSource = iconSet.getImageSource; 18 | 19 | -------------------------------------------------------------------------------- /Fontisto.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Fontisto icon set component. 3 | * Usage: 4 | */ 5 | 6 | import createIconSet from './lib/create-icon-set'; 7 | import glyphMap from './glyphmaps/Fontisto.json'; 8 | 9 | const iconSet = createIconSet(glyphMap, 'Fontisto', 'Fontisto.ttf'); 10 | 11 | export default iconSet; 12 | 13 | export const Button = iconSet.Button; 14 | export const TabBarItem = iconSet.TabBarItem; 15 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 16 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 17 | export const getImageSource = iconSet.getImageSource; 18 | 19 | -------------------------------------------------------------------------------- /Ionicons.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Ionicons icon set component. 3 | * Usage: 4 | */ 5 | 6 | import createIconSet from './lib/create-icon-set'; 7 | import glyphMap from './glyphmaps/Ionicons.json'; 8 | 9 | const iconSet = createIconSet(glyphMap, 'Ionicons', 'Ionicons.ttf'); 10 | 11 | export default iconSet; 12 | 13 | export const Button = iconSet.Button; 14 | export const TabBarItem = iconSet.TabBarItem; 15 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 16 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 17 | export const getImageSource = iconSet.getImageSource; 18 | 19 | -------------------------------------------------------------------------------- /Octicons.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Octicons icon set component. 3 | * Usage: 4 | */ 5 | 6 | import createIconSet from './lib/create-icon-set'; 7 | import glyphMap from './glyphmaps/Octicons.json'; 8 | 9 | const iconSet = createIconSet(glyphMap, 'Octicons', 'Octicons.ttf'); 10 | 11 | export default iconSet; 12 | 13 | export const Button = iconSet.Button; 14 | export const TabBarItem = iconSet.TabBarItem; 15 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 16 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 17 | export const getImageSource = iconSet.getImageSource; 18 | 19 | -------------------------------------------------------------------------------- /scripts/entypo.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash -e 2 | 3 | TEMP_DIR=`mktemp -d -t rnvi` 4 | mkdir $TEMP_DIR/svg 5 | curl https://dl.dropboxusercontent.com/u/4339492/entypo.zip > $TEMP_DIR/entypo.zip 6 | unzip -j $TEMP_DIR/entypo.zip *.svg -x __MACOSX/* -d $TEMP_DIR/svg 7 | fontcustom compile $TEMP_DIR/svg -o $TEMP_DIR -n Entypo -t css -h 8 | node bin/generate-icon $TEMP_DIR/Entypo.css\ 9 | --componentName=Entypo\ 10 | --fontFamily=Entypo\ 11 | --template=templates/separated-icon-set.tpl\ 12 | --glyphmap=glyphmaps/Entypo.json\ 13 | > Entypo.js 14 | cp $TEMP_DIR/Entypo.ttf Fonts 15 | rm -rf $TEMP_DIR 16 | rm -rf .fontcustom-manifest.json 17 | -------------------------------------------------------------------------------- /AntDesign.js: -------------------------------------------------------------------------------- 1 | /** 2 | * AntDesign icon set component. 3 | * Usage: 4 | */ 5 | 6 | import createIconSet from './lib/create-icon-set'; 7 | import glyphMap from './glyphmaps/AntDesign.json'; 8 | 9 | const iconSet = createIconSet(glyphMap, 'anticon', 'AntDesign.ttf'); 10 | 11 | export default iconSet; 12 | 13 | export const Button = iconSet.Button; 14 | export const TabBarItem = iconSet.TabBarItem; 15 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 16 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 17 | export const getImageSource = iconSet.getImageSource; 18 | 19 | -------------------------------------------------------------------------------- /EvilIcons.js: -------------------------------------------------------------------------------- 1 | /** 2 | * EvilIcons icon set component. 3 | * Usage: 4 | */ 5 | 6 | import createIconSet from './lib/create-icon-set'; 7 | import glyphMap from './glyphmaps/EvilIcons.json'; 8 | 9 | const iconSet = createIconSet(glyphMap, 'EvilIcons', 'EvilIcons.ttf'); 10 | 11 | export default iconSet; 12 | 13 | export const Button = iconSet.Button; 14 | export const TabBarItem = iconSet.TabBarItem; 15 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 16 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 17 | export const getImageSource = iconSet.getImageSource; 18 | 19 | -------------------------------------------------------------------------------- /directory/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-vector-icons-directory", 3 | "version": "0.0.1", 4 | "private": true, 5 | "homepage": "https://oblador.github.io/react-native-vector-icons", 6 | "devDependencies": { 7 | "gh-pages": "^1.0.0", 8 | "react-scripts": "^0.8.4" 9 | }, 10 | "dependencies": { 11 | "lodash": "^4.14.0", 12 | "react": "^15.3.2", 13 | "react-dom": "^15.3.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "eject": "react-scripts eject", 19 | "deploy": "npm run build && gh-pages -d build" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Foundation.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Foundation icon set component. 3 | * Usage: 4 | */ 5 | 6 | import createIconSet from './lib/create-icon-set'; 7 | import glyphMap from './glyphmaps/Foundation.json'; 8 | 9 | const iconSet = createIconSet(glyphMap, 'fontcustom', 'Foundation.ttf'); 10 | 11 | export default iconSet; 12 | 13 | export const Button = iconSet.Button; 14 | export const TabBarItem = iconSet.TabBarItem; 15 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 16 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 17 | export const getImageSource = iconSet.getImageSource; 18 | 19 | -------------------------------------------------------------------------------- /scripts/build-icons.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash -e 2 | 3 | rm -rf {Fonts,AntDesign.js,Entypo.js,EvilIcons.js,FontAwesome.js,Fontisto.js,Foundation.js,Ionicons.js,MaterialIcons.js,MaterialCommunityIcons.js,Octicons.js,Zocial.js,SimpleLineIcons.js,glyphmaps} 4 | mkdir Fonts glyphmaps 5 | ./scripts/antdesign.sh 6 | ./scripts/entypo.sh 7 | ./scripts/evilicons.sh 8 | ./scripts/fontawesome.sh 9 | ./scripts/fontawesome5.sh 10 | ./scripts/fontisto.sh 11 | ./scripts/foundation.sh 12 | ./scripts/ionicons.sh 13 | ./scripts/materialicons.sh 14 | ./scripts/materialcommunityicons.sh 15 | ./scripts/octicons.sh 16 | ./scripts/zocial.sh 17 | ./scripts/simplelineicons.sh 18 | -------------------------------------------------------------------------------- /FontAwesome.js: -------------------------------------------------------------------------------- 1 | /** 2 | * FontAwesome icon set component. 3 | * Usage: 4 | */ 5 | 6 | import createIconSet from './lib/create-icon-set'; 7 | import glyphMap from './glyphmaps/FontAwesome.json'; 8 | 9 | const iconSet = createIconSet(glyphMap, 'FontAwesome', 'FontAwesome.ttf'); 10 | 11 | export default iconSet; 12 | 13 | export const Button = iconSet.Button; 14 | export const TabBarItem = iconSet.TabBarItem; 15 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 16 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 17 | export const getImageSource = iconSet.getImageSource; 18 | 19 | -------------------------------------------------------------------------------- /MaterialIcons.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MaterialIcons icon set component. 3 | * Usage: 4 | */ 5 | 6 | import createIconSet from './lib/create-icon-set'; 7 | import glyphMap from './glyphmaps/MaterialIcons.json'; 8 | 9 | const iconSet = createIconSet(glyphMap, 'Material Icons', 'MaterialIcons.ttf'); 10 | 11 | export default iconSet; 12 | 13 | export const Button = iconSet.Button; 14 | export const TabBarItem = iconSet.TabBarItem; 15 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 16 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 17 | export const getImageSource = iconSet.getImageSource; 18 | 19 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | 5 | --- 6 | 7 | **Is your feature request related to a problem? Please describe.** 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 9 | 10 | **Describe the solution you'd like** 11 | A clear and concise description of what you want to happen. 12 | 13 | **Describe alternatives you've considered** 14 | A clear and concise description of any alternative solutions or features you've considered. 15 | 16 | **Additional context** 17 | Add any other context or screenshots about the feature request here. 18 | -------------------------------------------------------------------------------- /bin/add-font-assets.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /* eslint-disable no-console */ 3 | 4 | const fs = require('fs'); 5 | const path = require('path'); 6 | 7 | /* eslint-disable import/no-dynamic-require */ 8 | const json = require(path.resolve('./package.json')); 9 | 10 | if (!json.rnpm) { 11 | json.rnpm = { 12 | assets: [], 13 | }; 14 | } else if (!json.rnpm.assets) { 15 | json.rnpm.assets = []; 16 | } 17 | 18 | if (json.rnpm.assets.indexOf('./assets/fonts') !== -1) process.exit(); 19 | 20 | json.rnpm.assets.push('./assets/fonts'); 21 | 22 | fs.writeFileSync( 23 | './package.json', 24 | `${JSON.stringify(json, null, 2)}\r\n`, 25 | 'utf8' 26 | ); 27 | -------------------------------------------------------------------------------- /SimpleLineIcons.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SimpleLineIcons icon set component. 3 | * Usage: 4 | */ 5 | 6 | import createIconSet from './lib/create-icon-set'; 7 | import glyphMap from './glyphmaps/SimpleLineIcons.json'; 8 | 9 | const iconSet = createIconSet(glyphMap, 'simple-line-icons', 'SimpleLineIcons.ttf'); 10 | 11 | export default iconSet; 12 | 13 | export const Button = iconSet.Button; 14 | export const TabBarItem = iconSet.TabBarItem; 15 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 16 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 17 | export const getImageSource = iconSet.getImageSource; 18 | 19 | -------------------------------------------------------------------------------- /templates/bundled-icon-set.tpl: -------------------------------------------------------------------------------- 1 | /** 2 | * ${componentName} icon set component. 3 | * Usage: <${componentName} name="icon-name" size={20} color="#4F8EF7" /> 4 | */ 5 | 6 | import createIconSet from 'react-native-vector-icons/lib/create-icon-set'; 7 | const glyphMap = ${glyphMap}; 8 | 9 | const iconSet = createIconSet(glyphMap, '${fontFamily}', '${componentName}.ttf'); 10 | 11 | export default iconSet; 12 | 13 | export const Button = iconSet.Button; 14 | export const TabBarItem = iconSet.TabBarItem; 15 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 16 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 17 | export const getImageSource = iconSet.getImageSource; 18 | -------------------------------------------------------------------------------- /Examples/IconExplorer/osx/IconExplorer/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import "RCTBridge.h" 12 | 13 | @interface AppDelegate : NSObject 14 | 15 | @property (strong, nonatomic) NSWindow *window; 16 | @property (nonatomic, readonly) RCTBridge *bridge; 17 | 18 | @end 19 | -------------------------------------------------------------------------------- /templates/separated-icon-set.tpl: -------------------------------------------------------------------------------- 1 | /** 2 | * ${componentName} icon set component. 3 | * Usage: <${componentName} name="icon-name" size={20} color="#4F8EF7" /> 4 | */ 5 | 6 | import createIconSet from './lib/create-icon-set'; 7 | import glyphMap from './glyphmaps/${componentName}.json'; 8 | 9 | const iconSet = createIconSet(glyphMap, '${fontFamily}', '${componentName}.ttf'); 10 | 11 | export default iconSet; 12 | 13 | export const Button = iconSet.Button; 14 | export const TabBarItem = iconSet.TabBarItem; 15 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 16 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 17 | export const getImageSource = iconSet.getImageSource; 18 | -------------------------------------------------------------------------------- /Examples/TabBarExample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "TabBarExample", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-native/local-cli/cli.js start", 7 | "test": "jest" 8 | }, 9 | "dependencies": { 10 | "prop-types": "^15.6.2", 11 | "react": "16.5.0", 12 | "react-native": "0.57.1", 13 | "react-native-vector-icons": "*" 14 | }, 15 | "devDependencies": { 16 | "@babel/runtime": "^7.1.2", 17 | "babel-jest": "23.6.0", 18 | "jest": "23.6.0", 19 | "metro-react-native-babel-preset": "0.47.0", 20 | "react-test-renderer": "16.5.0" 21 | }, 22 | "jest": { 23 | "preset": "react-native" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /MaterialCommunityIcons.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MaterialCommunityIcons icon set component. 3 | * Usage: 4 | */ 5 | 6 | import createIconSet from './lib/create-icon-set'; 7 | import glyphMap from './glyphmaps/MaterialCommunityIcons.json'; 8 | 9 | const iconSet = createIconSet(glyphMap, 'Material Design Icons', 'MaterialCommunityIcons.ttf'); 10 | 11 | export default iconSet; 12 | 13 | export const Button = iconSet.Button; 14 | export const TabBarItem = iconSet.TabBarItem; 15 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 16 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 17 | export const getImageSource = iconSet.getImageSource; 18 | 19 | -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /directory/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | react-native-vector-icons directory 7 | 8 | 9 |
10 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /lib/ensure-native-module-available.js: -------------------------------------------------------------------------------- 1 | import { Platform, NativeModules } from './react-native'; 2 | 3 | const NativeIconAPI = 4 | NativeModules.RNVectorIconsManager || NativeModules.RNVectorIconsModule; 5 | 6 | export default function ensureNativeModuleAvailable() { 7 | if (!NativeIconAPI) { 8 | if (Platform.OS === 'android') { 9 | throw new Error( 10 | 'RNVectorIconsModule not available, did you properly integrate the module? Try running `react-native link react-native-vector-icons` and recompiling.' 11 | ); 12 | } 13 | throw new Error( 14 | 'RNVectorIconsManager not available, did you add the library to your project and link with libRNVectorIcons.a? Try running `react-native link react-native-vector-icons` and recompiling.' 15 | ); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /FontAwesome5.js: -------------------------------------------------------------------------------- 1 | /** 2 | * FontAwesome5 icon set component. 3 | * Usage: 4 | */ 5 | 6 | import { createFA5iconSet } from './lib/create-icon-set-from-fontawesome5'; 7 | 8 | import glyphMap from './glyphmaps/FontAwesome5Free.json'; 9 | import metadata from './glyphmaps/FontAwesome5Free_meta.json'; 10 | 11 | export { FA5Style } from './lib/create-icon-set-from-fontawesome5'; 12 | 13 | const iconSet = createFA5iconSet(glyphMap, metadata, false); 14 | 15 | export default iconSet; 16 | 17 | export const Button = iconSet.Button; 18 | export const TabBarItem = iconSet.TabBarItem; 19 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 20 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 21 | export const getImageSource = iconSet.getImageSource; 22 | -------------------------------------------------------------------------------- /FontAwesome5Pro.js: -------------------------------------------------------------------------------- 1 | /** 2 | * FontAwesome5Pro icon set component. 3 | * Usage: 4 | */ 5 | 6 | import { createFA5iconSet } from './lib/create-icon-set-from-fontawesome5'; 7 | 8 | import glyphMap from './glyphmaps/FontAwesome5Pro.json'; 9 | import metadata from './glyphmaps/FontAwesome5Pro_meta.json'; 10 | 11 | export { FA5Style } from './lib/create-icon-set-from-fontawesome5'; 12 | 13 | const iconSet = createFA5iconSet(glyphMap, metadata, true); 14 | 15 | export default iconSet; 16 | 17 | export const Button = iconSet.Button; 18 | export const TabBarItem = iconSet.TabBarItem; 19 | export const TabBarItemIOS = iconSet.TabBarItemIOS; 20 | export const ToolbarAndroid = iconSet.ToolbarAndroid; 21 | export const getImageSource = iconSet.getImageSource; 22 | -------------------------------------------------------------------------------- /Examples/IconExplorer/ios/IconExplorer/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /Examples/IconExplorer/osx/IconExplorer/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/support.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Support 3 | about: Request some help with using this package 4 | 5 | --- 6 | 7 | 8 | - [ ] Review the documentation: https://github.com/oblador/react-native-vector-icons 9 | - [ ] Search for existing issues (including closed ones): https://github.com/oblador/react-native-vector-icons/issues 10 | 11 | 12 | ## Environment 13 | 14 | 15 | ## Description 16 | Describe your issue in detail. Include screenshots if needed. 17 | 18 | ## Demo 19 | You can use https://snack.expo.io/ to create a demo that can help users to better understand your problem. 20 | -------------------------------------------------------------------------------- /Examples/TabBarExample/iOS/TabBarExample/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /Examples/IconExplorer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "IconExplorer", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "react-native start", 7 | "test": "jest" 8 | }, 9 | "dependencies": { 10 | "ramda": "^0.26.1", 11 | "react": "16.8.6", 12 | "react-native": "0.60.5", 13 | "react-native-gesture-handler": "^1.3.0", 14 | "react-native-screens": "^1.0.0-alpha.23", 15 | "react-native-vector-icons": "*", 16 | "react-navigation": "^3.11.1" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "^7.5.5", 20 | "@babel/runtime": "^7.5.5", 21 | "babel-jest": "^24.9.0", 22 | "jest": "^24.9.0", 23 | "metro-react-native-babel-preset": "^0.56.0", 24 | "react-test-renderer": "16.8.6" 25 | }, 26 | "jest": { 27 | "preset": "react-native" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /RNVectorIcons.podspec: -------------------------------------------------------------------------------- 1 | require 'json' 2 | version = JSON.parse(File.read('package.json'))["version"] 3 | 4 | Pod::Spec.new do |s| 5 | 6 | s.name = "RNVectorIcons" 7 | s.version = version 8 | s.summary = "Customizable Icons for React Native with support for NavBar/TabBar, image source and full styling." 9 | s.homepage = "https://github.com/oblador/react-native-vector-icons" 10 | s.license = "MIT" 11 | s.author = { "Joel Arvidsson" => "joel@oblador.se" } 12 | s.platforms = { :ios => "9.0", :tvos => "9.0" } 13 | s.source = { :git => "https://github.com/oblador/react-native-vector-icons.git", :tag => "v#{s.version}" } 14 | s.source_files = 'RNVectorIconsManager/**/*.{h,m}' 15 | s.resources = "Fonts/*.ttf" 16 | s.preserve_paths = "**/*.js" 17 | s.dependency 'React' 18 | 19 | end 20 | -------------------------------------------------------------------------------- /Examples/IconExplorer/ios/IconExplorerTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /bin/generate-fontawesome5-metadata.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /* eslint-disable no-console */ 3 | 4 | const fs = require('fs'); 5 | const yargs = require('yargs'); 6 | 7 | const { argv } = yargs 8 | .usage('') 9 | .option('path', { 10 | alias: 'p', 11 | string: true, 12 | }) 13 | .option('output', { 14 | alias: 'o', 15 | string: true, 16 | }) 17 | .demandOption('path') 18 | .demandOption('output'); 19 | 20 | const path = `${argv.path}/svgs/`; 21 | 22 | const generatedJSON = {}; 23 | fs.readdirSync(path) 24 | .filter(file => fs.statSync(path + file).isDirectory()) 25 | .forEach(file => { 26 | const icons = fs.readdirSync(path + file); 27 | generatedJSON[file] = icons.map(icon => icon.split('.')[0]); 28 | }); 29 | 30 | fs.writeFileSync( 31 | argv.output, 32 | `${JSON.stringify(generatedJSON, null, 2)}\r\n`, 33 | 'utf8' 34 | ); 35 | -------------------------------------------------------------------------------- /Examples/TabBarExample/iOS/TabBarExampleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | repositories { 3 | jcenter() 4 | google() 5 | } 6 | 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:3.3.1' 9 | } 10 | } 11 | 12 | apply plugin: 'com.android.library' 13 | 14 | def safeExtGet(prop, fallback) { 15 | rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback 16 | } 17 | 18 | 19 | android { 20 | compileSdkVersion safeExtGet('compileSdkVersion', 26) 21 | 22 | defaultConfig { 23 | minSdkVersion safeExtGet('minSdkVersion', 16) 24 | targetSdkVersion safeExtGet('targetSdkVersion', 26) 25 | versionCode 1 26 | versionName "1.0" 27 | } 28 | lintOptions { 29 | abortOnError false 30 | } 31 | } 32 | 33 | repositories { 34 | mavenCentral() 35 | } 36 | 37 | dependencies { 38 | implementation "com.facebook.react:react-native:${safeExtGet('reactNativeVersion', '+')}" 39 | } 40 | -------------------------------------------------------------------------------- /Examples/IconExplorer/osx/IconExplorerTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /bin/generate-flow.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /* eslint-disable no-console */ 3 | 4 | const fs = require('fs'); 5 | const yargs = require('yargs'); 6 | 7 | const { argv } = yargs.usage('Usage: $0 [icons...]').help(); 8 | 9 | const icons = argv._; 10 | for (let i = 0; i < icons.length; i += 1) { 11 | const icon = icons[i]; 12 | let mapFile = icon; 13 | if (mapFile === 'FontAwesome5') { 14 | mapFile = 'FontAwesome5Free'; 15 | } 16 | 17 | const glyphmap = JSON.parse( 18 | fs.readFileSync(`glyphmaps/${mapFile}.json`, { encoding: 'utf8' }) 19 | ); 20 | const names = Object.keys(glyphmap).join("' | '"); 21 | 22 | const iconClass = `/** 23 | * @flow strict 24 | */ 25 | 26 | import type { Icon } from './index'; 27 | 28 | export type ${icon}Glyphs = '${names}'; 29 | 30 | declare export default Class>; 31 | `; 32 | fs.writeFileSync(`${icon}.js.flow`, iconClass); 33 | } 34 | -------------------------------------------------------------------------------- /Examples/IconExplorer/ios/IconExplorer-tvOSTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /Examples/IconExplorer/osx/IconExplorer/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import "AppDelegate.h" 12 | 13 | int main(int argc, char * argv[]) { 14 | @autoreleasepool { 15 | NSApplication * application = [NSApplication sharedApplication]; 16 | NSMenu *mainMenu = [[NSMenu alloc] initWithTitle:@"IconExplorer"]; 17 | [NSApp setMainMenu:mainMenu]; 18 | AppDelegate * appDelegate = [[AppDelegate alloc] init]; 19 | [application setDelegate:appDelegate]; 20 | [application run]; 21 | return EXIT_SUCCESS; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /BUILDING_FEATHER.md: -------------------------------------------------------------------------------- 1 | # Generating Feather icon set 2 | 3 | ### To build Feather Icon Set is necessary: 4 | 5 | - [Inkscape](https://inkscape.org/) 6 | - [GNU Parallel](https://www.gnu.org/software/parallel/) 7 | - [Font Custom](https://github.com/FontCustom/fontcustom) 8 | - [Xvfb](https://www.x.org/releases/X11R7.6/doc/man/man1/Xvfb.1.xhtml) - Optional, but highly recommended 9 | 10 | 1. Go to [Font Custom](https://github.com/FontCustom/fontcustom) and follow the installation instructions 11 | 2. Generate the icon set with `yarn build-feather` 12 | 13 | Before we can build icon set, is necessary pre-process the icons. This task will be done using Inkscape with help of Parallel. 14 | If you have Xvfb installed, you will see a progress-bar on console, if not, for every single icon one inkscape window will be launched to adjust svg. 15 | 16 | During the building stage, a folder named Feather will be created. 17 | It will be removed at the end of build. 18 | -------------------------------------------------------------------------------- /Examples/IconExplorer/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useAndroidX=true 21 | android.enableJetifier=true 22 | -------------------------------------------------------------------------------- /Examples/TabBarExample/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | yarn-error.log 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | *.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | */fastlane/report.xml 52 | */fastlane/Preview.html 53 | */fastlane/screenshots 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | 5 | --- 6 | 7 | 8 | - [ ] Review the documentation: https://github.com/oblador/react-native-vector-icons 9 | - [ ] Search for existing issues (including closed issues): https://github.com/oblador/react-native-vector-icons/issues 10 | 11 | 12 | ## Environment 13 | 14 | 15 | ## Description 16 | Describe your issue in detail. Include screenshots if needed. 17 | 18 | 19 | ## Reproducible Demo 20 | Let us know how to reproduce the issue. Include a code sample, share a project, or share an app that reproduces the issue using https://snack.expo.io/. Please follow the guidelines for providing a MCVE: https://stackoverflow.com/help/mcve 21 | -------------------------------------------------------------------------------- /Examples/IconExplorer/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | yarn-error.log 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | *.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | */fastlane/report.xml 52 | */fastlane/Preview.html 53 | */fastlane/screenshots 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | # CocoaPods 59 | /ios/Pods/ 60 | -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/.gitignore: -------------------------------------------------------------------------------- 1 | *AppPackages* 2 | *BundleArtifacts* 3 | *ReactAssets* 4 | 5 | #OS junk files 6 | [Tt]humbs.db 7 | *.DS_Store 8 | 9 | #Visual Studio files 10 | *.[Oo]bj 11 | *.user 12 | *.aps 13 | *.pch 14 | *.vspscc 15 | *.vssscc 16 | *_i.c 17 | *_p.c 18 | *.ncb 19 | *.suo 20 | *.tlb 21 | *.tlh 22 | *.bak 23 | *.[Cc]ache 24 | *.ilk 25 | *.log 26 | *.lib 27 | *.sbr 28 | *.sdf 29 | *.opensdf 30 | *.opendb 31 | *.unsuccessfulbuild 32 | ipch/ 33 | [Oo]bj/ 34 | [Bb]in 35 | [Dd]ebug*/ 36 | [Rr]elease*/ 37 | Ankh.NoLoad 38 | 39 | #MonoDevelop 40 | *.pidb 41 | *.userprefs 42 | 43 | #Tooling 44 | _ReSharper*/ 45 | *.resharper 46 | [Tt]est[Rr]esult* 47 | *.sass-cache 48 | 49 | #Project files 50 | [Bb]uild/ 51 | 52 | #Subversion files 53 | .svn 54 | 55 | # Office Temp Files 56 | ~$* 57 | 58 | # vim Temp Files 59 | *~ 60 | 61 | #NuGet 62 | packages/ 63 | *.nupkg 64 | 65 | #ncrunch 66 | *ncrunch* 67 | *crunch*.local.xml 68 | 69 | # visual studio database projects 70 | *.dbmdl 71 | 72 | #Test files 73 | *.testsettings 74 | 75 | #Other files 76 | *.DotSettings 77 | .vs/ 78 | *project.lock.json 79 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "airbnb", 4 | "prettier", 5 | "prettier/flowtype", 6 | "prettier/react" 7 | ], 8 | "plugins": [ 9 | "prettier" 10 | ], 11 | "parser": "babel-eslint", 12 | "settings": { 13 | "import/ignore": [ 14 | "lib/react-native.js" 15 | ] 16 | }, 17 | "rules": { 18 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], 19 | "react/require-default-props": [0], 20 | "react/static-property-placement": [0], 21 | "react/jsx-props-no-spreading": [0], 22 | "react/state-in-constructor": [0], 23 | "import/no-extraneous-dependencies": [0], 24 | "import/no-unresolved": [2, { ignore: ['^react(-native)?$'] }], 25 | "import/extensions": [2, { "js": "never", "json": "always" }], 26 | "arrow-parens": ["error", "as-needed"], 27 | "comma-dangle": ["error", { 28 | "arrays": "always-multiline", 29 | "objects": "always-multiline", 30 | "imports": "always-multiline", 31 | "exports": "always-multiline", 32 | "functions": "ignore", 33 | }], 34 | "prettier/prettier": ["error"] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Joel Arvidsson 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /android/src/main/java/com/oblador/vectoricons/VectorIconsPackage.java: -------------------------------------------------------------------------------- 1 | package com.oblador.vectoricons; 2 | 3 | import com.facebook.react.ReactPackage; 4 | import com.facebook.react.bridge.JavaScriptModule; 5 | import com.facebook.react.bridge.NativeModule; 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.react.uimanager.ViewManager; 8 | 9 | import java.util.ArrayList; 10 | import java.util.Arrays; 11 | import java.util.Collections; 12 | import java.util.List; 13 | 14 | public class VectorIconsPackage implements ReactPackage { 15 | 16 | public VectorIconsPackage() {} 17 | 18 | @Override 19 | public List createNativeModules( 20 | ReactApplicationContext reactContext) { 21 | List modules = new ArrayList<>(); 22 | modules.add(new VectorIconsModule(reactContext)); 23 | return modules; 24 | } 25 | 26 | public List> createJSModules() { 27 | return Collections.emptyList(); 28 | } 29 | 30 | @Override 31 | public List createViewManagers(ReactApplicationContext reactContext) { 32 | return Collections.emptyList(); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Examples/IconExplorer/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "28.0.3" 6 | minSdkVersion = 16 7 | compileSdkVersion = 28 8 | targetSdkVersion = 28 9 | supportLibVersion = "28.0.0" 10 | } 11 | repositories { 12 | google() 13 | jcenter() 14 | } 15 | dependencies { 16 | classpath("com.android.tools.build:gradle:3.4.1") 17 | 18 | // NOTE: Do not place your application dependencies here; they belong 19 | // in the individual module build.gradle files 20 | } 21 | } 22 | 23 | allprojects { 24 | repositories { 25 | mavenLocal() 26 | maven { 27 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 28 | url("$rootDir/../node_modules/react-native/android") 29 | } 30 | maven { 31 | // Android JSC is installed from npm 32 | url("$rootDir/../node_modules/jsc-android/dist") 33 | } 34 | 35 | google() 36 | jcenter() 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/IconExplorer/Properties/AssemblyInfo.cs: -------------------------------------------------------------------------------- 1 | using System.Reflection; 2 | using System.Runtime.CompilerServices; 3 | using System.Runtime.InteropServices; 4 | 5 | // General Information about an assembly is controlled through the following 6 | // set of attributes. Change these attribute values to modify the information 7 | // associated with an assembly. 8 | [assembly: AssemblyTitle("IconExplorer")] 9 | [assembly: AssemblyDescription("")] 10 | [assembly: AssemblyConfiguration("")] 11 | [assembly: AssemblyCompany("")] 12 | [assembly: AssemblyProduct("IconExplorer")] 13 | [assembly: AssemblyCopyright("Copyright © 2016")] 14 | [assembly: AssemblyTrademark("")] 15 | [assembly: AssemblyCulture("")] 16 | 17 | // Version information for an assembly consists of the following four values: 18 | // 19 | // Major Version 20 | // Minor Version 21 | // Build Number 22 | // Revision 23 | // 24 | // You can specify all the values or you can default the Build and Revision Numbers 25 | // by using the '*' as shown below: 26 | // [assembly: AssemblyVersion("1.0.*")] 27 | [assembly: AssemblyVersion("1.0.0.0")] 28 | [assembly: AssemblyFileVersion("1.0.0.0")] 29 | [assembly: ComVisible(false)] -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/IconExplorer/MainPage.cs: -------------------------------------------------------------------------------- 1 | using ReactNative; 2 | using ReactNative.Modules.Core; 3 | using ReactNative.Shell; 4 | using System.Collections.Generic; 5 | 6 | namespace IconExplorer 7 | { 8 | class MainPage : ReactPage 9 | { 10 | public override string MainComponentName 11 | { 12 | get 13 | { 14 | return "IconExplorer"; 15 | } 16 | } 17 | 18 | #if BUNDLE 19 | public override string JavaScriptBundleFile 20 | { 21 | get 22 | { 23 | return "ms-appx:///ReactAssets/index.windows.bundle"; 24 | } 25 | } 26 | #endif 27 | 28 | public override List Packages 29 | { 30 | get 31 | { 32 | return new List 33 | { 34 | new MainReactPackage(), 35 | }; 36 | } 37 | } 38 | 39 | public override bool UseDeveloperSupport 40 | { 41 | get 42 | { 43 | #if !BUNDLE || DEBUG 44 | return true; 45 | #else 46 | return false; 47 | #endif 48 | } 49 | } 50 | } 51 | 52 | } 53 | -------------------------------------------------------------------------------- /RNVectorIconsManager/RNVectorIconsManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RNVectorIconsManager.h 3 | // RNVectorIconsManager 4 | // 5 | // Created by Joel Arvidsson on 2015-05-29. 6 | // Copyright (c) 2015 Joel Arvidsson. All rights reserved. 7 | // 8 | 9 | #if __has_include() 10 | #import 11 | #else // Compatibility for RN version < 0.40 12 | #import "RCTBridgeModule.h" 13 | #endif 14 | #if __has_include() 15 | #import 16 | #else // Compatibility for RN version < 0.40 17 | #import "RCTLog.h" 18 | #endif 19 | 20 | @interface RNVectorIconsManager : NSObject 21 | 22 | - (NSString *)hexStringFromColor:(UIColor *)color; 23 | - (NSString *)generateFilePath:(NSString *)glyph withFontName:(NSString *)fontName 24 | withFontSize:(CGFloat)fontSize 25 | withColor:(UIColor *)color 26 | withExtraIdentifier:(NSString *)identifier; 27 | - (BOOL)createAndSaveGlyphImage:(NSString *)glyph withFont:(UIFont *)font 28 | withFilePath:(NSString *)filePath 29 | withColor:(UIColor *)color; 30 | 31 | @end 32 | -------------------------------------------------------------------------------- /Examples/IconExplorer/osx/IconExplorer/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ATSApplicationFontsPath 6 | Fonts 7 | CFBundleDevelopmentRegion 8 | en 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIconFile 12 | 13 | CFBundleIdentifier 14 | $(PRODUCT_BUNDLE_IDENTIFIER) 15 | CFBundleInfoDictionaryVersion 16 | 6.0 17 | CFBundleName 18 | $(PRODUCT_NAME) 19 | CFBundlePackageType 20 | APPL 21 | CFBundleShortVersionString 22 | 1.0 23 | CFBundleSignature 24 | ???? 25 | CFBundleVersion 26 | 1 27 | LSMinimumSystemVersion 28 | $(MACOSX_DEPLOYMENT_TARGET) 29 | NSHumanReadableCopyright 30 | Copyright © 2015 31 | NSMainNibFile 32 | MainMenu 33 | NSPrincipalClass 34 | NSApplication 35 | NSAppTransportSecurity 36 | 37 | NSAllowsArbitraryLoads 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/IconExplorer/Properties/Default.rd.xml: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Examples/TabBarExample/iOS/TabBarExample/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import "AppDelegate.h" 9 | 10 | #import 11 | #import 12 | 13 | @implementation AppDelegate 14 | 15 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 16 | { 17 | NSURL *jsCodeLocation; 18 | 19 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 20 | 21 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 22 | moduleName:@"TabBarExample" 23 | initialProperties:nil 24 | launchOptions:launchOptions]; 25 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 26 | 27 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 28 | UIViewController *rootViewController = [UIViewController new]; 29 | rootViewController.view = rootView; 30 | self.window.rootViewController = rootViewController; 31 | [self.window makeKeyAndVisible]; 32 | return YES; 33 | } 34 | 35 | @end 36 | -------------------------------------------------------------------------------- /bin/generate-icon.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /* eslint-disable no-console */ 3 | 4 | const _ = require('lodash'); 5 | const fs = require('fs'); 6 | const path = require('path'); 7 | const yargs = require('yargs'); 8 | const generateIconSetFromCss = require('../lib/generate-icon-set-from-css'); 9 | 10 | const { argv } = yargs 11 | .usage( 12 | 'Usage: $0 [options] path/to/styles.css \nFor default template please provide --componentName and --fontFamily' 13 | ) 14 | .demand(1) 15 | .default('p', '.icon-') 16 | .describe('p', 'CSS selector prefix') 17 | .alias('p', 'prefix') 18 | .default('t', path.resolve(__dirname, '..', 'templates/bundled-icon-set.tpl')) 19 | .describe('t', 'Template in lodash format') 20 | .alias('t', 'template') 21 | .describe('o', 'Save output to file, defaults to STDOUT') 22 | .alias('o', 'output') 23 | .describe('g', 'Save glyphmap JSON to file') 24 | .alias('g', 'glyphmap'); 25 | 26 | let template; 27 | if (argv.template) { 28 | template = fs.readFileSync(argv.template, { encoding: 'utf8' }); 29 | } 30 | 31 | const data = _.omit( 32 | argv, 33 | '_ $0 o output p prefix t template g glyphmap'.split(' ') 34 | ); 35 | 36 | const content = generateIconSetFromCss(argv._, argv.prefix, template, data); 37 | if (argv.output) { 38 | fs.writeFileSync(argv.output, content); 39 | } else { 40 | console.log(content); 41 | } 42 | 43 | if (argv.glyphmap) { 44 | fs.writeFileSync(argv.glyphmap, generateIconSetFromCss(argv._, argv.prefix)); 45 | } 46 | -------------------------------------------------------------------------------- /Examples/IconExplorer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry, StyleSheet } from 'react-native'; 3 | import { createAppContainer, createStackNavigator } from 'react-navigation'; 4 | 5 | import IconSetList from './IconSetList'; 6 | import IconList from './IconList'; 7 | 8 | const styles = StyleSheet.create({ 9 | header: { 10 | backgroundColor: 'white', 11 | }, 12 | }); 13 | 14 | class IconListScreen extends React.Component { 15 | static navigationOptions = ({ navigation }) => ({ 16 | title: navigation.state.params.title, 17 | headerStyle: styles.header, 18 | }); 19 | 20 | render() { 21 | const { iconSet } = this.props.navigation.state.params; 22 | 23 | return ; 24 | } 25 | } 26 | 27 | class IconExplorer extends React.Component { 28 | static navigationOptions = { 29 | title: 'Icon Explorer', 30 | headerStyle: styles.header, 31 | }; 32 | 33 | render() { 34 | const { navigate } = this.props.navigation; 35 | return ( 36 | 43 | ); 44 | } 45 | } 46 | 47 | const AppNavigator = createStackNavigator({ 48 | IconExplorer: { screen: IconExplorer }, 49 | IconSet: { screen: IconListScreen }, 50 | }); 51 | 52 | const App = createAppContainer(AppNavigator); 53 | 54 | AppRegistry.registerComponent('IconExplorer', () => App); 55 | -------------------------------------------------------------------------------- /Examples/IconExplorer/osx/IconExplorerTests/IconExplorerTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import 12 | 13 | #import "RCTLog.h" 14 | #import "RCTRootView.h" 15 | 16 | 17 | @interface IconExplorerTests : XCTestCase 18 | 19 | @end 20 | 21 | 22 | @implementation IconExplorerTests 23 | 24 | - (void)setUp { 25 | [super setUp]; 26 | // Put setup code here. This method is called before the invocation of each test method in the class. 27 | } 28 | 29 | - (void)tearDown { 30 | // Put teardown code here. This method is called after the invocation of each test method in the class. 31 | [super tearDown]; 32 | } 33 | 34 | - (void)testExample { 35 | NSOperatingSystemVersion version = [NSProcessInfo processInfo].operatingSystemVersion; 36 | RCTAssert((version.majorVersion == 10 && version.minorVersion >= 10), @"Tests should be run on OSX 10.10+, found %zd.%zd.%zd", version.majorVersion, version.minorVersion, version.patchVersion); 37 | } 38 | 39 | - (void)testPerformanceExample { 40 | // This is an example of a performance test case. 41 | [self measureBlock:^{ 42 | // Put the code you want to measure the time of here. 43 | }]; 44 | } 45 | 46 | @end 47 | -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.iconexplorer", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.iconexplorer", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Thank for taking the time to check out the repo and be willing to contribute! 4 | 5 | If you have found an issue or would like to request a new feature, simply create a new issue. Be sure to fill out as much information as possible. 6 | 7 | If this is your first open source contribution, please take a look at [this](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) guide. 8 | 9 | ## Reporting Bugs & Feature Requests 10 | 11 | If you would like to submit a feature request or report a bug, we encourage you to first look through the [issues](https://github.com/react-native-vector-icons/loki/issues) and [pull requests](https://github.com/oblador/react-native-vector-icons/pulls) before filing a new issue. 12 | 13 | ## Submitting a Pull Request 14 | 15 | If you wish to submit a pull request for a new feature or issue, you should start by forking this repository first. This should get you setup on your local machine: 16 | 17 | ### Setup 18 | 19 | - Install [Node.js](https://nodejs.org/) if you have not already. (_We suggest you to use node v6.x.x_) 20 | - Fork the repo 21 | - `git clone https://github.com/*yourusername*/react-native-vector-icons.git && cd react-native-vector-icons` 22 | - `yarn install` OR `npm install` 23 | - `npm test` 24 | - Optionally `brew install fontcustom && npm run build` if you've updated any icon sets. 25 | 26 | One you have done this, create a new branch with a name that loosely describes the issue on which you will be working. Once you think you have the addressed the issue in question, submit a pull request to the `master` branch. 27 | -------------------------------------------------------------------------------- /Examples/IconExplorer/ios/IconExplorer/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import "AppDelegate.h" 9 | 10 | #import 11 | #import 12 | #import 13 | 14 | @implementation AppDelegate 15 | 16 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 17 | { 18 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 19 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge 20 | moduleName:@"IconExplorer" 21 | initialProperties:nil]; 22 | 23 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 24 | 25 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 26 | UIViewController *rootViewController = [UIViewController new]; 27 | rootViewController.view = rootView; 28 | self.window.rootViewController = rootViewController; 29 | [self.window makeKeyAndVisible]; 30 | return YES; 31 | } 32 | 33 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 34 | { 35 | #if DEBUG 36 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 37 | #else 38 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 39 | #endif 40 | } 41 | 42 | @end 43 | -------------------------------------------------------------------------------- /Examples/IconExplorer/android/app/src/main/java/com/iconexplorer/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.iconexplorer; 2 | 3 | import android.app.Application; 4 | import android.util.Log; 5 | 6 | import com.facebook.react.PackageList; 7 | import com.facebook.hermes.reactexecutor.HermesExecutorFactory; 8 | import com.facebook.react.bridge.JavaScriptExecutorFactory; 9 | import com.facebook.react.ReactApplication; 10 | import com.facebook.react.ReactNativeHost; 11 | import com.facebook.react.ReactPackage; 12 | import com.facebook.soloader.SoLoader; 13 | 14 | import java.util.List; 15 | 16 | public class MainApplication extends Application implements ReactApplication { 17 | 18 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 19 | @Override 20 | public boolean getUseDeveloperSupport() { 21 | return BuildConfig.DEBUG; 22 | } 23 | 24 | @Override 25 | protected List getPackages() { 26 | @SuppressWarnings("UnnecessaryLocalVariable") 27 | List packages = new PackageList(this).getPackages(); 28 | // Packages that cannot be autolinked yet can be added manually here, for example: 29 | // packages.add(new MyReactNativePackage()); 30 | return packages; 31 | } 32 | 33 | @Override 34 | protected String getJSMainModuleName() { 35 | return "index"; 36 | } 37 | }; 38 | 39 | @Override 40 | public ReactNativeHost getReactNativeHost() { 41 | return mReactNativeHost; 42 | } 43 | 44 | @Override 45 | public void onCreate() { 46 | super.onCreate(); 47 | SoLoader.init(this, /* native exopackage */ false); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /Examples/IconExplorer/ios/IconExplorer-tvOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | NSAppTransportSecurity 26 | 27 | NSExceptionDomains 28 | 29 | localhost 30 | 31 | NSExceptionAllowsInsecureHTTPLoads 32 | 33 | 34 | 35 | 36 | NSLocationWhenInUseUsageDescription 37 | 38 | UILaunchStoryboardName 39 | LaunchScreen 40 | UIRequiredDeviceCapabilities 41 | 42 | armv7 43 | 44 | UISupportedInterfaceOrientations 45 | 46 | UIInterfaceOrientationPortrait 47 | UIInterfaceOrientationLandscapeLeft 48 | UIInterfaceOrientationLandscapeRight 49 | 50 | UIViewControllerBasedStatusBarAppearance 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /RNVectorIcons.xcodeproj/project.xcworkspace/xcshareddata/RNVectorIcons.xccheckout: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDESourceControlProjectFavoriteDictionaryKey 6 | 7 | IDESourceControlProjectIdentifier 8 | 74A596B3-C045-4AF3-B00F-76B0B71BDDBF 9 | IDESourceControlProjectName 10 | RNVectorIcons 11 | IDESourceControlProjectOriginsDictionary 12 | 13 | A1A2C29701292F28F728A71971FE2C46E2332102 14 | https://github.com/oblador/react-native-vector-icons.git 15 | 16 | IDESourceControlProjectPath 17 | RNVectorIcons.xcodeproj 18 | IDESourceControlProjectRelativeInstallPathDictionary 19 | 20 | A1A2C29701292F28F728A71971FE2C46E2332102 21 | ../.. 22 | 23 | IDESourceControlProjectURL 24 | https://github.com/oblador/react-native-vector-icons.git 25 | IDESourceControlProjectVersion 26 | 111 27 | IDESourceControlProjectWCCIdentifier 28 | A1A2C29701292F28F728A71971FE2C46E2332102 29 | IDESourceControlProjectWCConfigurations 30 | 31 | 32 | IDESourceControlRepositoryExtensionIdentifierKey 33 | public.vcs.git 34 | IDESourceControlWCCIdentifierKey 35 | A1A2C29701292F28F728A71971FE2C46E2332102 36 | IDESourceControlWCCName 37 | react-native-vector-icons 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /glyphmaps/EvilIcons.json: -------------------------------------------------------------------------------- 1 | { 2 | "archive": 61696, 3 | "arrow-down": 61697, 4 | "arrow-left": 61698, 5 | "arrow-right": 61699, 6 | "arrow-up": 61700, 7 | "bell": 61701, 8 | "calendar": 61702, 9 | "camera": 61703, 10 | "cart": 61704, 11 | "chart": 61705, 12 | "check": 61706, 13 | "chevron-down": 61707, 14 | "chevron-left": 61708, 15 | "chevron-right": 61709, 16 | "chevron-up": 61710, 17 | "clock": 61711, 18 | "close": 61712, 19 | "close-o": 61713, 20 | "comment": 61714, 21 | "credit-card": 61715, 22 | "envelope": 61716, 23 | "exclamation": 61717, 24 | "external-link": 61718, 25 | "eye": 61719, 26 | "gear": 61720, 27 | "heart": 61721, 28 | "image": 61722, 29 | "like": 61723, 30 | "link": 61724, 31 | "location": 61725, 32 | "lock": 61726, 33 | "minus": 61727, 34 | "navicon": 61728, 35 | "paperclip": 61729, 36 | "pencil": 61730, 37 | "play": 61731, 38 | "plus": 61732, 39 | "pointer": 61733, 40 | "question": 61734, 41 | "redo": 61735, 42 | "refresh": 61736, 43 | "retweet": 61737, 44 | "sc-facebook": 61738, 45 | "sc-github": 61739, 46 | "sc-google-plus": 61740, 47 | "sc-instagram": 61741, 48 | "sc-linkedin": 61742, 49 | "sc-odnoklassniki": 61743, 50 | "sc-pinterest": 61744, 51 | "sc-skype": 61745, 52 | "sc-soundcloud": 61746, 53 | "sc-telegram": 61747, 54 | "sc-tumblr": 61748, 55 | "sc-twitter": 61749, 56 | "sc-vimeo": 61750, 57 | "sc-vk": 61751, 58 | "sc-youtube": 61752, 59 | "search": 61753, 60 | "share-apple": 61754, 61 | "share-google": 61755, 62 | "spinner": 61756, 63 | "spinner-2": 61757, 64 | "spinner-3": 61758, 65 | "star": 61759, 66 | "tag": 61760, 67 | "trash": 61761, 68 | "trophy": 61762, 69 | "undo": 61763, 70 | "unlock": 61764, 71 | "user": 61765 72 | } -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/IconExplorer/Package.appxmanifest: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 13 | 14 | 15 | 16 | 17 | IconExplorer 18 | React Native for UWP 19 | Assets\StoreLogo.png 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 34 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /scripts/fontawesome5.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | echo "Please enter your FontAwesome5 npm token:" 4 | 5 | read fa5_token 6 | 7 | echo "Setting up npm config" 8 | 9 | npm config set "@fortawesome:registry" https://npm.fontawesome.com/ 10 | npm config set "//npm.fontawesome.com/:_authToken" ${fa5_token} 11 | 12 | echo "Creating temporary folder" 13 | 14 | TEMP_DIR=`mktemp -d -t rnvi` 15 | echo "Created folder $TEMP_DIR" 16 | pushd ${TEMP_DIR} 17 | 18 | echo "Downloading FontAwesome5" 19 | 20 | ARCHIVE=$(npm pack @fortawesome/fontawesome-free --silent) 21 | tar -xzf ${ARCHIVE} 22 | mv package free 23 | 24 | ARCHIVE=$(npm pack @fortawesome/fontawesome-pro --silent) 25 | tar -xzf ${ARCHIVE} 26 | mv package pro 27 | 28 | popd 29 | 30 | echo "Creating glyphmaps" 31 | 32 | node ./bin/generate-icon \ 33 | ${TEMP_DIR}/free/css/all.css -g glyphmaps/FontAwesome5Free.json \ 34 | --componentName FontAwesome5 --fontFamily fontawesome5 -p .fa- > /dev/null 35 | node ./bin/generate-icon \ 36 | ${TEMP_DIR}/pro/css/all.css -g glyphmaps/FontAwesome5Pro.json \ 37 | --componentName FontAwesome5 --fontFamily fontawesome5 -p .fa- > /dev/null 38 | 39 | echo "Generating font metadata" 40 | 41 | node ./bin/generate-fontawesome5-metadata \ 42 | --path ${TEMP_DIR}/free \ 43 | --output glyphmaps/FontAwesome5Free_meta.json 44 | 45 | node ./bin/generate-fontawesome5-metadata \ 46 | --path ${TEMP_DIR}/pro \ 47 | --output glyphmaps/FontAwesome5Pro_meta.json 48 | 49 | echo "Copying font files" 50 | 51 | cp ${TEMP_DIR}/free/webfonts/fa-brands-400.ttf Fonts/FontAwesome5_Brands.ttf 52 | cp ${TEMP_DIR}/free/webfonts/fa-regular-400.ttf Fonts/FontAwesome5_Regular.ttf 53 | cp ${TEMP_DIR}/free/webfonts/fa-solid-900.ttf Fonts/FontAwesome5_Solid.ttf 54 | 55 | echo "Removing temporary files" 56 | 57 | rm -r ${TEMP_DIR} 58 | 59 | echo "Done" 60 | -------------------------------------------------------------------------------- /RNIMigration.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontAwesome from 'react-native-vector-icons/FontAwesome'; 4 | import Foundation from 'react-native-vector-icons/Foundation'; 5 | import Ionicons from 'react-native-vector-icons/Ionicons'; 6 | import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; 7 | import Zocial from 'react-native-vector-icons/Zocial'; 8 | import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'; 9 | 10 | const ICON_SET_MAP = { 11 | fontawesome: FontAwesome, 12 | foundation: Foundation, 13 | ion: Ionicons, 14 | material: MaterialIcons, 15 | zocial: Zocial, 16 | simpleline: SimpleLineIcons, 17 | }; 18 | 19 | // This is a composition is a drop in replacement for users migrating from the 20 | // react-native-icons module. Please don't use this component for new apps/views. 21 | export default class Icon extends PureComponent { 22 | static propTypes = { 23 | name: PropTypes.string.isRequired, 24 | size: PropTypes.number, 25 | color: PropTypes.string, 26 | }; 27 | 28 | setNativeProps(nativeProps) { 29 | if (this.iconRef) { 30 | this.iconRef.setNativeProps(nativeProps); 31 | } 32 | } 33 | 34 | iconRef = null; 35 | 36 | handleComponentRef = ref => { 37 | this.iconRef = ref; 38 | }; 39 | 40 | render() { 41 | const nameParts = this.props.name.split('|'); 42 | const setName = nameParts[0]; 43 | const name = nameParts[1]; 44 | 45 | const IconSet = ICON_SET_MAP[setName]; 46 | if (!IconSet) { 47 | throw new Error(`Invalid icon set "${setName}"`); 48 | } 49 | 50 | return ( 51 | 57 | ); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /bin/generate-material-icons.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /* eslint-disable no-console */ 3 | 4 | const _ = require('lodash'); 5 | const fs = require('fs'); 6 | const path = require('path'); 7 | const yargs = require('yargs'); 8 | 9 | const { argv } = yargs 10 | .usage( 11 | 'Usage: $0 [options] path/to/codepoints \nFor default template please provide --componentName and --fontFamily' 12 | ) 13 | .demand(1) 14 | .default('t', path.resolve(__dirname, '..', 'templates/bundled-icon-set.tpl')) 15 | .describe('t', 'Template in lodash format') 16 | .alias('t', 'template') 17 | .describe('o', 'Save output to file, defaults to STDOUT') 18 | .alias('o', 'output') 19 | .describe('g', 'Save glyphmap JSON to file') 20 | .alias('g', 'glyphmap'); 21 | 22 | function extractGlyphMapFromCodepoints(fileName) { 23 | const codepoints = fs 24 | .readFileSync(fileName, { encoding: 'utf8' }) 25 | .split('\n'); 26 | const glyphMap = {}; 27 | codepoints.forEach(point => { 28 | const parts = point.split(' '); 29 | if (parts.length === 2) { 30 | glyphMap[parts[0].replace(/_/g, '-')] = parseInt(parts[1], 16); 31 | } 32 | }); 33 | 34 | return glyphMap; 35 | } 36 | 37 | let template; 38 | if (argv.template) { 39 | template = fs.readFileSync(argv.template, { encoding: 'utf8' }); 40 | } 41 | 42 | let data = _.omit(argv, '_ $0 o output t template g glyphmap'.split(' ')); 43 | const glyphMap = extractGlyphMapFromCodepoints(argv._[0]); 44 | 45 | let content = JSON.stringify(glyphMap, null, ' '); 46 | if (template) { 47 | const compiled = _.template(template); 48 | data = data || {}; 49 | data.glyphMap = content; 50 | content = compiled(data); 51 | } 52 | 53 | if (argv.output) { 54 | fs.writeFileSync(argv.output, content); 55 | } else { 56 | console.log(content); 57 | } 58 | 59 | if (argv.glyphmap) { 60 | fs.writeFileSync(argv.glyphmap, JSON.stringify(glyphMap, null, ' ')); 61 | } 62 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '8' 4 | script: 5 | - yarn test 6 | before_deploy: "cd directory && yarn && yarn build && cd .." 7 | deploy: 8 | - provider: npm 9 | skip_cleanup: true 10 | email: joel@oblador.se 11 | api_key: 12 | secure: "av3+by9iEBSBxbZm5MRdo23stPqbQ1j1jeIVhKhNbuYvRnbB0dwnly+thrQ3Osh+Cl2yZO6yaBK1hEa7RnESnE1/NMgdPhJuCuOKkFulyiEH5Rlk4wiGTAYiYDr36uUMlqUZuVfusSBVSMhBXHRLdyTtM9bR3ab5W8v8IBSITsllWvKQzflBF5JqYlzWqd/Dc/JRUgX9MwMWmygsIZg1rfuoF2+n+DG/Dc7d/sT5sETkzjc/ejwTYE5Wrbvd5+zGYmz3l8A7PjGv/ec3fVlZVsXtNQk8s1dtfQijhJDhJ7Z9Dq/Bolu8K3rwEMAXnx1eCOlbuNzRY1jYztE+T/6WgHnEc3RWGI7WGuA23RBtGPcrdQqDj9gRC4HS0BcCnNcSVNQ+tn1D7PkPVuv5WrEDcXK8yVPG8nLhsOgrdOIM3GIefO1UDY1OS4EuiwaLRlnR5r3MWaQ4Z8UmRfQYD0/N0YVQZqRTd1VjfrBZnATlZKlu3x87yhsu95HsfYGI5YX7hxaWpDb4ZLJyFOvyUFEhI8TSvi1mai+ws5WWcX7SklYnUvgs589TlEeWb1icAeK64MWQE2Una/72f/R5YOq62tY8xPA9VqcRHVrtXqvmW+ghGknmQeBy+9+h9nktGVA1jQCTVk3DFDcsSia1VzEBrAQ543t6SmCMBBigUA/tAiU=" 13 | on: 14 | tags: true 15 | repo: oblador/react-native-vector-icons 16 | condition: "$TRAVIS_TAG =~ ^v[0-9]+\\.[0-9]+\\.[0-9]+.*$" 17 | - provider: pages 18 | skip_cleanup: true 19 | local_dir: "directory/build" 20 | github_token: 21 | secure: "dErvAbyystT3eO9BZoOqxNaxKgFdMu3RyeogEEBAinu1iSQcylH3+ZSdN5IDvfShRnoeuc61aukMHdgHgSoomherhN2yJc2GnISkhCP1w4qfTlJGc1JqEXoKNBcQ7GGKNxeABxH3LUwooGAPppfPZ2WMe1meg5363t2IcaWbDGXKdHReyBkT9S1ZW1J2bEUXI/UKilukNQgDdwbhzyalEgGMl2BtaOo9CCyBmBp77KgRjO2175b5bHoYXTLPcjCR697lJq7K6GhFoPolexofv1zM/5IPSPGVoHnG9sqiMCWME+fvysFbgcUQQbfhX8jEZtbXuyM4Q/KCXRtOkxtJBa/ZNKDM7RIA+odMed7Usxz53O13/PUCFozURWoDG83paWLuBKl5TFMWxUuGFVaDGv/GugSLrjp9Hz6bGNBXxlRrwhrByqSsP5vLyDvCbxFdnUp5u+DfSKolW1D0chkJ1L0RX4tXuq+oR0gwVMY336angh4JCE989bU04HGxxuo11KL95yndzRdxfXEpWE+RRP1HkUIp/jsAVErhfmpZrpb+O1AceEgT3H8yb3F1uwdNI5YsV7Wc2Kmf2LxP7QBzkPMRY2locCPyks3e9vnjx/D9CQzFMjroh+zhC5eUcmO5IjpYWzxz6L6vdw+n9xwOj2rlmH1/z18RI5RMf2/idRs=" 22 | on: 23 | tags: true 24 | repo: oblador/react-native-vector-icons 25 | condition: "$TRAVIS_TAG =~ ^v[0-9]+\\.[0-9]+\\.[0-9]+.*$" 26 | -------------------------------------------------------------------------------- /Examples/TabBarExample/iOS/TabBarExample/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | TabBarExample 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSLocationWhenInUseUsageDescription 28 | 29 | UIAppFonts 30 | 31 | Ionicons.ttf 32 | 33 | UILaunchStoryboardName 34 | LaunchScreen 35 | UIRequiredDeviceCapabilities 36 | 37 | armv7 38 | 39 | UISupportedInterfaceOrientations 40 | 41 | UIInterfaceOrientationPortrait 42 | UIInterfaceOrientationLandscapeLeft 43 | UIInterfaceOrientationLandscapeRight 44 | 45 | UIViewControllerBasedStatusBarAppearance 46 | 47 | NSLocationWhenInUseUsageDescription 48 | 49 | NSAppTransportSecurity 50 | 51 | 52 | NSAllowsArbitraryLoads 53 | 54 | NSExceptionDomains 55 | 56 | localhost 57 | 58 | NSExceptionAllowsInsecureHTTPLoads 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /fonts.gradle: -------------------------------------------------------------------------------- 1 | /** 2 | * Task to copy icon font files 3 | */ 4 | 5 | def config = project.hasProperty("vectoricons") ? project.vectoricons : []; 6 | 7 | def iconFontsDir = config.iconFontsDir ?: "../../node_modules/react-native-vector-icons/Fonts"; 8 | def iconFontNames = config.iconFontNames ?: [ "*.ttf" ]; 9 | 10 | gradle.projectsEvaluated { 11 | android.applicationVariants.all { def variant -> 12 | def targetName = variant.name.capitalize() 13 | def targetPath = variant.dirName 14 | 15 | // Create task for copying fonts 16 | def currentFontTask = tasks.create( 17 | name: "copy${targetName}IconFonts", 18 | type: Copy) { 19 | into("${buildDir}/intermediates") 20 | 21 | iconFontNames.each { fontName -> 22 | 23 | from(iconFontsDir) { 24 | include(fontName) 25 | into("assets/${targetPath}/fonts/") 26 | } 27 | 28 | // Workaround for Android Gradle Plugin 3.2+ new asset directory 29 | from(iconFontsDir) { 30 | include(fontName) 31 | into("merged_assets/${variant.name}/merge${targetName}Assets/out/fonts/") 32 | } 33 | 34 | // Workaround for Android Gradle Plugin 3.4+ new asset directory 35 | from(iconFontsDir) { 36 | include(fontName) 37 | into("merged_assets/${variant.name}/out/fonts/") 38 | } 39 | } 40 | } 41 | 42 | currentFontTask.dependsOn("merge${targetName}Resources") 43 | currentFontTask.dependsOn("merge${targetName}Assets") 44 | 45 | [ 46 | "processArmeabi-v7a${targetName}Resources", 47 | "processX86${targetName}Resources", 48 | "processUniversal${targetName}Resources", 49 | "process${targetName}Resources" 50 | ].each { name -> 51 | Task dependentTask = tasks.findByPath(name); 52 | 53 | if (dependentTask != null) { 54 | dependentTask.dependsOn(currentFontTask) 55 | } 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /Examples/IconExplorer/index.osx.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import { 3 | AppRegistry, 4 | Dimensions, 5 | Image, 6 | StyleSheet, 7 | Text, 8 | View, 9 | } from 'react-native-desktop'; 10 | 11 | import Icon from 'react-native-vector-icons/Ionicons'; 12 | import IconSetList from './IconSetList'; 13 | import IconList from './IconList'; 14 | 15 | const LEFT_PANEL_WIDTH = 300; 16 | 17 | const styles = StyleSheet.create({ 18 | container: { 19 | flex: 1, 20 | flexDirection: 'row', 21 | }, 22 | leftPanel: { 23 | width: LEFT_PANEL_WIDTH, 24 | }, 25 | rightPanel: { 26 | flex: 1, 27 | backgroundColor: '#fff', 28 | }, 29 | welcomeWrapper: { 30 | flex: 1, 31 | alignItems: 'center', 32 | justifyContent: 'center', 33 | }, 34 | welcomeText: { 35 | color: '#999', 36 | fontSize: 20, 37 | }, 38 | }); 39 | 40 | class Welcome extends PureComponent { 41 | render() { 42 | return ( 43 | 44 | 45 | Choose an icon set on the left side 46 | 47 | 48 | ); 49 | } 50 | } 51 | 52 | class IconExplorer extends PureComponent { 53 | constructor() { 54 | super(); 55 | this.state = { 56 | iconSet: null, 57 | layout: Dimensions.get('window'), 58 | }; 59 | } 60 | 61 | render() { 62 | const { iconSet, iconSetTitle, layout } = this.state; 63 | 64 | return ( 65 | this.setState({ layout: e.nativeEvent.layout })} 68 | > 69 | 70 | this.setState({ iconSet: route.iconSet }), 73 | }} 74 | /> 75 | 76 | 82 | {iconSet ? : } 83 | 84 | 85 | ); 86 | } 87 | } 88 | 89 | AppRegistry.registerComponent('IconExplorer', () => IconExplorer); 90 | -------------------------------------------------------------------------------- /Examples/IconExplorer/ios/IconExplorerTests/IconExplorerTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | #import 10 | 11 | #import 12 | #import 13 | 14 | #define TIMEOUT_SECONDS 600 15 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 16 | 17 | @interface IconExplorerTests : XCTestCase 18 | 19 | @end 20 | 21 | @implementation IconExplorerTests 22 | 23 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 24 | { 25 | if (test(view)) { 26 | return YES; 27 | } 28 | for (UIView *subview in [view subviews]) { 29 | if ([self findSubviewInView:subview matching:test]) { 30 | return YES; 31 | } 32 | } 33 | return NO; 34 | } 35 | 36 | - (void)testRendersWelcomeScreen 37 | { 38 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 39 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 40 | BOOL foundElement = NO; 41 | 42 | __block NSString *redboxError = nil; 43 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 44 | if (level >= RCTLogLevelError) { 45 | redboxError = message; 46 | } 47 | }); 48 | 49 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 50 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 51 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 52 | 53 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 54 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 55 | return YES; 56 | } 57 | return NO; 58 | }]; 59 | } 60 | 61 | RCTSetLogFunction(RCTDefaultLogFunction); 62 | 63 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 64 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 65 | } 66 | 67 | 68 | @end 69 | -------------------------------------------------------------------------------- /Examples/TabBarExample/iOS/TabBarExampleTests/TabBarExampleTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | #import 10 | 11 | #import 12 | #import 13 | 14 | #define TIMEOUT_SECONDS 600 15 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 16 | 17 | @interface TabBarExampleTests : XCTestCase 18 | 19 | @end 20 | 21 | @implementation TabBarExampleTests 22 | 23 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 24 | { 25 | if (test(view)) { 26 | return YES; 27 | } 28 | for (UIView *subview in [view subviews]) { 29 | if ([self findSubviewInView:subview matching:test]) { 30 | return YES; 31 | } 32 | } 33 | return NO; 34 | } 35 | 36 | - (void)testRendersWelcomeScreen 37 | { 38 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 39 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 40 | BOOL foundElement = NO; 41 | 42 | __block NSString *redboxError = nil; 43 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 44 | if (level >= RCTLogLevelError) { 45 | redboxError = message; 46 | } 47 | }); 48 | 49 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 50 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 51 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 52 | 53 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 54 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 55 | return YES; 56 | } 57 | return NO; 58 | }]; 59 | } 60 | 61 | RCTSetLogFunction(RCTDefaultLogFunction); 62 | 63 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 64 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 65 | } 66 | 67 | 68 | @end 69 | -------------------------------------------------------------------------------- /Examples/IconExplorer/index.windows.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { PureComponent } from 'react'; 8 | import { AppRegistry, StyleSheet, Text, View, Dimensions } from 'react-native'; 9 | 10 | import Icon from 'react-native-vector-icons/Ionicons'; 11 | import IconSetList from './IconSetList'; 12 | import IconList from './IconList'; 13 | 14 | const LEFT_PANEL_WIDTH = 300; 15 | 16 | const styles = StyleSheet.create({ 17 | container: { 18 | flex: 1, 19 | flexDirection: 'row', 20 | }, 21 | leftPanel: { 22 | width: LEFT_PANEL_WIDTH, 23 | }, 24 | rightPanel: { 25 | flex: 1, 26 | backgroundColor: '#fff', 27 | }, 28 | welcomeWrapper: { 29 | flex: 1, 30 | alignItems: 'center', 31 | justifyContent: 'center', 32 | }, 33 | welcomeText: { 34 | color: '#999', 35 | fontSize: 20, 36 | }, 37 | }); 38 | 39 | class Welcome extends PureComponent { 40 | render() { 41 | return ( 42 | 43 | 44 | Choose an icon set on the left side 45 | 46 | 47 | ); 48 | } 49 | } 50 | 51 | class IconExplorer extends PureComponent { 52 | constructor() { 53 | super(); 54 | this.state = { 55 | iconSet: null, 56 | layout: Dimensions.get('window'), 57 | }; 58 | } 59 | 60 | render() { 61 | const { iconSet, iconSetTitle, layout } = this.state; 62 | 63 | return ( 64 | this.setState({ layout: e.nativeEvent.layout })} 67 | > 68 | 69 | this.setState({ iconSet: route.iconSet }), 72 | }} 73 | /> 74 | 75 | 81 | {iconSet ? : } 82 | 83 | 84 | ); 85 | } 86 | } 87 | 88 | AppRegistry.registerComponent('IconExplorer', () => IconExplorer); 89 | -------------------------------------------------------------------------------- /lib/create-icon-set-from-fontawesome5.js: -------------------------------------------------------------------------------- 1 | import { Platform } from './react-native'; 2 | import createMultiStyleIconSet from './create-multi-style-icon-set'; 3 | 4 | const FA5Style = { 5 | regular: 'regular', 6 | light: 'light', 7 | solid: 'solid', 8 | brand: 'brand', 9 | }; 10 | 11 | function createFA5iconSet(glyphMap, metadata = {}, pro = false) { 12 | const metadataKeys = Object.keys(metadata); 13 | const fontFamily = `FontAwesome5${pro ? 'Pro' : 'Free'}`; 14 | 15 | function fallbackFamily(glyph) { 16 | for (let i = 0; i < metadataKeys.length; i += 1) { 17 | const family = metadataKeys[i]; 18 | if (metadata[family].indexOf(glyph) !== -1) { 19 | return family === 'brands' ? 'brand' : family; 20 | } 21 | } 22 | 23 | return 'regular'; 24 | } 25 | 26 | function glyphValidator(glyph, style) { 27 | const family = style === 'brand' ? 'brands' : style; 28 | if (metadataKeys.indexOf(family) === -1) return false; 29 | return metadata[family].indexOf(glyph) !== -1; 30 | } 31 | 32 | function createFontAwesomeStyle(style, fontWeight, family = fontFamily) { 33 | let styleName = style; 34 | let fontFile = `FontAwesome5_${pro ? `Pro_${styleName}` : styleName}.ttf`; 35 | 36 | if (styleName === 'Brands') { 37 | styleName = 'Regular'; 38 | fontFile = 'FontAwesome5_Brands.ttf'; 39 | } 40 | 41 | return { 42 | fontFamily: `${family}-${styleName}`, 43 | fontFile, 44 | fontStyle: Platform.select({ 45 | ios: { 46 | fontWeight, 47 | }, 48 | default: {}, 49 | }), 50 | glyphMap, 51 | }; 52 | } 53 | 54 | const brandIcons = createFontAwesomeStyle( 55 | 'Brands', 56 | '400', 57 | 'FontAwesome5Brands' 58 | ); 59 | const lightIcons = createFontAwesomeStyle('Light', '300'); 60 | const regularIcons = createFontAwesomeStyle('Regular', '400'); 61 | const solidIcons = createFontAwesomeStyle('Solid', '900'); 62 | const Icon = createMultiStyleIconSet( 63 | { 64 | brand: brandIcons, 65 | light: lightIcons, 66 | regular: regularIcons, 67 | solid: solidIcons, 68 | }, 69 | { 70 | defaultStyle: 'regular', 71 | fallbackFamily, 72 | glyphValidator, 73 | } 74 | ); 75 | 76 | return Icon; 77 | } 78 | 79 | export { createFA5iconSet, FA5Style }; 80 | -------------------------------------------------------------------------------- /Examples/IconExplorer/ios/Podfile: -------------------------------------------------------------------------------- 1 | platform :ios, '9.0' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | target 'IconExplorer' do 5 | # Pods for IconExplorer 6 | pod 'React', :path => '../node_modules/react-native/' 7 | pod 'React-Core', :path => '../node_modules/react-native/React' 8 | pod 'React-DevSupport', :path => '../node_modules/react-native/React' 9 | pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS' 10 | pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation' 11 | pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob' 12 | pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image' 13 | pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS' 14 | pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network' 15 | pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings' 16 | pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text' 17 | pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration' 18 | pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket' 19 | 20 | pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact' 21 | pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi' 22 | pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor' 23 | pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector' 24 | pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' 25 | 26 | pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' 27 | pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' 28 | pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' 29 | 30 | target 'IconExplorerTests' do 31 | inherit! :search_paths 32 | # Pods for testing 33 | end 34 | 35 | use_native_modules! 36 | end 37 | 38 | target 'IconExplorer-tvOS' do 39 | # Pods for IconExplorer-tvOS 40 | 41 | target 'IconExplorer-tvOSTests' do 42 | inherit! :search_paths 43 | # Pods for testing 44 | end 45 | 46 | end 47 | -------------------------------------------------------------------------------- /lib/generate-icon-set-from-css.js: -------------------------------------------------------------------------------- 1 | const _ = require('lodash'); 2 | const fs = require('fs'); 3 | 4 | function extractGlyphMapFromCss(files, selectorPattern) { 5 | const styleRulePattern = 6 | '(\\.[A-Za-z0-9_.:, \\n\\t-]+)\\{[^}]*content: ?["\\\'](?:\\\\([A-Fa-f0-9]+)|([^"\\\']+))["\\\'][^}]*\\}'; 7 | const allStyleRules = new RegExp(styleRulePattern, 'g'); 8 | const singleStyleRules = new RegExp(styleRulePattern); 9 | const allSelectors = new RegExp(selectorPattern, 'g'); 10 | const singleSelector = new RegExp(selectorPattern); 11 | 12 | const extractGlyphFromRule = rule => { 13 | const ruleParts = rule.match(singleStyleRules); 14 | if (ruleParts[2]) { 15 | // Hex value in CSS 16 | return parseInt(ruleParts[2], 16); 17 | } 18 | if (ruleParts[3].length > 1) { 19 | // String value in CSS that we'll keep as a string because it's not a single character 20 | return ruleParts[3]; 21 | } 22 | // String value in CSS that we'll convert to a charcode 23 | return ruleParts[3].charCodeAt(); 24 | }; 25 | 26 | const extractSelectorsFromRule = rule => { 27 | const ruleParts = rule.match(singleStyleRules); 28 | const selectors = ruleParts[1].match(allSelectors) || []; 29 | return selectors.map(selector => selector.match(singleSelector)[1]); 30 | }; 31 | 32 | return (typeof files === 'string' ? [files] : files) 33 | .map(fileName => fs.readFileSync(fileName, { encoding: 'utf8' })) 34 | .map(contents => contents.match(allStyleRules) || []) 35 | .reduce((acc, rules) => acc.concat(rules), []) 36 | .map(rule => { 37 | const glyph = extractGlyphFromRule(rule); 38 | const selectors = extractSelectorsFromRule(rule); 39 | return selectors.map(selector => [selector, glyph]); 40 | }) 41 | .reduce((acc, glyphs) => Object.assign(acc, _.fromPairs(glyphs)), {}); 42 | } 43 | 44 | function escapeRegExp(str) { 45 | return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&'); 46 | } 47 | 48 | function generateIconSetFromCss(cssFiles, selectorPrefix, template, data = {}) { 49 | const glyphMap = extractGlyphMapFromCss( 50 | cssFiles, 51 | `${escapeRegExp(selectorPrefix)}([A-Za-z0-9_-]+)::?before` 52 | ); 53 | const content = JSON.stringify(glyphMap, null, ' '); 54 | if (template) { 55 | return _.template(template)({ glyphMap: content, ...data }); 56 | } 57 | return content; 58 | } 59 | 60 | module.exports = generateIconSetFromCss; 61 | -------------------------------------------------------------------------------- /Examples/IconExplorer/ios/IconExplorer/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | IconExplorer 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSLocationWhenInUseUsageDescription 28 | 29 | UILaunchStoryboardName 30 | LaunchScreen 31 | UIRequiredDeviceCapabilities 32 | 33 | armv7 34 | 35 | UISupportedInterfaceOrientations 36 | 37 | UIInterfaceOrientationPortrait 38 | UIInterfaceOrientationLandscapeLeft 39 | UIInterfaceOrientationLandscapeRight 40 | 41 | UIViewControllerBasedStatusBarAppearance 42 | 43 | NSAppTransportSecurity 44 | 45 | NSAllowsArbitraryLoads 46 | 47 | NSExceptionDomains 48 | 49 | localhost 50 | 51 | NSExceptionAllowsInsecureHTTPLoads 52 | 53 | 54 | 55 | 56 | UIAppFonts 57 | 58 | AntDesign.ttf 59 | Entypo.ttf 60 | EvilIcons.ttf 61 | Feather.ttf 62 | FontAwesome.ttf 63 | FontAwesome5_Brands.ttf 64 | FontAwesome5_Regular.ttf 65 | FontAwesome5_Solid.ttf 66 | Foundation.ttf 67 | Ionicons.ttf 68 | MaterialCommunityIcons.ttf 69 | MaterialIcons.ttf 70 | Octicons.ttf 71 | SimpleLineIcons.ttf 72 | Zocial.ttf 73 | Fontisto.ttf 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /glyphmaps/Zocial.json: -------------------------------------------------------------------------------- 1 | { 2 | "acrobat": 61696, 3 | "amazon": 61697, 4 | "android": 61698, 5 | "angellist": 61699, 6 | "aol": 61700, 7 | "appnet": 61701, 8 | "appstore": 61702, 9 | "bitbucket": 61703, 10 | "bitcoin": 61704, 11 | "blogger": 61705, 12 | "buffer": 61706, 13 | "cal": 61707, 14 | "call": 61708, 15 | "cart": 61709, 16 | "chrome": 61710, 17 | "cloudapp": 61711, 18 | "creativecommons": 61712, 19 | "delicious": 61713, 20 | "digg": 61714, 21 | "disqus": 61715, 22 | "dribbble": 61716, 23 | "dropbox": 61717, 24 | "drupal": 61718, 25 | "dwolla": 61720, 26 | "email": 61721, 27 | "eventasaurus": 61722, 28 | "eventbrite": 61723, 29 | "eventful": 61724, 30 | "evernote": 61725, 31 | "facebook": 61726, 32 | "fivehundredpx": 61727, 33 | "flattr": 61728, 34 | "flickr": 61729, 35 | "forrst": 61730, 36 | "foursquare": 61731, 37 | "github": 61732, 38 | "gmail": 61733, 39 | "google": 61734, 40 | "googleplay": 61735, 41 | "googleplus": 61736, 42 | "gowalla": 61737, 43 | "grooveshark": 61738, 44 | "guest": 61739, 45 | "html5": 61740, 46 | "ie": 61741, 47 | "instagram": 61742, 48 | "instapaper": 61743, 49 | "intensedebate": 61744, 50 | "itunes": 61745, 51 | "klout": 61746, 52 | "lanyrd": 61747, 53 | "lastfm": 61748, 54 | "lego": 61749, 55 | "linkedin": 61750, 56 | "lkdto": 61751, 57 | "logmein": 61752, 58 | "macstore": 61753, 59 | "meetup": 61754, 60 | "myspace": 61755, 61 | "ninetyninedesigns": 61756, 62 | "openid": 61757, 63 | "opentable": 61758, 64 | "paypal": 61759, 65 | "persona": 61796, 66 | "pinboard": 61760, 67 | "pinterest": 61761, 68 | "plancast": 61762, 69 | "plurk": 61763, 70 | "pocket": 61764, 71 | "podcast": 61765, 72 | "posterous": 61766, 73 | "print": 61767, 74 | "quora": 61768, 75 | "reddit": 61769, 76 | "rss": 61770, 77 | "scribd": 61771, 78 | "skype": 61772, 79 | "smashing": 61773, 80 | "songkick": 61774, 81 | "soundcloud": 61775, 82 | "spotify": 61776, 83 | "stackoverflow": 61777, 84 | "statusnet": 61778, 85 | "steam": 61779, 86 | "stripe": 61780, 87 | "stumbleupon": 61781, 88 | "tumblr": 61782, 89 | "twitter": 61783, 90 | "viadeo": 61784, 91 | "vimeo": 61785, 92 | "vk": 61786, 93 | "weibo": 61787, 94 | "wikipedia": 61788, 95 | "windows": 61789, 96 | "wordpress": 61790, 97 | "xing": 61791, 98 | "yahoo": 61792, 99 | "ycombinator": 61793, 100 | "yelp": 61794, 101 | "youtube": 61795 102 | } -------------------------------------------------------------------------------- /Examples/TabBarExample/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore unexpected extra "@providesModule" 9 | .*/node_modules/.*/node_modules/fbjs/.* 10 | 11 | ; Ignore duplicate module providers 12 | ; For RN Apps installed via npm, "Libraries" folder is inside 13 | ; "node_modules/react-native" but in the source repo it is in the root 14 | .*/Libraries/react-native/React.js 15 | 16 | ; Ignore polyfills 17 | .*/Libraries/polyfills/.* 18 | 19 | ; Ignore metro 20 | .*/node_modules/metro/.* 21 | 22 | [include] 23 | 24 | [libs] 25 | node_modules/react-native/Libraries/react-native/react-native-interface.js 26 | node_modules/react-native/flow/ 27 | node_modules/react-native/flow-github/ 28 | 29 | [options] 30 | emoji=true 31 | 32 | esproposal.optional_chaining=enable 33 | esproposal.nullish_coalescing=enable 34 | 35 | module.system=haste 36 | module.system.haste.use_name_reducers=true 37 | # get basename 38 | module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1' 39 | # strip .js or .js.flow suffix 40 | module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1' 41 | # strip .ios suffix 42 | module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1' 43 | module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1' 44 | module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1' 45 | module.system.haste.paths.blacklist=.*/__tests__/.* 46 | module.system.haste.paths.blacklist=.*/__mocks__/.* 47 | module.system.haste.paths.blacklist=/node_modules/react-native/Libraries/Animated/src/polyfills/.* 48 | module.system.haste.paths.whitelist=/node_modules/react-native/Libraries/.* 49 | 50 | munge_underscores=true 51 | 52 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 53 | 54 | module.file_ext=.js 55 | module.file_ext=.jsx 56 | module.file_ext=.json 57 | module.file_ext=.native.js 58 | 59 | suppress_type=$FlowIssue 60 | suppress_type=$FlowFixMe 61 | suppress_type=$FlowFixMeProps 62 | suppress_type=$FlowFixMeState 63 | 64 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 65 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 66 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 67 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 68 | 69 | [version] 70 | ^0.78.0 71 | -------------------------------------------------------------------------------- /lib/tab-bar-item-ios.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-unused-prop-types */ 2 | import isEqual from 'lodash/isEqual'; 3 | import pick from 'lodash/pick'; 4 | import React, { PureComponent } from 'react'; 5 | import PropTypes from 'prop-types'; 6 | import { TabBarIOS } from './react-native'; 7 | 8 | const ICON_PROP_NAMES = ['iconName', 'iconSize', 'iconColor']; 9 | const SELECTED_ICON_PROP_NAMES = [ 10 | ...ICON_PROP_NAMES, 11 | 'selectedIconName', 12 | 'selectedIconColor', 13 | ]; 14 | 15 | const arePropsEqual = keys => (prevProps, nextProps) => 16 | isEqual(pick(prevProps, keys), pick(nextProps, keys)); 17 | 18 | const areIconPropsEqual = arePropsEqual(ICON_PROP_NAMES); 19 | const areSelectedIconPropsEqual = arePropsEqual(SELECTED_ICON_PROP_NAMES); 20 | 21 | export default function createTabBarItemIOSComponent( 22 | IconNamePropType, 23 | getImageSource 24 | ) { 25 | return class TabBarItemIOS extends PureComponent { 26 | static propTypes = { 27 | iconName: IconNamePropType.isRequired, 28 | selectedIconName: IconNamePropType, 29 | iconSize: PropTypes.number, 30 | iconColor: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 31 | selectedIconColor: PropTypes.oneOfType([ 32 | PropTypes.string, 33 | PropTypes.number, 34 | ]), 35 | }; 36 | 37 | static defaultProps = { 38 | iconSize: 30, 39 | }; 40 | 41 | state = { 42 | icon: undefined, 43 | selectedIcon: undefined, 44 | }; 45 | 46 | componentDidMount() { 47 | this.updateIconSource(); 48 | this.updateSelectedIconSource(); 49 | } 50 | 51 | componentDidUpdate(prevProps) { 52 | if (!areIconPropsEqual(prevProps, this.props)) { 53 | this.updateIconSource(); 54 | } 55 | if (!areSelectedIconPropsEqual(prevProps, this.props)) { 56 | this.updateSelectedIconSource(); 57 | } 58 | } 59 | 60 | async updateIconSource() { 61 | const { iconName, iconSize, iconColor } = this.props; 62 | if (iconName) { 63 | const icon = await getImageSource(iconName, iconSize, iconColor); 64 | this.setState({ icon }); 65 | // eslint-disable-next-line react/destructuring-assignment 66 | } else if (this.state.icon) { 67 | this.setState({ icon: undefined }); 68 | } 69 | } 70 | 71 | async updateSelectedIconSource() { 72 | const { 73 | iconName, 74 | iconColor, 75 | iconSize, 76 | selectedIconName, 77 | selectedIconColor, 78 | } = this.props; 79 | if (selectedIconName || selectedIconColor) { 80 | const selectedIcon = await getImageSource( 81 | selectedIconName || iconName, 82 | iconSize, 83 | selectedIconColor || iconColor 84 | ); 85 | this.setState({ selectedIcon }); 86 | // eslint-disable-next-line react/destructuring-assignment 87 | } else if (this.state.selectedIcon) { 88 | this.setState({ selectedIcon: undefined }); 89 | } 90 | } 91 | 92 | render() { 93 | return ; 94 | } 95 | }; 96 | } 97 | -------------------------------------------------------------------------------- /Examples/IconExplorer/icon-sets.js: -------------------------------------------------------------------------------- 1 | import { pipe, toPairs, groupBy, map } from 'ramda'; 2 | import AntD from 'react-native-vector-icons/AntDesign'; 3 | import Entypo from 'react-native-vector-icons/Entypo'; 4 | import EvilIcons from 'react-native-vector-icons/EvilIcons'; 5 | import Feather from 'react-native-vector-icons/Feather'; 6 | import FontAwesome from 'react-native-vector-icons/FontAwesome'; 7 | import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; 8 | import Fontisto from 'react-native-vector-icons/Fontisto'; 9 | import Foundation from 'react-native-vector-icons/Foundation'; 10 | import Ionicons from 'react-native-vector-icons/Ionicons'; 11 | import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; 12 | import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; 13 | import Octicons from 'react-native-vector-icons/Octicons'; 14 | import Zocial from 'react-native-vector-icons/Zocial'; 15 | import AntDGlyphs from 'react-native-vector-icons/glyphmaps/AntDesign.json'; 16 | import EntypoGlyphs from 'react-native-vector-icons/glyphmaps/Entypo.json'; 17 | import EvilIconsGlyphs from 'react-native-vector-icons/glyphmaps/EvilIcons.json'; 18 | import FeatherGlyphs from 'react-native-vector-icons/glyphmaps/Feather.json'; 19 | import FontAwesomeGlyphs from 'react-native-vector-icons/glyphmaps/FontAwesome.json'; 20 | import FontAwesome5Glyphs from 'react-native-vector-icons/glyphmaps/FontAwesome5Free.json'; 21 | import FontistoGlyphs from 'react-native-vector-icons/glyphmaps/Fontisto.json'; 22 | import FoundationGlyphs from 'react-native-vector-icons/glyphmaps/Foundation.json'; 23 | import IoniconsGlyphs from 'react-native-vector-icons/glyphmaps/Ionicons.json'; 24 | import MaterialIconsGlyphs from 'react-native-vector-icons/glyphmaps/MaterialIcons.json'; 25 | import MaterialCommunityIconsGlyphs from 'react-native-vector-icons/glyphmaps/MaterialCommunityIcons.json'; 26 | import OcticonsGlyphs from 'react-native-vector-icons/glyphmaps/Octicons.json'; 27 | import ZocialGlyphs from 'react-native-vector-icons/glyphmaps/Zocial.json'; 28 | 29 | const GLYPH_MAPS = { 30 | AntD: AntDGlyphs, 31 | Entypo: EntypoGlyphs, 32 | EvilIcons: EvilIconsGlyphs, 33 | Feather: FeatherGlyphs, 34 | FontAwesome: FontAwesomeGlyphs, 35 | FontAwesome5: FontAwesome5Glyphs, 36 | Fontisto: FontistoGlyphs, 37 | Foundation: FoundationGlyphs, 38 | Ionicons: IoniconsGlyphs, 39 | MaterialIcons: MaterialIconsGlyphs, 40 | MaterialCommunityIcons: MaterialCommunityIconsGlyphs, 41 | Octicons: OcticonsGlyphs, 42 | Zocial: ZocialGlyphs, 43 | }; 44 | 45 | const ICON_SETS = { 46 | AntD, 47 | Entypo, 48 | EvilIcons, 49 | Feather, 50 | FontAwesome, 51 | FontAwesome5, 52 | Fontisto, 53 | Foundation, 54 | Ionicons, 55 | MaterialIcons, 56 | MaterialCommunityIcons, 57 | Octicons, 58 | Zocial, 59 | }; 60 | 61 | const groupGlyphNames = glyphMap => 62 | Object.values(groupBy(name => glyphMap[name])(Object.keys(glyphMap))); 63 | 64 | const transformIconSets = pipe( 65 | toPairs, 66 | map(([name, component]) => ({ 67 | name, 68 | component, 69 | glyphNames: groupGlyphNames(GLYPH_MAPS[name]), 70 | })) 71 | ); 72 | 73 | export default transformIconSets(ICON_SETS); 74 | -------------------------------------------------------------------------------- /index.js.flow: -------------------------------------------------------------------------------- 1 | /** 2 | * @flow strict 3 | */ 4 | 5 | import { PureComponent } from 'react'; 6 | 7 | export type Color = number | string; 8 | 9 | export type IconButtonProps = { 10 | backgroundColor?: Color, 11 | borderRadius?: number, 12 | color?: Color, 13 | name: Glyphs, 14 | size?: number, 15 | }; 16 | 17 | declare class IconButton extends PureComponent< 18 | IconButtonProps 19 | > {} 20 | 21 | export type IconToolbarAndroidActions = { 22 | iconColor?: Color, 23 | iconName?: Glyphs, 24 | iconSize?: number, 25 | show?: 'always' | 'ifRoom' | 'never', 26 | showWithText?: boolean, 27 | title: string, 28 | }; 29 | 30 | export type IconToolbarAndroidProps = { 31 | actions: IconToolbarAndroidActions[], 32 | iconColor?: Color, 33 | iconSize?: number, 34 | logoName?: Glyphs, 35 | navIconName?: Glyphs, 36 | overflowIconName?: Glyphs, 37 | titleColor?: Color, 38 | }; 39 | 40 | declare class IconToolbarAndroid extends PureComponent< 41 | IconToolbarAndroidProps 42 | > {} 43 | 44 | export type TabBarItemIOSProps = { 45 | iconColor?: Color, 46 | iconName: Glyphs, 47 | iconSize?: number, 48 | selectedIconColor?: Color, 49 | selectedIconName?: Glyphs, 50 | }; 51 | 52 | declare class TabBarItemIOS extends PureComponent< 53 | TabBarItemIOSProps 54 | > {} 55 | 56 | export type IconProps = { 57 | allowFontScaling?: boolean, 58 | color?: Color, 59 | name: Glyphs, 60 | size?: number, 61 | }; 62 | 63 | export type ImageSource = {| 64 | uri: string, 65 | scale: number, 66 | |}; 67 | 68 | declare class Icon extends PureComponent> { 69 | static Button: Class>; 70 | static TabBarItem: Class>; 71 | static TabBarItemIOS: Class>; 72 | static ToolbarAndroid: Class>; 73 | 74 | static getFontFamily(): string; 75 | static getImageSource( 76 | name: Glyphs, 77 | size?: number, 78 | color?: Color 79 | ): Promise; 80 | static getRawGlyphMap(): { [name: Glyphs]: number }; 81 | static hasIcon(name: string): boolean; 82 | static loadFont(file?: string): Promise; 83 | } 84 | 85 | export type { Icon }; 86 | 87 | declare export function createIconSet( 88 | glyphMap: GlyphMap, 89 | fontFamily: string, 90 | fontFile?: string 91 | ): Class>>; 92 | 93 | export type FontelloConfig = { 94 | glyphs: Array<{ 95 | css: string, 96 | code: number, 97 | }>, 98 | }; 99 | 100 | declare export function createIconSetFromFontello( 101 | config: FontelloConfig, 102 | fontFamily?: string, 103 | fontFile?: string 104 | ): Class>; 105 | 106 | export type IcoMoonConfig = { 107 | icons: Array<{ 108 | properties: { name: string, code: number }, 109 | }>, 110 | }; 111 | 112 | declare export function createIconSetFromIcoMoon( 113 | config: IcoMoonConfig, 114 | fontFamily?: string, 115 | fontFile?: string 116 | ): Class>; 117 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-vector-icons", 3 | "version": "6.6.0", 4 | "description": "Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling.", 5 | "main": "dist/index.js", 6 | "bin": { 7 | "fa5-upgrade": "./bin/fa5-upgrade.sh", 8 | "generate-icon": "./bin/generate-icon.js" 9 | }, 10 | "scripts": { 11 | "test": "eslint index.js {bin,lib}/*.js", 12 | "format": "prettier index.js *.md {bin,lib,directory,Examples}/**/*.js --write", 13 | "prepublish": "npm run build-web && npm run build-flow", 14 | "build": "./scripts/build-icons.sh", 15 | "build-web": "rm -rf ./dist && babel *.js --out-dir ./dist && babel lib --out-dir ./dist/lib && cp -R ./glyphmaps ./dist/glyphmaps", 16 | "build-flow": "./scripts/build-flow.sh", 17 | "build-antd": "./scripts/antdesign.sh", 18 | "build-entypo": "./scripts/entypo.sh", 19 | "build-evilicons": "./scripts/evilicons.sh", 20 | "build-fontawesome": "./scripts/fontawesome.sh", 21 | "build-fontawesome5": "./scripts/fontawesome5.sh", 22 | "build-fontisto": "./scripts/fontisto.sh", 23 | "build-feather": "./scripts/feather.sh", 24 | "build-foundation": "./scripts/foundation.sh", 25 | "build-ionicons": "./scripts/ionicons.sh", 26 | "build-materialicons": "./scripts/materialicons.sh", 27 | "build-materialcommunityicons": "./scripts/materialcommunityicons.sh", 28 | "build-octicons": "./scripts/octicons.sh", 29 | "build-zocial": "./scripts/zocial.sh", 30 | "build-simplelineicons": "./scripts/simplelineicons.sh" 31 | }, 32 | "keywords": [ 33 | "react-native", 34 | "react-component", 35 | "react-native-component", 36 | "react", 37 | "mobile", 38 | "ios", 39 | "android", 40 | "osx", 41 | "windows", 42 | "macos", 43 | "ui", 44 | "icon", 45 | "icons", 46 | "vector", 47 | "retina", 48 | "font" 49 | ], 50 | "author": { 51 | "name": "Joel Arvidsson", 52 | "email": "joel@oblador.se" 53 | }, 54 | "homepage": "https://github.com/oblador/react-native-vector-icons", 55 | "bugs": { 56 | "url": "https://github.com/oblador/react-native-vector-icons/issues" 57 | }, 58 | "repository": { 59 | "type": "git", 60 | "url": "git://github.com/oblador/react-native-vector-icons.git" 61 | }, 62 | "license": "MIT", 63 | "rnpm": { 64 | "assets": [ 65 | "Fonts" 66 | ] 67 | }, 68 | "dependencies": { 69 | "lodash": "^4.17.15", 70 | "prop-types": "^15.6.2", 71 | "yargs": "^13.2.2" 72 | }, 73 | "devDependencies": { 74 | "@babel/cli": "^7.5.5", 75 | "@babel/core": "^7.5.5", 76 | "@mdi/font": "^4.0.96", 77 | "babel-eslint": "^10.0.2", 78 | "eslint": "^6.2.1", 79 | "eslint-config-airbnb": "18.0.1", 80 | "eslint-config-prettier": "^6.1.0", 81 | "eslint-plugin-import": "^2.18.2", 82 | "eslint-plugin-jsx-a11y": "^6.2.3", 83 | "eslint-plugin-prettier": "^3.1.0", 84 | "eslint-plugin-react": "^7.14.3", 85 | "eslint-plugin-react-hooks": "^1.7.0", 86 | "evil-icons": "^1.10.1", 87 | "feather-icons": "^4.21.0", 88 | "font-awesome": "^4.6.3", 89 | "fontisto": "^3.0.4", 90 | "ionicons": "^4.0.0", 91 | "material-design-icons": "^3.0.1", 92 | "metro-react-native-babel-preset": "^0.56.0", 93 | "octicons": "^8.4.1", 94 | "prettier": "^1.18.2" 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /FONTAWESOME5.md: -------------------------------------------------------------------------------- 1 | # FontAwesome 5 2 | 3 | FontAwesome 5 is split into three different font files which makes it somewhat 4 | harder to use in some cases. The implemented solution should be fairly 5 | straightforward to use after it has been setup. 6 | Android and iOS handles fonts differently which is why it could be 7 | easily implemented without any additional setup. 8 | 9 | ### Table of Content 10 | 11 | - [`Usage`](#usage) 12 | - [`Upgrading to Pro`](#upgrading-to-pro) 13 | 14 | # Usage 15 | 16 | Using the standard icons works just like the standard icons in this library. 17 | 18 | ```javascript 19 | import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; 20 | 21 | const icon = ; 22 | ``` 23 | 24 | Something special about the FontAwesome5 class is that you can also pass props 25 | to change the style of the icon: 26 | 27 | ```javascript 28 | import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; 29 | 30 | const icon = ; 31 | const icon = ; 32 | ``` 33 | 34 | **Valid types** 35 | 36 | | Type | Description | 37 | | --------- | ------------------------------------------- | 38 | | **brand** | Uses the Brands font | 39 | | **light** | Uses the Light font (pro) or Regular (Free) | 40 | | **solid** | Uses the Solid font | 41 | 42 | No specified type indicates Regular font. 43 | 44 | Button, TabBarItem etc. works the same way: 45 | 46 | ```javascript 47 | import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; 48 | 49 | const regular_icon_btn = ; 50 | const solid_icon_btn = ; 51 | ``` 52 | 53 | ## getImageSource 54 | 55 | `getImageSource` works a little different due to its native backend and how 56 | the font is separated into different files. Therefore, the enum FA5Style is 57 | defined to help setting the style of the font: 58 | 59 | ```javascript 60 | const FA5Style = { 61 | regular: 0, 62 | light: 1, 63 | solid: 2, 64 | brand: 3, 65 | }; 66 | ``` 67 | 68 | Use this to select which style the generated image should have: 69 | 70 | ```javascript 71 | import FontAwesome5, { FA5Style } from 'react-native-vector-icons/FontAwesome5'; 72 | 73 | FontAwesome5.getImageSource('comments', 30, '#000', FA5Style.solid).then( 74 | source => this.setState({ image: source }) 75 | ); 76 | ``` 77 | 78 | Not passing a style will result in Regular style. 79 | 80 | # Upgrading to Pro 81 | 82 | You need your FontAwesome npm token which can be obtained by logging into your 83 | account and then access the `Services` tab. 84 | 85 | Run `./node_modules/.bin/fa5-upgrade` and enter the token when asked to in order to 86 | upgrade to the Pro version. 87 | 88 | ## Manually 89 | 90 | If the shell script does not work you can install the Pro version manually. 91 | All you really need to do is adding the Pro fonts to your project, there is 92 | instructions on how to do this in main README.md. 93 | 94 | ## Using the Pro version 95 | 96 | Just as easy as using the Free icons, just include the icon set like this: 97 | 98 | ```javascript 99 | import FontAwesome5Pro from 'react-native-vector-icons/FontAwesome5Pro'; 100 | 101 | const icon = ; 102 | ``` 103 | -------------------------------------------------------------------------------- /Examples/IconExplorer/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem http://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 33 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 34 | 35 | @rem Find java.exe 36 | if defined JAVA_HOME goto findJavaFromJavaHome 37 | 38 | set JAVA_EXE=java.exe 39 | %JAVA_EXE% -version >NUL 2>&1 40 | if "%ERRORLEVEL%" == "0" goto init 41 | 42 | echo. 43 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 44 | echo. 45 | echo Please set the JAVA_HOME variable in your environment to match the 46 | echo location of your Java installation. 47 | 48 | goto fail 49 | 50 | :findJavaFromJavaHome 51 | set JAVA_HOME=%JAVA_HOME:"=% 52 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 53 | 54 | if exist "%JAVA_EXE%" goto init 55 | 56 | echo. 57 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 58 | echo. 59 | echo Please set the JAVA_HOME variable in your environment to match the 60 | echo location of your Java installation. 61 | 62 | goto fail 63 | 64 | :init 65 | @rem Get command-line arguments, handling Windows variants 66 | 67 | if not "%OS%" == "Windows_NT" goto win9xME_args 68 | 69 | :win9xME_args 70 | @rem Slurp the command line arguments. 71 | set CMD_LINE_ARGS= 72 | set _SKIP=2 73 | 74 | :win9xME_args_slurp 75 | if "x%~1" == "x" goto execute 76 | 77 | set CMD_LINE_ARGS=%* 78 | 79 | :execute 80 | @rem Setup the command line 81 | 82 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 83 | 84 | @rem Execute Gradle 85 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 86 | 87 | :end 88 | @rem End local scope for the variables with windows NT shell 89 | if "%ERRORLEVEL%"=="0" goto mainEnd 90 | 91 | :fail 92 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 93 | rem the _cmd.exe /c_ return code! 94 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 95 | exit /b 1 96 | 97 | :mainEnd 98 | if "%OS%"=="Windows_NT" endlocal 99 | 100 | :omega 101 | -------------------------------------------------------------------------------- /Examples/IconExplorer/IconList.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import { 3 | DeviceEventEmitter, 4 | FlatList, 5 | Platform, 6 | StyleSheet, 7 | Text, 8 | TextInput, 9 | View, 10 | } from './react-native'; 11 | 12 | const styles = StyleSheet.create({ 13 | container: { 14 | flex: 1, 15 | backgroundColor: 'white', 16 | }, 17 | searchBar: { 18 | padding: 3, 19 | paddingLeft: 8, 20 | flexDirection: 'row', 21 | alignItems: 'center', 22 | borderBottomWidth: StyleSheet.hairlineWidth, 23 | borderColor: '#ccc', 24 | }, 25 | searchBarInput: { 26 | fontSize: 15, 27 | flex: 1, 28 | height: 45, 29 | }, 30 | list: { 31 | flex: 1, 32 | }, 33 | row: { 34 | flexDirection: 'row', 35 | justifyContent: 'center', 36 | padding: 10, 37 | overflow: 'hidden', 38 | borderBottomWidth: StyleSheet.hairlineWidth, 39 | borderColor: '#ccc', 40 | }, 41 | icon: { 42 | textAlign: 'center', 43 | marginRight: 10, 44 | width: 20, 45 | }, 46 | text: { 47 | flex: 1, 48 | }, 49 | }); 50 | 51 | const getFilteredGlyphNames = (iconSet, query) => 52 | iconSet.glyphNames.filter(glyphNames => 53 | glyphNames.find(glyphName => glyphName.indexOf(query) !== -1) 54 | ); 55 | 56 | const keyExtractor = item => item[0]; 57 | 58 | export default class IconList extends PureComponent { 59 | state = { 60 | filter: '', 61 | }; 62 | 63 | componentDidMount() { 64 | if (Platform.OS === 'osx') { 65 | this.searchListner = DeviceEventEmitter.addListener('onSearchIcons', e => 66 | this.setFilter(e.query) 67 | ); 68 | } 69 | } 70 | 71 | componentWillUnmount() { 72 | if (this.searchListner) { 73 | this.searchListner.remove(); 74 | } 75 | } 76 | 77 | setFilter(filter) { 78 | this.setState({ 79 | filter: filter.toLowerCase(), 80 | }); 81 | } 82 | 83 | handleSearchChange = event => { 84 | const filter = event.nativeEvent.text.toLowerCase(); 85 | this.setFilter(filter); 86 | }; 87 | 88 | renderListItem = ({ item }) => { 89 | const Icon = this.props.iconSet.component; 90 | return ( 91 | 92 | 93 | {item.join(', ')} 94 | 95 | ); 96 | }; 97 | 98 | render() { 99 | const glyphNames = getFilteredGlyphNames( 100 | this.props.iconSet, 101 | this.state.filter 102 | ); 103 | 104 | return ( 105 | 106 | {Platform.OS !== 'osx' && ( 107 | 108 | 116 | 117 | )} 118 | 129 | 130 | ); 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /Examples/IconExplorer/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore unexpected extra "@providesModule" 9 | .*/node_modules/.*/node_modules/fbjs/.* 10 | 11 | ; Ignore duplicate module providers 12 | ; For RN Apps installed via npm, "Libraries" folder is inside 13 | ; "node_modules/react-native" but in the source repo it is in the root 14 | node_modules/react-native/Libraries/react-native/React.js 15 | 16 | ; Ignore polyfills 17 | node_modules/react-native/Libraries/polyfills/.* 18 | 19 | ; These should not be required directly 20 | ; require from fbjs/lib instead: require('fbjs/lib/warning') 21 | node_modules/warning/.* 22 | 23 | ; Flow doesn't support platforms 24 | .*/Libraries/Utilities/HMRLoadingView.js 25 | 26 | [untyped] 27 | .*/node_modules/@react-native-community/cli/.*/.* 28 | 29 | [include] 30 | 31 | [libs] 32 | node_modules/react-native/Libraries/react-native/react-native-interface.js 33 | node_modules/react-native/flow/ 34 | 35 | [options] 36 | emoji=true 37 | 38 | esproposal.optional_chaining=enable 39 | esproposal.nullish_coalescing=enable 40 | 41 | module.file_ext=.js 42 | module.file_ext=.json 43 | module.file_ext=.ios.js 44 | 45 | module.system=haste 46 | module.system.haste.use_name_reducers=true 47 | # get basename 48 | module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1' 49 | # strip .js or .js.flow suffix 50 | module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1' 51 | # strip .ios suffix 52 | module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1' 53 | module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1' 54 | module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1' 55 | module.system.haste.paths.blacklist=.*/__tests__/.* 56 | module.system.haste.paths.blacklist=.*/__mocks__/.* 57 | module.system.haste.paths.whitelist=/node_modules/react-native/Libraries/.* 58 | module.system.haste.paths.whitelist=/node_modules/react-native/RNTester/.* 59 | module.system.haste.paths.whitelist=/node_modules/react-native/IntegrationTests/.* 60 | module.system.haste.paths.blacklist=/node_modules/react-native/Libraries/react-native/react-native-implementation.js 61 | module.system.haste.paths.blacklist=/node_modules/react-native/Libraries/Animated/src/polyfills/.* 62 | 63 | munge_underscores=true 64 | 65 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 66 | 67 | suppress_type=$FlowIssue 68 | suppress_type=$FlowFixMe 69 | suppress_type=$FlowFixMeProps 70 | suppress_type=$FlowFixMeState 71 | 72 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\) 73 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+ 74 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 75 | 76 | [lints] 77 | sketchy-null-number=warn 78 | sketchy-null-mixed=warn 79 | sketchy-number=warn 80 | untyped-type-import=warn 81 | nonstrict-import=warn 82 | deprecated-type=warn 83 | unsafe-getters-setters=warn 84 | inexact-spread=warn 85 | unnecessary-invariant=warn 86 | signature-verification-failure=warn 87 | deprecated-utility=error 88 | 89 | [strict] 90 | deprecated-type 91 | nonstrict-import 92 | sketchy-null 93 | unclear-type 94 | unsafe-getters-setters 95 | untyped-import 96 | untyped-type-import 97 | 98 | [version] 99 | ^0.98.0 100 | -------------------------------------------------------------------------------- /Examples/IconExplorer/ios/IconExplorer/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Examples/TabBarExample/iOS/TabBarExample/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /lib/icon-button.js: -------------------------------------------------------------------------------- 1 | import isString from 'lodash/isString'; 2 | import omit from 'lodash/omit'; 3 | import pick from 'lodash/pick'; 4 | import React, { PureComponent } from 'react'; 5 | import PropTypes from 'prop-types'; 6 | import { StyleSheet, Text, TouchableHighlight, View } from './react-native'; 7 | 8 | const styles = StyleSheet.create({ 9 | container: { 10 | flexDirection: 'row', 11 | justifyContent: 'flex-start', 12 | alignItems: 'center', 13 | padding: 8, 14 | }, 15 | touchable: { 16 | overflow: 'hidden', 17 | }, 18 | icon: { 19 | marginRight: 10, 20 | }, 21 | text: { 22 | fontWeight: '600', 23 | backgroundColor: 'transparent', 24 | }, 25 | }); 26 | 27 | const IOS7_BLUE = '#007AFF'; 28 | 29 | const TEXT_PROP_NAMES = [ 30 | 'ellipsizeMode', 31 | 'numberOfLines', 32 | 'textBreakStrategy', 33 | 'selectable', 34 | 'suppressHighlighting', 35 | 'allowFontScaling', 36 | 'adjustsFontSizeToFit', 37 | 'minimumFontScale', 38 | ]; 39 | 40 | const TOUCHABLE_PROP_NAMES = [ 41 | 'accessible', 42 | 'accessibilityLabel', 43 | 'accessibilityHint', 44 | 'accessibilityComponentType', 45 | 'accessibilityRole', 46 | 'accessibilityStates', 47 | 'accessibilityTraits', 48 | 'onFocus', 49 | 'onBlur', 50 | 'disabled', 51 | 'onPress', 52 | 'onPressIn', 53 | 'onPressOut', 54 | 'onLayout', 55 | 'onLongPress', 56 | 'nativeID', 57 | 'testID', 58 | 'delayPressIn', 59 | 'delayPressOut', 60 | 'delayLongPress', 61 | 'activeOpacity', 62 | 'underlayColor', 63 | 'selectionColor', 64 | 'onShowUnderlay', 65 | 'onHideUnderlay', 66 | 'hasTVPreferredFocus', 67 | 'tvParallaxProperties', 68 | ]; 69 | 70 | export default function createIconButtonComponent(Icon) { 71 | return class IconButton extends PureComponent { 72 | static propTypes = { 73 | backgroundColor: PropTypes.oneOfType([ 74 | PropTypes.string, 75 | PropTypes.number, 76 | ]), 77 | borderRadius: PropTypes.number, 78 | color: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 79 | size: PropTypes.number, 80 | iconStyle: PropTypes.any, // eslint-disable-line react/forbid-prop-types 81 | style: PropTypes.any, // eslint-disable-line react/forbid-prop-types 82 | children: PropTypes.node, 83 | }; 84 | 85 | static defaultProps = { 86 | backgroundColor: IOS7_BLUE, 87 | borderRadius: 5, 88 | color: 'white', 89 | size: 20, 90 | }; 91 | 92 | render() { 93 | const { style, iconStyle, children, ...restProps } = this.props; 94 | 95 | const iconProps = pick( 96 | restProps, 97 | TEXT_PROP_NAMES, 98 | 'style', 99 | 'name', 100 | 'size', 101 | 'color' 102 | ); 103 | const touchableProps = pick(restProps, TOUCHABLE_PROP_NAMES); 104 | const props = omit( 105 | restProps, 106 | Object.keys(iconProps), 107 | Object.keys(touchableProps), 108 | 'iconStyle', 109 | 'borderRadius', 110 | 'backgroundColor' 111 | ); 112 | iconProps.style = iconStyle ? [styles.icon, iconStyle] : styles.icon; 113 | 114 | const colorStyle = pick(this.props, 'color'); 115 | const blockStyle = pick(this.props, 'backgroundColor', 'borderRadius'); 116 | 117 | return ( 118 | 122 | 123 | 124 | {isString(children) ? ( 125 | {children} 126 | ) : ( 127 | children 128 | )} 129 | 130 | 131 | ); 132 | } 133 | }; 134 | } 135 | -------------------------------------------------------------------------------- /bin/fa5-upgrade.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | TEMP_DIR_PATH="" 4 | FONTAWESOME_PRO_DIR_NAME="" 5 | DEST_DIR_PATH="assets/fonts" 6 | PROJECT_NAME="react-native-vector-icons" 7 | FONT_NAME="Font Awesome Pro" 8 | 9 | setup_npm_config() 10 | { 11 | # always returns successfull zero code 12 | if [ "$(npm config get @fortawesome:registry)" = "undefined" ]; then 13 | npm config set "@fortawesome:registry" https://npm.fontawesome.com/ 14 | fi 15 | 16 | local npm_token="" 17 | echo "Please enter your $FONT_NAME npm token:"; 18 | read npm_token 19 | npm config set "//npm.fontawesome.com/:_authToken" "${npm_token}" 20 | } 21 | 22 | create_tmp_directory() 23 | { 24 | local tmp_dir="$(mktemp -d -t 'rnvi.XXXXXX')" 25 | retval=$? 26 | if [ "$retval" != 0 ]; then 27 | echo "[FAIL] Can't create temporary directory"; 28 | return 1; 29 | fi 30 | 31 | if [ -z "$tmp_dir" ]; then 32 | echo "[FAIL] Generated temporary directory name is empty"; 33 | return 1; 34 | fi 35 | 36 | TEMP_DIR_PATH="$tmp_dir" 37 | } 38 | 39 | download_and_unpack_fontawesome_pro() 40 | { 41 | local archive_file_name="$(npm pack @fortawesome/fontawesome-pro --silent)" 42 | retval=$? 43 | if [ "$retval" != 0 ]; then 44 | echo "[FAIL] Can't download [$archive_file_name] archive"; 45 | return 1; 46 | fi 47 | 48 | tar -xzf "$archive_file_name" 49 | retval=$? 50 | if [ "$retval" != 0 ]; then 51 | echo "[FAIL] Can't unpack [$archive_file_name] archive"; 52 | return 1; 53 | fi 54 | 55 | local font_dir_name="package" 56 | if [ ! -d "$font_dir_name" ]; then 57 | echo "[FAIL] Archive doesn't contain [$font_dir_name] required directory"; 58 | return 1; 59 | fi 60 | 61 | FONTAWESOME_PRO_DIR_NAME="$font_dir_name" 62 | } 63 | 64 | copy_ttf_fonts_to_dest_dir() 65 | { 66 | mkdir -p "$DEST_DIR_PATH" 67 | retval=$? 68 | if [ "$retval" != 0 ]; then 69 | echo "[FAIL] Can't create [$DEST_DIR_PATH] directory"; 70 | return 1; 71 | fi 72 | 73 | local font_dir_path="$TEMP_DIR_PATH/$FONTAWESOME_PRO_DIR_NAME/webfonts" 74 | 75 | cp "$font_dir_path/fa-brands-400.ttf" "$DEST_DIR_PATH/FontAwesome5_Pro_Brands.ttf" && 76 | cp "$font_dir_path/fa-light-300.ttf" "$DEST_DIR_PATH/FontAwesome5_Pro_Light.ttf" && 77 | cp "$font_dir_path/fa-regular-400.ttf" "$DEST_DIR_PATH/FontAwesome5_Pro_Regular.ttf" && 78 | cp "$font_dir_path/fa-solid-900.ttf" "$DEST_DIR_PATH/FontAwesome5_Pro_Solid.ttf" 79 | 80 | retval=$? 81 | if [ "$retval" != 0 ]; then 82 | echo "[FAIL] Can't copy ttf fonts to [$DEST_DIR_PATH] directory"; 83 | return 1; 84 | fi 85 | } 86 | 87 | modify_package_json() 88 | { 89 | /usr/bin/env node "./node_modules/$PROJECT_NAME/bin/add-font-assets.js" 90 | } 91 | 92 | react_native_link_project() 93 | { 94 | react-native link "$PROJECT_NAME" 95 | } 96 | 97 | if setup_npm_config; then 98 | echo "[SUCCESS] Set up npm config"; 99 | else 100 | exit 1; 101 | fi 102 | 103 | if create_tmp_directory; then 104 | echo "[SUCCESS] Temporary directory [$TEMP_DIR_PATH] was created"; 105 | else 106 | exit 1; 107 | fi 108 | 109 | cd "$TEMP_DIR_PATH" 110 | if download_and_unpack_fontawesome_pro; then 111 | echo "[SUCCESS] $FONT_NAME was unpacked to [$TEMP_DIR_PATH/$FONTAWESOME_PRO_DIR_NAME] directory"; 112 | else 113 | exit 1; 114 | fi 115 | cd - > /dev/null 116 | 117 | if copy_ttf_fonts_to_dest_dir; then 118 | echo "[SUCCESS] Copied $FONT_NAME to [$DEST_DIR_PATH] directory"; 119 | else 120 | exit 1; 121 | fi 122 | 123 | if modify_package_json; then 124 | echo "[SUCCESS] Modified package.json file"; 125 | else 126 | exit 1; 127 | fi 128 | 129 | if react_native_link_project; then 130 | echo "[SUCCESS] Linked $PROJECT_NAME to React Native"; 131 | else 132 | exit 1; 133 | fi 134 | 135 | echo "[SUCCESS] $FONT_NAME was successfully upgraded" 136 | echo "Note: [$TEMP_DIR_PATH] was created. Delete it manually or it will be deleted automatically on next reboot" 137 | -------------------------------------------------------------------------------- /android/src/main/java/com/oblador/vectoricons/VectorIconsModule.java: -------------------------------------------------------------------------------- 1 | package com.oblador.vectoricons; 2 | 3 | import android.content.Context; 4 | import android.graphics.Paint; 5 | import android.graphics.Canvas; 6 | import android.graphics.Typeface; 7 | import android.graphics.Rect; 8 | import android.graphics.Bitmap; 9 | import android.graphics.Bitmap.CompressFormat; 10 | import android.util.Log; 11 | 12 | import com.facebook.react.bridge.NativeModule; 13 | import com.facebook.react.bridge.ReactApplicationContext; 14 | import com.facebook.react.bridge.ReactContext; 15 | import com.facebook.react.bridge.ReactContextBaseJavaModule; 16 | import com.facebook.react.bridge.ReactMethod; 17 | import com.facebook.react.bridge.Callback; 18 | import com.facebook.react.views.text.ReactFontManager; 19 | 20 | import java.io.File; 21 | import java.io.FileOutputStream; 22 | import java.io.IOException; 23 | import java.io.FileNotFoundException; 24 | import java.util.HashMap; 25 | import java.util.Map; 26 | 27 | public class VectorIconsModule extends ReactContextBaseJavaModule { 28 | 29 | private static final Map sTypefaceCache = new HashMap(); 30 | 31 | public static final String REACT_CLASS = "RNVectorIconsModule"; 32 | 33 | @Override 34 | public String getName() { 35 | return REACT_CLASS; 36 | } 37 | 38 | public VectorIconsModule(ReactApplicationContext reactContext) { 39 | super(reactContext); 40 | } 41 | 42 | @ReactMethod 43 | public void getImageForFont(String fontFamily, String glyph, Integer fontSize, Integer color, Callback callback) { 44 | Context context = getReactApplicationContext(); 45 | File cacheFolder = context.getCacheDir(); 46 | String cacheFolderPath = cacheFolder.getAbsolutePath() + "/"; 47 | 48 | float scale = context.getResources().getDisplayMetrics().density; 49 | String scaleSuffix = "@" + (scale == (int) scale ? Integer.toString((int) scale) : Float.toString(scale)) + "x"; 50 | int size = Math.round(fontSize*scale); 51 | String cacheKey = fontFamily + ":" + glyph + ":" + color; 52 | String hash = Integer.toString(cacheKey.hashCode(), 32); 53 | String cacheFilePath = cacheFolderPath + hash + "_" + Integer.toString(fontSize) + scaleSuffix + ".png"; 54 | String cacheFileUrl = "file://" + cacheFilePath; 55 | File cacheFile = new File(cacheFilePath); 56 | 57 | if(cacheFile.exists()) { 58 | callback.invoke(null, cacheFileUrl); 59 | } else { 60 | FileOutputStream fos = null; 61 | Typeface typeface = ReactFontManager.getInstance().getTypeface(fontFamily, 0, context.getAssets()); 62 | Paint paint = new Paint(); 63 | paint.setTypeface(typeface); 64 | paint.setColor(color); 65 | paint.setTextSize(size); 66 | paint.setAntiAlias(true); 67 | Rect textBounds = new Rect(); 68 | paint.getTextBounds(glyph, 0, glyph.length(), textBounds); 69 | 70 | int offsetX = 0; 71 | int offsetY = size - (int) paint.getFontMetrics().bottom; 72 | 73 | Bitmap bitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888); 74 | Canvas canvas = new Canvas(bitmap); 75 | canvas.drawText(glyph, offsetX, offsetY, paint); 76 | 77 | try { 78 | fos = new FileOutputStream(cacheFile); 79 | bitmap.compress(CompressFormat.PNG, 100, fos); 80 | fos.flush(); 81 | fos.close(); 82 | fos = null; 83 | 84 | callback.invoke(null, cacheFileUrl); 85 | } catch (FileNotFoundException e) { 86 | callback.invoke(e.getMessage()); 87 | } catch (IOException e) { 88 | callback.invoke(e.getMessage()); 89 | } 90 | finally { 91 | if (fos != null) { 92 | try { 93 | fos.close(); 94 | fos = null; 95 | } 96 | catch (IOException e) { 97 | e.printStackTrace(); 98 | } 99 | } 100 | } 101 | } 102 | } 103 | 104 | } 105 | -------------------------------------------------------------------------------- /scripts/feather.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash -e 2 | 3 | # Feather temporary assets output directory 4 | FEATHER_DIR="Feather" 5 | FEATHER_JS="Feather.js" 6 | 7 | check_font_custom() { 8 | FONT_CUSTOM=`which fontcustom` 9 | if [[ ! -x "${FONT_CUSTOM}" ]]; then return 1; fi 10 | } 11 | 12 | check_nodejs() { 13 | NODE=`which node` 14 | if [[ ! -x "${NODE}" ]]; then return 1; fi 15 | } 16 | 17 | check_parallel() { 18 | PARALLEL=`which parallel` 19 | if [[ ! -x "${PARALLEL}" ]]; then return 1; fi 20 | } 21 | 22 | check_inkscape() { 23 | INKSCAPE=`which inkscape` 24 | if [[ ! -x "${INKSCAPE}" ]]; then return 1; fi 25 | } 26 | 27 | print() { 28 | printf "\e[0m${1}" 29 | } 30 | 31 | success() { 32 | printf "\e[32m${1}\n" 33 | } 34 | 35 | fail() { 36 | printf "\e[31m${1}\n" 37 | } 38 | 39 | run_generation() { 40 | yarn 41 | 42 | if [[ -z "${XVFB}" ]]; then 43 | print "Xvfb not informed, trying to find\n" 44 | OSNAME=`uname -s` 45 | if [[ ${OSNAME} == 'Linux' ]]; then XVFB=`which Xvfb`; 46 | elif [[ ${OSNAME} == 'Darwin' ]]; then XVFB='/usr/X11/bin/Xvfb'; 47 | fi 48 | fi 49 | 50 | TEMP_DIR=`mktemp -d` 51 | print "Using ${TEMP_DIR} as temporary directory\n" 52 | cp node_modules/feather-icons/dist/icons/* "$TEMP_DIR" 53 | CMD="${PARALLEL} --bar ${INKSCAPE} -f {} --verb=EditSelectAll --verb=StrokeToPath --verb=FileSave --verb=FileQuit ::: ${TEMP_DIR}/*.svg" 54 | 55 | if [[ -x "${XVFB}" ]]; then 56 | print "Using Xvfb located in ${XVFB}\n" 57 | # this part is borrow from xfvb-run from linux 58 | SERVERNUM=2019 59 | AUTHFILE=$(mktemp -p "$TEMP_DIR" Xauthority.XXXXXX) 60 | XVFBARGS="-screen 0 640x480x24" 61 | LISTENTCP="-nolisten tcp" 62 | XAUTHORITY=$AUTHFILE ${XVFB} ":$SERVERNUM" $XVFBARGS $LISTENTCP >> /dev/null 2>&1 & 63 | XVFBPID=$! && DISPLAY=":$SERVERNUM" ${CMD} && kill ${XVFBPID} 64 | else 65 | print "Xvfb not located\n" 66 | ${CMD} 67 | fi 68 | 69 | print "Cleaning older installations..." 70 | rm -rf ${FEATHER_DIR} || true 71 | if [ -d "${FEATHER_DIR}" ]; then show_error "Can't remove Feather temp directory."; fi 72 | success "OK" 73 | 74 | print "Generating assets based on Feather specified in package.json..." 75 | ${FONT_CUSTOM} compile ${TEMP_DIR}\ 76 | --font-name=Feather\ 77 | --output=${FEATHER_DIR}\ 78 | --quiet\ 79 | --force\ 80 | --no-hash 81 | if [ ! -f "${FEATHER_DIR}/Feather.css" ]; then show_error "Can't generate assets."; fi 82 | success "OK" 83 | 84 | print "Generating JS file mapping..." 85 | ${NODE} bin/generate-icon ${FEATHER_DIR}/Feather.css\ 86 | --prefix=.icon-\ 87 | --componentName=Feather\ 88 | --fontFamily=Feather\ 89 | --template=templates/separated-icon-set.tpl\ 90 | --glyphmap=glyphmaps/Feather.json > Feather.js 91 | if [ ! -s "${FEATHER_JS}" ]; then show_error "Feather.js not generated or zero sized."; fi 92 | success "OK" 93 | 94 | print "Moving TTF font to right path..." 95 | mv "${FEATHER_DIR}/Feather.ttf" "Fonts/Feather.ttf" && rm -rf ${TEMP_DIR} && rm -rf ${FEATHER_DIR} 96 | if [ -d "${FEATHER_DIR}" ]; then show_error "Can't remove Feather temp directory."; fi 97 | success "OK" 98 | } 99 | 100 | show_help() { 101 | print "$1 not found in your PATH.\n" 102 | print "To generate this font, its necessary to use a helper utility named FontCustom with NodeJS.\n" 103 | print "Go to https://github.com/oblador/react-native-vector-icons/blob/master/BUILDING_FEATHER.md and follow the instructions.\n" 104 | exit 1 105 | } 106 | 107 | show_error() { 108 | fail "Oh no, something goes wrong." 109 | if [ ! -z "$1" ]; then fail "${1}"; fi 110 | fail "Check your installation and try again." 111 | exit 1 112 | } 113 | 114 | check_nodejs || show_help "NodeJS" 115 | check_font_custom || show_help "FontCustom" 116 | check_inkscape || show_help "Inkscape" 117 | check_parallel || show_help "GNU Parallel" 118 | 119 | set +e 120 | run_generation 121 | set -e 122 | 123 | success "If you see this message, everything is OK." -------------------------------------------------------------------------------- /lib/create-multi-style-icon-set.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import createIconSet, { 5 | DEFAULT_ICON_COLOR, 6 | DEFAULT_ICON_SIZE, 7 | } from './create-icon-set'; 8 | 9 | export default function createMultiStyleIconSet(styles, optionsInput = {}) { 10 | const styleNames = Object.keys(styles); 11 | 12 | if (styleNames.length === 0) { 13 | throw new Error('You need to add at least one style'); 14 | } 15 | 16 | const options = { 17 | defaultStyle: styleNames[0], 18 | fallbackFamily: () => styleNames[0], 19 | glyphValidator: () => true, 20 | ...optionsInput, 21 | }; 22 | 23 | const iconSets = styleNames.reduce((acc, name) => { 24 | const style = styles[name]; 25 | 26 | acc[name] = createIconSet( 27 | style.glyphMap || {}, 28 | style.fontFamily || '', 29 | style.fontFile || '', 30 | style.fontStyle || {} 31 | ); 32 | 33 | return acc; 34 | }, {}); 35 | 36 | function styleFromProps(props) { 37 | return Object.keys(props).reduce( 38 | (result, propName) => 39 | styleNames.indexOf(propName) !== -1 && props[propName] === true 40 | ? propName 41 | : result, 42 | options.defaultStyle 43 | ); 44 | } 45 | 46 | function getIconSetForProps(props) { 47 | const { name } = props; 48 | const style = styleFromProps(props); 49 | 50 | if (options.glyphValidator(name, style)) return iconSets[style]; 51 | 52 | const family = options.fallbackFamily(name); 53 | 54 | if (styleNames.indexOf(family) === -1) { 55 | return options.defaultStyle; 56 | } 57 | 58 | return iconSets[family]; 59 | } 60 | 61 | function selectIconClass(iconSet, iconClass) { 62 | return iconClass.length > 0 ? iconSet[iconClass] : iconSet; 63 | } 64 | 65 | function reduceProps(props) { 66 | return Object.keys(props).reduce((acc, prop) => { 67 | if (styleNames.indexOf(prop) === -1) { 68 | acc[prop] = props[prop]; 69 | } 70 | 71 | return acc; 72 | }, {}); 73 | } 74 | 75 | function getStyledIconSet(style, name = '') { 76 | if (styleNames.indexOf(style) === -1) { 77 | return iconSets[options.defaultStyle]; 78 | } 79 | 80 | return !name 81 | ? iconSets[styleFromProps({ [style]: true })] 82 | : getIconSetForProps({ name, [style]: true }); 83 | } 84 | 85 | function getImageSource( 86 | name, 87 | size = DEFAULT_ICON_SIZE, 88 | color = DEFAULT_ICON_COLOR, 89 | style = options.defaultStyle 90 | ) { 91 | return getStyledIconSet(style, name).getImageSource(name, size, color); 92 | } 93 | 94 | function getFontFamily(style = options.defaultStyle) { 95 | return getStyledIconSet(style).getFontFamily(); 96 | } 97 | 98 | function getRawGlyphMap(style = options.defaultStyle) { 99 | return getStyledIconSet(style).getRawGlyphMap(); 100 | } 101 | 102 | function hasIcon(name, style = options.defaultStyle) { 103 | return options.glyphValidator(name, style); 104 | } 105 | 106 | function createStyledIconClass(selectClass = '') { 107 | class IconClass extends PureComponent { 108 | static propTypes = styleNames.reduce((acc, name) => { 109 | acc[name] = PropTypes.bool; 110 | return acc; 111 | }, {}); 112 | 113 | static defaultProps = styleNames.reduce((acc, name) => { 114 | acc[name] = false; 115 | return acc; 116 | }, {}); 117 | 118 | render() { 119 | const selectedIconSet = getIconSetForProps(this.props); 120 | const SelectedIconClass = selectIconClass(selectedIconSet, selectClass); 121 | const props = reduceProps(this.props); 122 | 123 | return ; 124 | } 125 | } 126 | 127 | return IconClass; 128 | } 129 | 130 | const Icon = createStyledIconClass(); 131 | Icon.Button = createStyledIconClass('Button'); 132 | Icon.TabBarItem = createStyledIconClass('TabBarItem'); 133 | Icon.TabBarItemIOS = createStyledIconClass('TabBarItemIOS'); 134 | Icon.ToolbarAndroid = createStyledIconClass('ToolbarAndroid'); 135 | Icon.getStyledIconSet = getStyledIconSet; 136 | Icon.getImageSource = getImageSource; 137 | Icon.getFontFamily = getFontFamily; 138 | Icon.getRawGlyphMap = getRawGlyphMap; 139 | Icon.hasIcon = hasIcon; 140 | 141 | return Icon; 142 | } 143 | -------------------------------------------------------------------------------- /directory/src/App.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'AntDesign'; 3 | src: url('../../Fonts/AntDesign.ttf') format('truetype'); 4 | } 5 | 6 | @font-face { 7 | font-family: 'Entypo'; 8 | src: url('../../Fonts/Entypo.ttf') format('truetype'); 9 | } 10 | 11 | @font-face { 12 | font-family: 'EvilIcons'; 13 | src: url('../../Fonts/EvilIcons.ttf') format('truetype'); 14 | } 15 | 16 | @font-face { 17 | font-family: 'Feather'; 18 | src: url('../../Fonts/Feather.ttf') format('truetype'); 19 | } 20 | 21 | @font-face { 22 | font-family: 'FontAwesome'; 23 | src: url('../../Fonts/FontAwesome.ttf') format('truetype'); 24 | } 25 | 26 | @font-face { 27 | font-family: 'FontAwesome5'; 28 | src: url('../../Fonts/FontAwesome5_Solid.ttf') format('truetype'); 29 | } 30 | 31 | @font-face { 32 | font-family: 'FontAwesome5Brands'; 33 | src: url('../../Fonts/FontAwesome5_Brands.ttf') format('truetype'); 34 | } 35 | 36 | @font-face { 37 | font-family: 'Fontisto'; 38 | src: url('../../Fonts/Fontisto.ttf') format('truetype'); 39 | } 40 | 41 | @font-face { 42 | font-family: 'Foundation'; 43 | src: url('../../Fonts/Foundation.ttf') format('truetype'); 44 | } 45 | 46 | @font-face { 47 | font-family: 'Ionicons'; 48 | src: url('../../Fonts/Ionicons.ttf') format('truetype'); 49 | } 50 | 51 | @font-face { 52 | font-family: 'MaterialCommunityIcons'; 53 | src: url('../../Fonts/MaterialCommunityIcons.ttf') format('truetype'); 54 | } 55 | 56 | @font-face { 57 | font-family: 'MaterialIcons'; 58 | src: url('../../Fonts/MaterialIcons.ttf') format('truetype'); 59 | } 60 | 61 | @font-face { 62 | font-family: 'Octicons'; 63 | src: url('../../Fonts/Octicons.ttf') format('truetype'); 64 | } 65 | 66 | @font-face { 67 | font-family: 'SimpleLineIcons'; 68 | src: url('../../Fonts/SimpleLineIcons.ttf') format('truetype'); 69 | } 70 | 71 | @font-face { 72 | font-family: 'Zocial'; 73 | src: url('../../Fonts/Zocial.ttf') format('truetype'); 74 | } 75 | 76 | * { 77 | -webkit-box-sizing: border-box; 78 | box-sizing: border-box; 79 | } 80 | 81 | body { 82 | overflow-x: hidden; 83 | overflow-y: auto; 84 | } 85 | 86 | .App { 87 | width: 100%; 88 | } 89 | 90 | .Header-Container { 91 | padding: 20px 20px 0 20px; 92 | background-color: #23527c; 93 | color: #fff; 94 | } 95 | 96 | .Header-Content { 97 | max-width: 1200px; 98 | margin: 0 auto; 99 | } 100 | 101 | .Header-Title { 102 | margin: 0; 103 | font-size: 18px; 104 | font-weight: normal; 105 | } 106 | 107 | .Search-Container { 108 | padding: 20px; 109 | background-color: #23527c; 110 | color: #fff; 111 | } 112 | 113 | .Search-Content { 114 | max-width: 1200px; 115 | margin: 0 auto; 116 | } 117 | 118 | .Search-Form { 119 | display: flex; 120 | background-color: #fff; 121 | color: #333; 122 | border-radius: 3px; 123 | } 124 | 125 | .Search-Label { 126 | padding: 10px; 127 | border-right: 1px solid #eee; 128 | } 129 | 130 | .Search-Icon { 131 | } 132 | 133 | .Search-Input { 134 | flex-grow: 1; 135 | padding: 10px; 136 | border: 0; 137 | border-radius: 0 3px 3px 0; 138 | font-size: inherit; 139 | } 140 | 141 | .Search-Input:focus { 142 | outline: none; 143 | } 144 | 145 | .Container { 146 | max-width: 1200px; 147 | margin: 0 auto; 148 | padding-top: 60px; 149 | } 150 | 151 | .Result-Row { 152 | margin-bottom: 60px; 153 | } 154 | 155 | .Result-Title { 156 | margin: 0; 157 | padding: 1em 20px; 158 | font-size: 200%; 159 | font-weight: normal; 160 | color: #fff; 161 | background-color: #f66; 162 | } 163 | 164 | .Result-List { 165 | display: flex; 166 | flex-wrap: wrap; 167 | } 168 | 169 | .Result-Icon-Container { 170 | width: 50%; 171 | padding: 20px; 172 | text-align: center; 173 | outline: 1px solid #eee; 174 | background-color: #fff; 175 | } 176 | 177 | @media (min-width: 480px) { 178 | .Result-Icon-Container { 179 | width: 33%; 180 | } 181 | } 182 | 183 | @media (min-width: 600px) { 184 | .Result-Icon-Container { 185 | width: 25%; 186 | } 187 | } 188 | 189 | @media (min-width: 768px) { 190 | .Result-Icon-Container { 191 | width: 20%; 192 | } 193 | } 194 | 195 | @media (min-width: 992px) { 196 | .Result-Icon-Container { 197 | width: 14.27%; 198 | } 199 | } 200 | 201 | .Result-Icon { 202 | font-size: 35px; 203 | } 204 | 205 | .Result-Icon-Name { 206 | font-size: 14px; 207 | font-weight: normal; 208 | opacity: 0.8; 209 | margin: 10px 0 0 0; 210 | } 211 | -------------------------------------------------------------------------------- /Examples/IconExplorer/windows/IconExplorer/App.xaml.cs: -------------------------------------------------------------------------------- 1 | using ReactNative; 2 | using System; 3 | using Windows.ApplicationModel; 4 | using Windows.ApplicationModel.Activation; 5 | using Windows.UI.Core; 6 | using Windows.UI.Xaml; 7 | using Windows.UI.Xaml.Controls; 8 | using Windows.UI.Xaml.Navigation; 9 | 10 | namespace IconExplorer 11 | { 12 | /// 13 | /// Provides application-specific behavior to supplement the default Application class. 14 | /// 15 | sealed partial class App : Application 16 | { 17 | private readonly ReactPage _reactPage; 18 | 19 | /// 20 | /// Initializes the singleton application object. This is the first line of authored code 21 | /// executed, and as such is the logical equivalent of main() or WinMain(). 22 | /// 23 | public App() 24 | { 25 | this.InitializeComponent(); 26 | this.Suspending += OnSuspending; 27 | this.Resuming += OnResuming; 28 | 29 | _reactPage = new MainPage(); 30 | } 31 | 32 | /// 33 | /// Invoked when the application is launched normally by the end user. Other entry points 34 | /// will be used such as when the application is launched to open a specific file. 35 | /// 36 | /// Details about the launch request and process. 37 | protected override void OnLaunched(LaunchActivatedEventArgs e) 38 | { 39 | _reactPage.OnResume(Exit); 40 | 41 | #if DEBUG 42 | if (System.Diagnostics.Debugger.IsAttached) 43 | { 44 | this.DebugSettings.EnableFrameRateCounter = true; 45 | } 46 | 47 | SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 48 | AppViewBackButtonVisibility.Visible; 49 | #endif 50 | 51 | Frame rootFrame = Window.Current.Content as Frame; 52 | 53 | // Do not repeat app initialization when the Window already has content, 54 | // just ensure that the window is active 55 | if (rootFrame == null) 56 | { 57 | _reactPage.OnCreate(e.Arguments); 58 | 59 | // Create a Frame to act as the navigation context and navigate to the first page 60 | rootFrame = new Frame(); 61 | 62 | rootFrame.NavigationFailed += OnNavigationFailed; 63 | 64 | // Place the frame in the current Window 65 | Window.Current.Content = rootFrame; 66 | } 67 | 68 | if (rootFrame.Content == null) 69 | { 70 | // When the navigation stack isn't restored navigate to the first page, 71 | // configuring the new page by passing required information as a navigation 72 | // parameter 73 | rootFrame.Content = _reactPage; 74 | } 75 | 76 | // Ensure the current window is active 77 | Window.Current.Activate(); 78 | } 79 | 80 | /// 81 | /// Invoked when Navigation to a certain page fails 82 | /// 83 | /// The Frame which failed navigation 84 | /// Details about the navigation failure 85 | void OnNavigationFailed(object sender, NavigationFailedEventArgs e) 86 | { 87 | throw new Exception("Failed to load Page " + e.SourcePageType.FullName); 88 | } 89 | 90 | /// 91 | /// Invoked when application execution is being suspended. Application state is saved 92 | /// without knowing whether the application will be terminated or resumed with the contents 93 | /// of memory still intact. 94 | /// 95 | /// The source of the suspend request. 96 | /// Details about the suspend request. 97 | private void OnSuspending(object sender, SuspendingEventArgs e) 98 | { 99 | _reactPage.OnSuspend(); 100 | } 101 | 102 | /// 103 | /// Invoked when application execution is being resumed. 104 | /// 105 | /// The source of the resume request. 106 | /// Details about the resume request. 107 | private void OnResuming(object sender, object e) 108 | { 109 | _reactPage.OnResume(Exit); 110 | } 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /glyphmaps/Octicons.json: -------------------------------------------------------------------------------- 1 | { 2 | "alert": 61696, 3 | "archive": 61697, 4 | "arrow-both": 61698, 5 | "arrow-down": 61699, 6 | "arrow-left": 61700, 7 | "arrow-right": 61701, 8 | "arrow-small-down": 61702, 9 | "arrow-small-left": 61703, 10 | "arrow-small-right": 61704, 11 | "arrow-small-up": 61705, 12 | "arrow-up": 61706, 13 | "beaker": 61707, 14 | "bell": 61708, 15 | "bold": 61709, 16 | "book": 61710, 17 | "bookmark": 61711, 18 | "briefcase": 61712, 19 | "broadcast": 61713, 20 | "browser": 61714, 21 | "bug": 61715, 22 | "calendar": 61716, 23 | "check": 61717, 24 | "checklist": 61718, 25 | "chevron-down": 61719, 26 | "chevron-left": 61720, 27 | "chevron-right": 61721, 28 | "chevron-up": 61722, 29 | "circle-slash": 61723, 30 | "circuit-board": 61724, 31 | "clippy": 61725, 32 | "clock": 61726, 33 | "cloud-download": 61727, 34 | "cloud-upload": 61728, 35 | "code": 61729, 36 | "comment": 61730, 37 | "comment-discussion": 61731, 38 | "credit-card": 61732, 39 | "dash": 61733, 40 | "dashboard": 61734, 41 | "database": 61735, 42 | "desktop-download": 61736, 43 | "device-camera": 61737, 44 | "device-camera-video": 61738, 45 | "device-desktop": 61739, 46 | "device-mobile": 61740, 47 | "diff": 61741, 48 | "diff-added": 61742, 49 | "diff-ignored": 61743, 50 | "diff-modified": 61744, 51 | "diff-removed": 61745, 52 | "diff-renamed": 61746, 53 | "ellipsis": 61747, 54 | "eye": 61748, 55 | "eye-closed": 61749, 56 | "file": 61750, 57 | "file-binary": 61751, 58 | "file-code": 61752, 59 | "file-directory": 61753, 60 | "file-media": 61754, 61 | "file-pdf": 61755, 62 | "file-submodule": 61756, 63 | "file-symlink-directory": 61757, 64 | "file-symlink-file": 61758, 65 | "file-zip": 61759, 66 | "flame": 61760, 67 | "fold": 61761, 68 | "fold-down": 61762, 69 | "fold-up": 61763, 70 | "gear": 61764, 71 | "gift": 61765, 72 | "gist": 61766, 73 | "gist-secret": 61767, 74 | "git-branch": 61768, 75 | "git-commit": 61769, 76 | "git-compare": 61770, 77 | "git-merge": 61771, 78 | "git-pull-request": 61772, 79 | "github-action": 61773, 80 | "globe": 61774, 81 | "grabber": 61775, 82 | "graph": 61776, 83 | "heart": 61777, 84 | "history": 61778, 85 | "home": 61779, 86 | "horizontal-rule": 61780, 87 | "hubot": 61781, 88 | "inbox": 61782, 89 | "info": 61783, 90 | "issue-closed": 61784, 91 | "issue-opened": 61785, 92 | "issue-reopened": 61786, 93 | "italic": 61787, 94 | "jersey": 61788, 95 | "kebab-horizontal": 61789, 96 | "kebab-vertical": 61790, 97 | "key": 61791, 98 | "keyboard": 61792, 99 | "law": 61793, 100 | "light-bulb": 61794, 101 | "link": 61795, 102 | "link-external": 61796, 103 | "list-ordered": 61797, 104 | "list-unordered": 61798, 105 | "location": 61799, 106 | "lock": 61800, 107 | "logo-gist": 61801, 108 | "logo-github": 61802, 109 | "mail": 61803, 110 | "mail-read": 61804, 111 | "mark-github": 61805, 112 | "markdown": 61806, 113 | "megaphone": 61807, 114 | "mention": 61808, 115 | "milestone": 61809, 116 | "mirror": 61810, 117 | "mortar-board": 61811, 118 | "mute": 61812, 119 | "no-newline": 61813, 120 | "note": 61814, 121 | "octoface": 61815, 122 | "organization": 61816, 123 | "package": 61817, 124 | "paintcan": 61818, 125 | "pencil": 61819, 126 | "person": 61820, 127 | "pin": 61821, 128 | "play": 61822, 129 | "plug": 61823, 130 | "plus": 61824, 131 | "plus-small": 61825, 132 | "primitive-dot": 61826, 133 | "primitive-square": 61827, 134 | "project": 61828, 135 | "pulse": 61829, 136 | "question": 61830, 137 | "quote": 61831, 138 | "radio-tower": 61832, 139 | "reply": 61833, 140 | "repo": 61834, 141 | "repo-clone": 61835, 142 | "repo-force-push": 61836, 143 | "repo-forked": 61837, 144 | "repo-pull": 61838, 145 | "repo-push": 61839, 146 | "report": 61840, 147 | "request-changes": 61841, 148 | "rocket": 61842, 149 | "rss": 61843, 150 | "ruby": 61844, 151 | "screen-full": 61845, 152 | "screen-normal": 61846, 153 | "search": 61847, 154 | "server": 61848, 155 | "settings": 61849, 156 | "shield": 61850, 157 | "sign-in": 61851, 158 | "sign-out": 61852, 159 | "smiley": 61853, 160 | "squirrel": 61854, 161 | "star": 61855, 162 | "stop": 61856, 163 | "sync": 61857, 164 | "tag": 61858, 165 | "tasklist": 61859, 166 | "telescope": 61860, 167 | "terminal": 61861, 168 | "text-size": 61862, 169 | "three-bars": 61863, 170 | "thumbsdown": 61864, 171 | "thumbsup": 61865, 172 | "tools": 61866, 173 | "trashcan": 61867, 174 | "triangle-down": 61868, 175 | "triangle-left": 61869, 176 | "triangle-right": 61870, 177 | "triangle-up": 61871, 178 | "unfold": 61872, 179 | "unmute": 61873, 180 | "unverified": 61874, 181 | "verified": 61875, 182 | "versions": 61876, 183 | "watch": 61877, 184 | "x": 61878, 185 | "zap": 61879 186 | } -------------------------------------------------------------------------------- /Examples/IconExplorer/osx/IconExplorer.xcodeproj/xcshareddata/xcschemes/IconExplorer.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 47 | 53 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | 66 | 67 | 68 | 78 | 80 | 86 | 87 | 88 | 89 | 90 | 91 | 97 | 99 | 105 | 106 | 107 | 108 | 110 | 111 | 114 | 115 | 116 | --------------------------------------------------------------------------------