Rename “skinIcon” => “skinEmoji”

More consistent with other props

README.md

@@ -48,7 +48,7 @@ import { Picker } from 'emoji-mart'
 | **emojiTooltip** | | `false` | Show emojis short name when hovering (title) |
 | **skin** | | | Forces skin color: `1, 2, 3, 4, 5, 6` |
 | **defaultSkin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |
-| **skinIcon** | | | The emoji used to pick a skin tone. Uses an emoji-less skin tone picker by default |
+| **skinEmoji** | | | The emoji used to pick a skin tone. Uses an emoji-less skin tone picker by default |
 | **style** | | | Inline styles applied to the root element. Useful for positioning |
 | **title** | | `Emoji Mart™` | The title shown when no emojis are hovered |
 | **notFoundEmoji** | | `sleuth_or_spy` | The emoji shown when there are no search results |

src/components/picker/nimble-picker.js

@@ -472,7 +472,7 @@ export default class NimblePicker extends React.PureComponent {
         exclude,
         recent,
         autoFocus,
-        skinIcon,
+        skinEmoji,
         notFound,
         notFoundEmoji,
       } = this.props,
@@ -576,7 +576,7 @@ export default class NimblePicker extends React.PureComponent {
               skinsProps={{
                 skin: skin,
                 onChange: this.handleSkinChange,
-                skinIcon: skinIcon,
+                skinEmoji: skinEmoji,
               }}
               i18n={this.i18n}
             />

src/components/preview.js

@@ -84,15 +84,15 @@ export default class Preview extends React.PureComponent {
           {showSkinTones && (
             <div
               className={`emoji-mart-preview-skins${
-                skinsProps.skinIcon ? ' custom' : ''
+                skinsProps.skinEmoji ? ' custom' : ''
               }`}
             >
-              {skinsProps.skinIcon ? (
+              {skinsProps.skinEmoji ? (
                 <SkinsEmoji
                   skin={skinsProps.skin}
                   emojiProps={emojiProps}
                   data={this.data}
-                  skinIcon={skinsProps.skinIcon}
+                  skinEmoji={skinsProps.skinEmoji}
                   i18n={i18n}
                   onChange={skinsProps.onChange}
                 />

src/components/skins-emoji.js

@@ -11,7 +11,7 @@ export default class SkinsEmoji extends Skins {
   }
 
   render() {
-    const { skin, emojiProps, data, skinIcon, i18n } = this.props
+    const { skin, emojiProps, data, skinEmoji, i18n } = this.props
     const { opened } = this.state
     const skinToneNodes = []
 
@@ -30,7 +30,7 @@ export default class SkinsEmoji extends Skins {
             className={`emoji-mart-skin-tone-${skinTone}`}
           >
             {NimbleEmoji({
-              emoji: skinIcon,
+              emoji: skinEmoji,
               data: data,
               skin: skinTone,
               backgroundImageFn: emojiProps.backgroundImageFn,
@@ -62,7 +62,7 @@ SkinsEmoji.propTypes = {
   skin: PropTypes.number.isRequired,
   emojiProps: PropTypes.object.isRequired,
   skinTone: PropTypes.number,
-  skinIcon: PropTypes.string.isRequired,
+  skinEmoji: PropTypes.string.isRequired,
   i18n: PropTypes.object,
 }
 

src/utils/shared-props.js

@@ -75,7 +75,7 @@ const PickerPropTypes = {
       imageUrl: PropTypes.string.isRequired,
     }),
   ),
-  skinIcon: PropTypes.string,
+  skinEmoji: PropTypes.string,
   notFound: PropTypes.func,
   notFoundEmoji: PropTypes.string,
   icons: PropTypes.object,
@@ -104,7 +104,7 @@ const PickerDefaultProps = {
   emojiTooltip: EmojiDefaultProps.tooltip,
   autoFocus: false,
   custom: [],
-  skinIcon: '',
+  skinEmoji: '',
   notFound: () => {},
   notFoundEmoji: 'sleuth_or_spy',
   icons: {},

stories/index.js

@@ -184,7 +184,7 @@ storiesOf('Picker', module)
     <Picker
       native={boolean('Unicode', true)}
       emojiSize={24}
-      skinIcon={text('Skin Preview Icon', 'v')}
+      skinEmoji={text('Skin Preview Icon', 'v')}
     />
   ))