From 2572af468019d7ee192ac084b6f215690a9e28ea Mon Sep 17 00:00:00 2001 From: Luka Date: Sat, 7 Jan 2017 10:56:46 -0700 Subject: [PATCH] Add Material Community icon type --- Readme.MD | 12 ++++++------ src/helpers/getIconType.js | 3 +++ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/Readme.MD b/Readme.MD index 5fcb6da49c..0d8c7592a1 100644 --- a/Readme.MD +++ b/Readme.MD @@ -98,7 +98,7 @@ To override the fontFamily in any element, simply provide a fontFamily prop: ## Buttons Buttons take a title and an optional [material icon name](https://design.google.com/icons/), as well as the props below. -> You can override Material icons with one of the following: simple-line-icon, zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo by providing an icon.type as a prop. +> You can override Material icons with one of the following: material-community, simple-line-icon, zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo by providing an icon.type as a prop. ![Buttons](http://i.imgur.com/CVf1xbr.png) @@ -146,7 +146,7 @@ import { Button } from 'react-native-elements' | iconRight | false | boolean | moves icon to right of title | | onPress | none | function | onPress method (required) | | onLongPress | none | function | onLongPress method (optional) | -| icon | {color: 'white'} | object {name: string, color: string, size: number, type: string (default is material, or choose one of simple-line-icon, zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo), style: object(style)} | icon configuration (optional) | +| icon | {color: 'white'} | object {name: string, color: string, size: number, type: string (default is material, or choose one of material-community, simple-line-icon, zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo), style: object(style)} | icon configuration (optional) | | backgroundColor | #397af8 | string (color) | background color of button (optional) | | borderRadius | none | number | adds border radius to card (optional) | | color | white | string(color) | font color (optional) | @@ -242,7 +242,7 @@ import { SocialIcon } from 'react-native-elements' Icons take the name of a [material icon](https://design.google.com/icons/) as a prop. -> You can override Material icons with one of the following: [font-awesome](http://fontawesome.io/icons/), [octicon](https://octicons.github.com/), [ionicon](http://ionicons.com/), [foundation](http://zurb.com/playground/foundation-icon-fonts-3), [evilicon](http://evil-icons.io/), [simple line icons](http://simplelineicons.com/), [zocial](http://weloveiconfonts.com/), or [entypo](http://www.entypo.com/) by providing a type prop. +> You can override Material icons with one of the following: [material-community](https://materialdesignicons.com/), [font-awesome](http://fontawesome.io/icons/), [octicon](https://octicons.github.com/), [ionicon](http://ionicons.com/), [foundation](http://zurb.com/playground/foundation-icon-fonts-3), [evilicon](http://evil-icons.io/), [simple-line-icon](http://simplelineicons.com/), [zocial](http://weloveiconfonts.com/), or [entypo](http://www.entypo.com/) by providing a type prop. > Hint: use **reverse** to make your icon look like a button @@ -284,7 +284,7 @@ import { Icon } from 'react-native-elements' | prop | default | type | description | | ---- | ---- | ----| ---- | | name | none | string | name of icon (required) | -| type | material | string | type (defaults to material, options are `zocial, font-awesome, octicon, ionicon, foundation, evilicon, simple-line-icon, or entypo`) | +| type | material | string | type (defaults to material, options are `material-community, zocial, font-awesome, octicon, ionicon, foundation, evilicon, simple-line-icon, or entypo`) | | size | 26 | number | size of icon (optional) | | color | black | string | color of icon (optional) | | iconStyle | inherited style | object (style) | additional styling to icon (optional) | @@ -824,11 +824,11 @@ import { CheckBox } from 'react-native-elements' #### Checkbox props -> This component uses FontAwesome icons out of the box. You can also specify one of the following types of icons by specifying an iconType prop: Simple Line Icon, Zocial, Octicons, MaterialIcons, Ionicons, Foundation, EvilIcons, or Entypo +> This component uses FontAwesome icons out of the box. You can also specify one of the following types of icons by specifying an iconType prop: Simple Line Icon, Zocial, Octicons, MaterialIcons, MaterialCommunityIcons, Ionicons, Foundation, EvilIcons, or Entypo | prop | default | type | description | | ---- | ---- | ----| ---- | -| iconType | fontawesome | string | icon family, can be one of the following: simple-line-icon, zocial, octicon, material, ionicon, foundation, evilicon, entypo (required only if specifying an icon that is not from font-awesome) | +| iconType | fontawesome | string | icon family, can be one of the following: simple-line-icon, zocial, octicon, material, material-community, ionicon, foundation, evilicon, entypo (required only if specifying an icon that is not from font-awesome) | | component | TouchableOpacity | React Native Component | specify React Native component for main button (optional) | | checked | false | boolean | flag for checking the icon (required) | | iconRight | false | boolean | moves icon to right of text (optional) | diff --git a/src/helpers/getIconType.js b/src/helpers/getIconType.js index c7342a2ef0..876d357dd8 100644 --- a/src/helpers/getIconType.js +++ b/src/helpers/getIconType.js @@ -1,6 +1,7 @@ import ZocialIcon from 'react-native-vector-icons/Zocial' import OcticonIcon from 'react-native-vector-icons/Octicons' import MaterialIcon from 'react-native-vector-icons/MaterialIcons' +import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons' import Ionicon from 'react-native-vector-icons/Ionicons' import FoundationIcon from 'react-native-vector-icons/Foundation' import EvilIcon from 'react-native-vector-icons/EvilIcons' @@ -16,6 +17,8 @@ export default (type) => { return OcticonIcon case 'material': return MaterialIcon + case 'material-community': + return MaterialCommunityIcon case 'ionicon': return Ionicon case 'foundation':