149 lines
30 KiB
JSON
149 lines
30 KiB
JSON
{
|
|
"_args": [
|
|
[
|
|
{
|
|
"raw": "react-native-vector-icons@4.4.2",
|
|
"scope": null,
|
|
"escapedName": "react-native-vector-icons",
|
|
"name": "react-native-vector-icons",
|
|
"rawSpec": "4.4.2",
|
|
"spec": "4.4.2",
|
|
"type": "version"
|
|
},
|
|
"/Volumes/2009-SSD/GT2/GT2-iOS/node_modules/@expo/vector-icons"
|
|
]
|
|
],
|
|
"_from": "react-native-vector-icons@4.4.2",
|
|
"_id": "react-native-vector-icons@4.4.2",
|
|
"_inCache": true,
|
|
"_location": "/react-native-vector-icons",
|
|
"_nodeVersion": "8.6.0",
|
|
"_npmOperationalInternal": {
|
|
"host": "s3://npm-registry-packages",
|
|
"tmp": "tmp/react-native-vector-icons-4.4.2.tgz_1507456115330_0.926205015508458"
|
|
},
|
|
"_npmUser": {
|
|
"name": "oblador",
|
|
"email": "joel@oblador.se"
|
|
},
|
|
"_npmVersion": "5.3.0",
|
|
"_phantomChildren": {},
|
|
"_requested": {
|
|
"raw": "react-native-vector-icons@4.4.2",
|
|
"scope": null,
|
|
"escapedName": "react-native-vector-icons",
|
|
"name": "react-native-vector-icons",
|
|
"rawSpec": "4.4.2",
|
|
"spec": "4.4.2",
|
|
"type": "version"
|
|
},
|
|
"_requiredBy": [
|
|
"/@expo/vector-icons"
|
|
],
|
|
"_resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-4.4.2.tgz",
|
|
"_shasum": "090f42ee0396c4cc4eae0ddaa518028ba8df40c7",
|
|
"_shrinkwrap": null,
|
|
"_spec": "react-native-vector-icons@4.4.2",
|
|
"_where": "/Volumes/2009-SSD/GT2/GT2-iOS/node_modules/@expo/vector-icons",
|
|
"author": {
|
|
"name": "Joel Arvidsson",
|
|
"email": "joel@oblador.se"
|
|
},
|
|
"bin": {
|
|
"generate-icon": "./bin/generate-icon.js"
|
|
},
|
|
"bugs": {
|
|
"url": "https://github.com/oblador/react-native-vector-icons/issues"
|
|
},
|
|
"dependencies": {
|
|
"lodash": "^4.0.0",
|
|
"prop-types": "^15.5.10",
|
|
"yargs": "^8.0.2"
|
|
},
|
|
"description": "Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling.",
|
|
"devDependencies": {
|
|
"babel-cli": "^6.24.1",
|
|
"babel-eslint": "^8.0.0",
|
|
"babel-preset-react-native": "^4.0.0",
|
|
"eslint": "^4.3.0",
|
|
"eslint-config-airbnb": "^15.1.0",
|
|
"eslint-config-prettier": "^2.3.0",
|
|
"eslint-plugin-import": "^2.7.0",
|
|
"eslint-plugin-jsx-a11y": "^5.1.1",
|
|
"eslint-plugin-prettier": "^2.1.2",
|
|
"eslint-plugin-react": "^7.1.0",
|
|
"evil-icons": "^1.8.0",
|
|
"font-awesome": "^4.6.3",
|
|
"ionicons": "^3.0.0",
|
|
"material-design-icons": "^3.0.1",
|
|
"mdi": "^2.0.46",
|
|
"octicons": "^6.0.1",
|
|
"prettier": "^1.5.3"
|
|
},
|
|
"directories": {},
|
|
"dist": {
|
|
"integrity": "sha512-0E53c7OolA6nMuQdh4gTuYKGe0yPuVbNXHfty0gJoE3Bct80JE8Q8Rrlv8xWSFe8jqYcSPiUr8Lg1+G8LAttYg==",
|
|
"shasum": "090f42ee0396c4cc4eae0ddaa518028ba8df40c7",
|
|
"tarball": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-4.4.2.tgz"
|
|
},
|
|
"gitHead": "ecb663003c5a0ffeacaeba7edfc95677a5985e22",
|
|
"homepage": "https://github.com/oblador/react-native-vector-icons",
|
|
"keywords": [
|
|
"react-native",
|
|
"react-component",
|
|
"react-native-component",
|
|
"react",
|
|
"mobile",
|
|
"ios",
|
|
"android",
|
|
"osx",
|
|
"windows",
|
|
"macos",
|
|
"ui",
|
|
"icon",
|
|
"icons",
|
|
"vector",
|
|
"retina",
|
|
"font"
|
|
],
|
|
"license": "MIT",
|
|
"main": "dist/index.js",
|
|
"maintainers": [
|
|
{
|
|
"name": "oblador",
|
|
"email": "joel@oblador.se"
|
|
}
|
|
],
|
|
"name": "react-native-vector-icons",
|
|
"optionalDependencies": {},
|
|
"readme": "\n\n[](https://travis-ci.org/oblador/react-native-vector-icons) [](https://npmjs.com/package/react-native-vector-icons) [](https://npmjs.com/package/react-native-vector-icons) [](http://github.com/oblador/react-native-vector-icons/issues)\n\nPerfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project. \n\n## Bundled Icon Sets\n\n[Browse all](https://oblador.github.io/react-native-vector-icons/).\n\n* [`Entypo`](http://entypo.com) by Daniel Bruce (**411** icons) \n* [`EvilIcons`](http://evil-icons.io) by Alexander Madyankin & Roman Shamin (v1.8.0, **70** icons) \n* [`Feather`](http://feathericons.com) by Cole Bemis & Contributors (v3.2.2, **240** icons) \n* [`FontAwesome`](http://fortawesome.github.io/Font-Awesome/icons/) by Dave Gandy (v4.7.0, **675** icons) \n* [`Foundation`](http://zurb.com/playground/foundation-icon-fonts-3) by ZURB, Inc. (v3.0, **283** icons)\n* [`Ionicons`](http://ionicframework.com/docs/v2/ionicons/) by Ben Sperry (v3.0.0, **859** icons)\n* [`MaterialIcons`](https://www.google.com/design/icons/) by Google, Inc. (v3.0.1, **932** icons)\n* [`MaterialCommunityIcons`](https://materialdesignicons.com/) by MaterialDesignIcons.com (v2.0.46, **2046** icons)\n* [`Octicons`](http://octicons.github.com) by Github, Inc. (v6.0.1, **177** icons)\n* [`Zocial`](http://zocial.smcllns.com/) by Sam Collins (v1.0, **100** icons)\n* [`SimpleLineIcons`](http://simplelineicons.com/) by Sabbir & Contributors (v2.4.1, **189** icons)\n\n## Installation\n\n1. Run: `$ npm install react-native-vector-icons --save`\n2. For each platform (iOS/Android/Windows) you plan to use, follow one of the options for the corresponding platform.\n\n### iOS \n\n#### Option: Manually\n\nIf you want to use any of the bundled icons, you need to add the icon fonts to your Xcode project. Just follow these steps:\n\n* Browse to `node_modules/react-native-vector-icons` and drag the folder `Fonts` (or just the ones you want) to your project in Xcode. **Make sure your app is checked under \"Add to targets\" and that \"Create groups\" is checked if you add the whole folder**.\n* Edit `Info.plist` and add a property called **Fonts provided by application** (or `UIAppFonts` if Xcode won't autocomplete/not using Xcode) and type in the files you just added. It will look something like this:\n\n\n\n*Note: you need to recompile your project after adding new fonts, also ensure that they also appear under __Copy Bundle Resources__ in __Build Phases__.*\n\nIf you want to use the TabBar/NavigatorIOS integration or use `getImageSource`, then you need to add `RNVectorIcons.xcodeproj` to **Libraries** and add `libRNVectorIcons.a` to **Link Binary With Libraries** under **Build Phases**. [More info and screenshots about how to do this is available in the React Native documentation](http://facebook.github.io/react-native/docs/linking-libraries-ios.html#content).\n\n#### Option: With [CocoaPods](https://cocoapods.org/)\n\nAdd the following to your `Podfile` and run `pod update`:\n\n```\npod 'RNVectorIcons', :path => 'node_modules/react-native-vector-icons'\n```\n\nEdit `Info.plist` as described above. \n\nIf you are using `use_frameworks!` in your `Podfile` you instead need to dynamically load the icon font by doing `Icon.loadFont()` when boostrapping your application.\n\n#### Option: With `rnpm`\n\n`$ react-native link`\n\n*Note: Some users are having trouble using this method, try one of the others if you are too.*\n\n### Android\n\n#### Option: With Gradle (recommended)\n\nThis method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.\n\nEdit `android/app/build.gradle` ( NOT `android/build.gradle` ) and add the following:\n\n```gradle\napply from: \"../../node_modules/react-native-vector-icons/fonts.gradle\"\n```\n\nTo customize the files being copied, add the following instead:\n\n```gradle\nproject.ext.vectoricons = [\n iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy\n]\n\napply from: \"../../node_modules/react-native-vector-icons/fonts.gradle\"\n```\n\n#### Option: Manually\n\n* Copy the contents in the `Fonts` folder to `android/app/src/main/assets/fonts` (*note lowercase font folder*). \n\n##### Integrating library for `getImageSource` and `ToolbarAndroid` support\n\nThese steps are optional and only needed if you want to use the `Icon.getImageSource` function or using custom icons in the `Icon.ToolbarAndroid` component. \n\n* Edit `android/settings.gradle` to look like this (without the +):\n\n ```diff\n rootProject.name = 'MyApp'\n\n include ':app'\n\n + include ':react-native-vector-icons'\n + project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')\n ```\n\n* Edit `android/app/build.gradle` (note: **app** folder) to look like this: \n\n ```diff\n apply plugin: 'com.android.application'\n\n android {\n ...\n }\n\n dependencies {\n compile fileTree(dir: 'libs', include: ['*.jar'])\n compile \"com.android.support:appcompat-v7:23.0.1\"\n compile \"com.facebook.react:react-native:+\" // From node_modules\n + compile project(':react-native-vector-icons')\n }\n ```\n\n* Edit your `MainApplication.java` (deep in `android/app/src/main/java/...`) to look like this (note **two** places to edit):\n\n ```diff\n package com.myapp;\n\n + import com.oblador.vectoricons.VectorIconsPackage;\n\n ....\n\n @Override\n protected List<ReactPackage> getPackages() {\n return Arrays.<ReactPackage>asList(\n new MainReactPackage()\n + , new VectorIconsPackage()\n );\n }\n\n }\n ```\n\n*Note: If you're using React Native (Android) <= 0.17, [follow this instructions](https://github.com/oblador/react-native-vector-icons/blob/2fe5b97afa849652215e3258189e8ca3ea775c53/README.md#integrating-library-for-getimagesource-support)*\n\n#### Option: With `rnpm`\n\n`$ react-native link`\n\n*Note: Some users are having trouble using this method, try one of the others if you are too.*\n\n### OSX via [`react-native-desktop`](https://github.com/ptmt/react-native-desktop)\n\n* Browse to `node_modules/react-native-vector-icons` and drag the folder `Fonts` to your project in Xcode. **Make sure your app is checked under \"Add to targets\" and that \"Create folder references\" is checked**.\n* Edit `Info.plist` and add a property called **Application fonts resource path** (or `ATSApplicationFontsPath` if Xcode won't autocomplete/not using Xcode) and type `Fonts` as the value.\n\n*Note: you need to recompile your project after adding new fonts, also ensure that the `Fonts` folder also appear under __Copy Bundle Resources__ in __Build Phases__.*\n\n### Windows via [`react-native-windows`](https://github.com/ReactWindows/react-native-windows)\n\n* Open your solution in Visual Studio, right click the Assets folder in your solution, click **Add Existing**.\n* Browse to the `node_modules\\react-native-vector-icons\\Fonts` folder, select the required font files\n* Click the **Add** drop-down and select **Add as Link**.\n* Set **Copy To Output Directory** property of each font file to **Copy if newer**\n\n*Note: you need to recompile your project after adding new fonts.*\n\n### Web (with [webpack](https://webpack.js.org/))\n\nIn your webpack configuration file, add a section to handle ttf files using url-loader (or file-loader)\n\n```js\n{\n test: /\\.ttf$/,\n loader: \"url-loader\", // or directly file-loader\n include: path.resolve(__dirname, \"node_modules/react-native-vector-icons\"),\n},\n```\n\nThen consume those files in your JavaScript entry point to get the bundled url and inject a style tag in your page:\n\n```js\n// Use prebuilt version of RNVI in dist folder\nimport Icon from 'react-native-vector-icons/dist/FontAwesome';\n\n// Generate required css\nimport iconFont from 'react-native-vector-icons/Fonts/FontAwesome.ttf';\nconst iconFontStyles = `@font-face {\n src: url(${iconFont});\n font-family: FontAwesome;\n}`;\n\n// Create stylesheet\nconst style = document.createElement('style');\nstyle.type = 'text/css';\nif (style.styleSheet) {\n style.styleSheet.cssText = iconFontStyles;\n} else {\n style.appendChild(document.createTextNode(iconFontStyles));\n}\n\n// Inject stylesheet\ndocument.head.appendChild(style);\n```\n\n## `Icon` Component\nYou can either use one of the bundled icons above or roll your own custom font. \n\n```js\nimport Icon from 'react-native-vector-icons/FontAwesome';\nconst myIcon = (<Icon name=\"rocket\" size={30} color=\"#900\" />)\n```\n\n### Properties\nAny [Text property](http://facebook.github.io/react-native/docs/text.html) and the following: \n\n| Prop | Description | Default |\n|---|---|---|\n|**`size`**|Size of the icon, can also be passed as `fontSize` in the style object. |`12`|\n|**`name`**|What icon to show, see Icon Explorer app or one of the links above. |*None*|\n|**`color`**|Color of the icon. |*Inherited*|\n\n### Styling\nSince `Icon` builds on top of the `Text` component, most [style properties](http://facebook.github.io/react-native/docs/style.html) will work as expected, you might find it useful to play around with these:\n\n* `backgroundColor`\n* `borderWidth`\n* `borderColor`\n* `borderRadius`\n* `padding`\n* `margin`\n* `color`\n* `fontSize`\n\nNOTE: On android `Text` doesn't currently support `border*` styles, to circumvent this simply wrap your `Icon` with a `View`. \n\nBy combining some of these you can create for example : \n\n\n\n\n## `Icon.Button` Component\nA convenience component for creating buttons with an icon on the left side. \n\n```js\nimport Icon from 'react-native-vector-icons/FontAwesome';\nconst myButton = (\n <Icon.Button name=\"facebook\" backgroundColor=\"#3b5998\" onPress={this.loginWithFacebook}>\n Login with Facebook\n </Icon.Button>\n);\n\nconst customTextButton = (\n <Icon.Button name=\"facebook\" backgroundColor=\"#3b5998\">\n <Text style={{fontFamily: 'Arial', fontSize: 15}}>Login with Facebook</Text>\n </Icon.Button>\n);\n```\n\n\n\n### Properties\nAny [`Text`](http://facebook.github.io/react-native/docs/text.html), [`TouchableHighlight`](http://facebook.github.io/react-native/docs/touchablehighlight.html) or [`TouchableWithoutFeedback`](http://facebook.github.io/react-native/docs/touchablewithoutfeedback.html) property in addition to these:\n\n| Prop | Description | Default |\n|---|---|---|\n|**`color`**|Text and icon color, use `iconStyle` or nest a `Text` component if you need different colors.|`white`|\n|**`size`**|Icon size.|`20`|\n|**`iconStyle`**|Styles applied to the icon only, good for setting margins or a different color.|`{marginRight: 10}`|\n|**`backgroundColor`**|Background color of the button.|`#007AFF`|\n|**`borderRadius`**|Border radius of the button, set to `0` to disable. |`5`|\n|**`onPress`**|A function called when the button is pressed. |*None*|\n\n## Usage as PNG image/source object\n\nConvenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons. Takes the arguments `name`, `size` and `color` as described above.\n\n```\nIcon.getImageSource('user', 20, 'red').then((source) => this.setState({ userIcon: source }));\n```\n\nFor a complete example check out the `TabBarExample` project. \n\n## Usage with [TabBarIOS](http://facebook.github.io/react-native/docs/tabbarios.html)\n\nSimply use `Icon.TabBarItemIOS` instead of `TabBarIOS.Item`. This is an extended component that works exactly the same but with three additional properties: \n\n| Prop | Description | Default |\n|---|---|---|\n|**`iconName`**|Name of the default icon (similar to `TabBarIOS.Item` `icon`)|*None*|\n|**`selectedIconName`**|Name of the selected icon (similar to `TabBarIOS.Item` `selectedIcon`). |*`iconName`*|\n|**`iconSize`**|Size of the icon. |`30`|\n|**`iconColor`**|Color of the icon. |*None*|\n|**`selectedIconColor`**|Color of the selected icon. |*`iconColor`*|\n\nFor example usage see `Examples/TabBarExample` or the examples section below. Don't forget to import and link to this project as described above if you are going to use the TabBar integration. \n\n**Note:** using `iconColor` and `selectedIconColor` requires the attribute [renderAsOriginal](https://facebook.github.io/react-native/docs/tabbarios-item.html#renderasoriginal) to be set to `true` on `Icon.TabBarItemIOS`.\n\n## Usage with [NavigatorIOS](http://facebook.github.io/react-native/docs/navigatorios.html)\n\nUse `Icon.getImageSource` to get an image source object and pass it as you would with `backButtonIcon`, `leftButtonIcon` or `rightButtonIcon`. \n\nNote: Since [`NavigatorIOS` doesn't rerender with new state](https://github.com/facebook/react-native/issues/1403) and the async nature of `getImageSource` you must not use it with `initialRoute` until the icon is rendered, but any view added by `push` should be fine. Easiest way is to simple add an `if` statment at the beginning of you render method like this: \n\n```\n render() {\n if (!this.state.myIcon) {\n return false;\n }\n return (<NavigatorIOS ... />);\n }\n```\n\n[Facebook writes](http://facebook.github.io/react-native/docs/navigator-comparison.html#navigatorios): \n> Development belongs to open-source community - not used by the React Native team on their apps. A result of this is that there is currently a backlog of unresolved bugs, nobody who uses this has stepped up to take ownership for it yet.\n\nYou are probably better off with [`Navigator.NavigationBar`](http://facebook.github.io/react-native/docs/navigator.html) or [`react-native-navbar`](https://github.com/Kureev/react-native-navbar).\n\n## Usage with [ToolbarAndroid](http://facebook.github.io/react-native/docs/toolbarandroid.html)\n\nSimply use `Icon.ToolbarAndroid` instead of `React.ToolbarAndroid`, this is composition of the underlying `ToolbarAndroid` component that works the same but any `*icon` property also takes `*iconName`: \n\n| Prop | Description | Default |\n|---|---|---|\n|**`logoName`**|Name of the navigation logo icon (similar to `ToolbarAndroid` `logo`)|*None*|\n|**`navIconName`**|Name of the navigation icon (similar to `ToolbarAndroid` `navIcon`)|*None*|\n|**`overflowIconName`**|Name of the overflow icon (similar to `ToolbarAndroid` `overflowIcon`). |*none*|\n|**`actions`**|Possible actions on the toolbar as part of the action menu, takes the additional arguments `iconName`, `iconColor` and `iconSize`. |*none*|\n|**`iconSize`**|Size of the icons. |`24`|\n|**`iconColor`**|Color of the icons. |`black`|\n\nFor example usage see `Examples/IconExplorer/index.android.js`or the examples section below. Don't forget to import and link to this project as described above if you are going to use the ToolbarAndroid integration. \n\n## Custom Fonts\n\n### `createIconSet(glyphMap, fontFamily[, fontFile])`\nReturns your own custom font based on the `glyphMap` where the key is the icon name and the value is either a UTF-8 character or it's character code. `fontFamily` is the name of the font **NOT** the filename. Open the font in Font Book.app or similar to learn the name. Optionally pass the third `fontFile` argument for android support, it should be a path to the font file in you asset folder. \n\n```js\nimport { createIconSet } from 'react-native-vector-icons';\nconst glyphMap = { 'icon-name': 1234, test: '∆' };\nconst Icon = createIconSet(glyphMap, 'FontName');\n```\n\n### `createIconSetFromFontello(config[, fontFamily[, fontFile]])`\nConvenience method to create a custom font based on a [fontello](http://fontello.com) config file. Don't forget to import the font as described above and drop the `config.json` somewhere convenient in your project. \n\n```js\nimport { createIconSetFromFontello } from 'react-native-vector-icons';\nimport fontelloConfig from './config.json';\nconst Icon = createIconSetFromFontello(fontelloConfig);\n```\n\n### `createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])`\n```js\nimport { createIconSetFromIcoMoon } from 'react-native-vector-icons';\nimport icoMoonConfig from './config.json';\nconst Icon = createIconSetFromIcoMoon(icoMoonConfig);\n```\n\nMake sure you're using the _Download_ option in IcoMoon, and use the `.json` file that's included in the `.zip` you've downloaded. You'll also need to import the `.ttf` font file into your project, following the instructions above.\n#### iOS \nYou have to manually make a reference of your `.ttf` on your xcodeproj `Resources` folder.\n\n## Animation\n\nReact Native comes with an amazing animation library called [`Animated`](http://facebook.github.io/react-native/docs/animated.html). To use it with an icon, simply create an animated component with this line: `const AnimatedIcon = Animated.createAnimatedComponent(Icon)`. You can also use the higher level animation library [react-native-animatable](https://github.com/oblador/react-native-animatable).\n\n## Examples\n\n### IconExplorer\nTry the `IconExplorer` project in `Examples/IconExplorer` folder, there you can also search for any icon. \n\n\n\n\n### Basic Example\n```js\nimport Icon from 'react-native-vector-icons/Ionicons';\n\nfunction ExampleView(props) {\n return (<Icon name=\"ios-person\" size={30} color=\"#4F8EF7\" />);\n}\n```\n\n### TabBarIOS\nFull example in `TabBarExample` project in `Examples/TabBarExample` folder. \n\n```js\nimport { View, Text, TabBarIOS } from 'react-native';\nimport Icon from 'react-native-vector-icons/Ionicons';\n\nfunction TabBarView(props) {\n return (\n <TabBarIOS>\n <Icon.TabBarItem\n title=\"Home\"\n iconName=\"ios-home-outline\"\n selectedIconName=\"ios-home\"\n >\n <View style={styles.tabContent}><Text>Home Tab</Text></View>\n </Icon.TabBarItem>\n </TabBarIOS>\n );\n}\n```\n\n### ToolbarAndroid\n\n```js\nimport Icon from 'react-native-vector-icons/Ionicons';\n\nfunction ToolbarView(props) {\n return (\n <Icon.ToolbarAndroid\n title=\"Home\"\n titleColor=\"white\"\n navIconName=\"md-arrow-back\"\n onIconClicked={props.navigator.pop}\n actions={[\n { title: 'Settings', iconName: 'md-settings', iconSize: 30, show: 'always' },\n { title: 'Follow me on Twitter', iconName: 'logo-twitter', iconColor: \"#4099FF\", show: 'ifRoom' },\n ]}\n overflowIconName=\"md-more\"\n />\n );\n}\n```\n\n### Inline Icons\n```js\nimport { Text } from 'react-native';\nimport Icon from 'react-native-vector-icons/Ionicons';\n\nfunction ExampleView(props) {\n return (<Text>Lorem <Icon name=\"ios-book\" color=\"#4F8EF7\" /> Ipsum</Text>);\n}\n```\n\n### Community examples\n\n* [react-native-dribbble-app](https://github.com/catalinmiron/react-native-dribbble-app)\n* [product-kitty](https://github.com/rkho/product-kitty) ([blog post](http://richardkho.com/persisting-tabbars-in-react-native/))\n* [react-native-netflix](https://github.com/mariodev12/react-native-netflix)\n\n## Generating your own icon set from a CSS file\n\nIf you already have a icon font with associated CSS file then you can easily generate a icon set with the `generate-icon` script. \n\n### Example usage: \n\n```\n./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon > Components/MyIcon.js\n```\n\n### Options\n\nAny flags not listed below, like `--componentName` and `--fontFamily`, will be passed on to the template. \n\n#### `-p`, `--prefix`\nCSS selector prefix [default: \".icon-\"]\n\n#### `-t`, `--template`\nTemplate in lodash format [default: \"./template/iconSet.tpl\"]\n\nFor default template please provide `--componentName` and `--fontFamily`.\n\n#### `-o`, `--output`\nSave output to file, defaults to STDOUT\n\n## [Changelog](https://github.com/oblador/react-native-vector-icons/releases)\n\n## Troubleshooting\n\n#### The icons show up as a crossed out box on Android\n* Make sure you've copied the font to `android/app/src/main/assets/fonts`.\n* Delete the `android/app/build` folder. \n* Recompile the project.\n\n#### Red screen with \"Unrecognized font family\" error on iOS\n* Make sure you've added manually the reference of your `.ttf` on your xcodeproj `Resources` folder.\n* Check that the font you are trying to use appears in `Info.plist`, if you've added the whole folder and it's blue in color, then you need to add it to the path. \n* Check that the font is copied in the *Copy Bundle Resources* in *Build Phases*.\n* Recompile the project.\n\n#### Android build fails on Windows for no good reason\n\nBoth npm and android file hierarchies tend to get very deep and even worse when you combine them. Since Windows file system has a max length, long file name addresses will result in numerous errors including `Execution failed for task ':react-native-vector-icons:processReleaseResources'`. So try to keep the path to your project folder as short as possible. \n\n## License\n\nThis project is licenced under the [MIT License](http://opensource.org/licenses/mit-license.html).\n\nAny bundled fonts are copyright to their respective authors and mostly under MIT or [SIL OFL](http://scripts.sil.org/OFL).\n\n",
|
|
"readmeFilename": "README.md",
|
|
"repository": {
|
|
"type": "git",
|
|
"url": "git://github.com/oblador/react-native-vector-icons.git"
|
|
},
|
|
"rnpm": {
|
|
"assets": [
|
|
"Fonts"
|
|
]
|
|
},
|
|
"scripts": {
|
|
"build": "rm -rf {Fonts,Entypo.js,EvilIcons.js,FontAwesome.js,Foundation.js,Ionicons.js,MaterialIcons.js,MaterialCommunityIcons.js,Octicons.js,Zocial.js,SimpleLineIcons.js,glyphmaps} && mkdir Fonts glyphmaps && npm run build-entypo && npm run build-evilicons && npm run build-fontawesome && npm run build-foundation && npm run build-ionicons && npm run build-materialicons && npm run build-materialcommunityicons && npm run build-octicons && npm run build-zocial && npm run build-simplelineicons",
|
|
"build-entypo": "mkdir -p tmp/svg && curl https://dl.dropboxusercontent.com/u/4339492/entypo.zip > tmp/entypo.zip && unzip -j tmp/entypo.zip *.svg -x __MACOSX/* -d tmp/svg && fontcustom compile tmp/svg -o tmp -n Entypo -t css -h && node bin/generate-icon tmp/Entypo.css --componentName=Entypo --fontFamily=Entypo --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/Entypo.json > Entypo.js && cp tmp/Entypo.ttf Fonts && rm -rf {tmp,.fontcustom-manifest.json}",
|
|
"build-evilicons": "fontcustom compile node_modules/evil-icons/assets/icons -o tmp -n EvilIcons -t css -h && node bin/generate-icon tmp/EvilIcons.css --prefix=.icon-ei- --componentName=EvilIcons --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/EvilIcons.json --fontFamily=EvilIcons > EvilIcons.js && cp tmp/EvilIcons.ttf Fonts && rm -rf {tmp,.fontcustom-manifest.json}",
|
|
"build-feather": "node bin/generate-icon Feather/style.css --componentName=Feather --fontFamily=Feather --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/Feather.json > Feather.js && cp Feather/fonts/Feather.ttf Fonts/Feather.ttf",
|
|
"build-fontawesome": "node bin/generate-icon node_modules/font-awesome/css/font-awesome.css --prefix=.fa- --componentName=FontAwesome --fontFamily=FontAwesome --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/FontAwesome.json > FontAwesome.js && cp node_modules/font-awesome/fonts/fontawesome-webfont.ttf Fonts/FontAwesome.ttf",
|
|
"build-foundation": "node bin/generate-icon bower_components/foundation-icon-fonts/foundation-icons.css --prefix=.fi- --componentName=Foundation --fontFamily=fontcustom --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/Foundation.json > Foundation.js && cp bower_components/foundation-icon-fonts/foundation-icons.ttf Fonts/Foundation.ttf",
|
|
"build-ionicons": "node bin/generate-icon node_modules/ionicons/dist/css/ionicons.css --prefix=.ion- --componentName=Ionicons --fontFamily=Ionicons --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/Ionicons.json > Ionicons.js && cp node_modules/ionicons/dist/fonts/ionicons.ttf Fonts/Ionicons.ttf",
|
|
"build-materialcommunityicons": "node bin/generate-icon node_modules/mdi/css/materialdesignicons.css --prefix=.mdi- --componentName=MaterialCommunityIcons --fontFamily='Material Design Icons' --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/MaterialCommunityIcons.json > MaterialCommunityIcons.js && cp node_modules/mdi/fonts/materialdesignicons-webfont.ttf Fonts/MaterialCommunityIcons.ttf",
|
|
"build-materialicons": "node bin/generate-material-icons node_modules/material-design-icons/iconfont/codepoints --componentName=MaterialIcons --fontFamily='Material Icons' --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/MaterialIcons.json > MaterialIcons.js && cp node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf Fonts/MaterialIcons.ttf",
|
|
"build-octicons": "fontcustom compile node_modules/octicons/build/svg -o tmp -n Octicons -t css -h && node bin/generate-icon tmp/Octicons.css --prefix=.icon- --componentName=Octicons --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/Octicons.json --fontFamily=Octicons > Octicons.js && cp tmp/Octicons.ttf Fonts && rm -rf {tmp,.fontcustom-manifest.json}",
|
|
"build-simplelineicons": "node bin/generate-icon bower_components/simple-line-icons/css/simple-line-icons.css --prefix=.icon- --componentName=SimpleLineIcons --fontFamily=simple-line-icons --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/SimpleLineIcons.json > SimpleLineIcons.js && cp bower_components/simple-line-icons/fonts/Simple-Line-Icons.ttf Fonts/SimpleLineIcons.ttf",
|
|
"build-web": "rm -rf ./dist && babel ./{,lib}/*.js --out-dir ./dist && cp -R ./glyphmaps ./dist/glyphmaps",
|
|
"build-zocial": "node bin/generate-icon bower_components/css-social-buttons/css/zocial.css --prefix=.zocial. --componentName=Zocial --fontFamily=zocial --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/Zocial.json > Zocial.js && cp bower_components/css-social-buttons/css/zocial.ttf Fonts/Zocial.ttf",
|
|
"prepublish": "npm run build-web",
|
|
"test": "eslint index.js {bin,lib}/*.js"
|
|
},
|
|
"version": "4.4.2"
|
|
}
|