From 086ed6991eb9a47fa2fff153e950b56620e4e496 Mon Sep 17 00:00:00 2001
From: Luis Belloch <luis.belloch@edorasware.com>
Date: Tue, 10 Jul 2018 21:53:24 +0200
Subject: [PATCH 01/17] Added font stack to support native emojis in IE11/Edge

---
 css/emoji-mart.css  | 4 ++++
 docs/emoji-mart.css | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index 93e62d7..3f61082 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -138,6 +138,10 @@
   font-size: 0;
 }
 
+.emoji-mart-emoji-native {
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji";
+}
+
 .emoji-mart-no-results {
   font-size: 14px;
   text-align: center;
diff --git a/docs/emoji-mart.css b/docs/emoji-mart.css
index 93e62d7..3f61082 100644
--- a/docs/emoji-mart.css
+++ b/docs/emoji-mart.css
@@ -138,6 +138,10 @@
   font-size: 0;
 }
 
+.emoji-mart-emoji-native {
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji";
+}
+
 .emoji-mart-no-results {
   font-size: 14px;
   text-align: center;

From 5e03ee3e16600ffeebb71c9adf48dcbdd5a78453 Mon Sep 17 00:00:00 2001
From: Rena Ryumae <rryumae@atlassian.com>
Date: Wed, 27 Jun 2018 15:03:44 -0400
Subject: [PATCH 02/17] Adding search icon in search input field

Currently, there is no visual indication
for when the user is searching for an
emoji nor is there an easy way to clear
the input field after the user's search

Our change proposes to add a small magnifying
glass icon to the right hand side of the
search input bar which becomes an x delete
icon when the user types in the search input
bar.

The x delete icon is tabbable and will clear
the search input field with the return (enter)
key, spacebar, and mouse click. The
magnifying glass icon is not tabbable.
---
 css/emoji-mart.css        | 14 +++++++++++-
 src/components/anchors.js | 19 ++--------------
 src/components/search.js  | 48 ++++++++++++++++++++++++++++++++++-----
 src/svgs/index.js         | 30 ++++++++++++++----------
 4 files changed, 75 insertions(+), 36 deletions(-)

diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index 93e62d7..255cf44 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -87,17 +87,29 @@
 .emoji-mart-search {
   margin-top: 6px;
   padding: 0 6px;
+  position: relative;
 }
+
 .emoji-mart-search input {
   font-size: 16px;
   display: block;
   width: 100%;
-  padding: .2em .6em;
+  padding: .2em 1.6em .2em .6em;
   border-radius: 25px;
   border: 1px solid #d9d9d9;
   outline: 0;
 }
 
+.emoji-mart-search-icon {
+  position: absolute;
+  top: 5px;
+  right: 13px;
+  z-index: 2;
+  padding: 0;
+  border: none;
+  background: none;
+}
+
 .emoji-mart-category .emoji-mart-emoji span {
   z-index: 1;
   position: relative;
diff --git a/src/components/anchors.js b/src/components/anchors.js
index e620387..13a484b 100644
--- a/src/components/anchors.js
+++ b/src/components/anchors.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import SVGs from '../svgs'
+import { categories as icons } from '../svgs'
 
 export default class Anchors extends React.PureComponent {
   constructor(props) {
@@ -18,21 +18,6 @@ export default class Anchors extends React.PureComponent {
     this.handleClick = this.handleClick.bind(this)
   }
 
-  getSVG(id) {
-    this.SVGs || (this.SVGs = {})
-
-    if (this.SVGs[id]) {
-      return this.SVGs[id]
-    } else {
-      let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-       ${SVGs[id]}
-      </svg>`
-
-      this.SVGs[id] = svg
-      return svg
-    }
-  }
-
   handleClick(e) {
     var index = e.currentTarget.getAttribute('data-index')
     var { categories, onAnchorClick } = this.props
@@ -65,7 +50,7 @@ export default class Anchors extends React.PureComponent {
               }`}
               style={{ color: isSelected ? color : null }}
             >
-              <div dangerouslySetInnerHTML={{ __html: this.getSVG(id) }} />
+              <div dangerouslySetInnerHTML={{ __html: icons[id] }} />
               <span
                 className="emoji-mart-anchor-bar"
                 style={{ backgroundColor: color }}
diff --git a/src/components/search.js b/src/components/search.js
index 21f3cdb..a2d7763 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -1,20 +1,36 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import { search as icons } from '../svgs'
 import NimbleEmojiIndex from '../utils/emoji-index/nimble-emoji-index'
 
 export default class Search extends React.PureComponent {
   constructor(props) {
     super(props)
+    this.state = {
+      icon: icons.search,
+      isSearching: false,
+    }
 
     this.data = props.data
     this.emojiIndex = new NimbleEmojiIndex(this.data)
     this.setRef = this.setRef.bind(this)
     this.handleChange = this.handleChange.bind(this)
+    this.clear = this.clear.bind(this)
+    this.handleKeyUp = this.handleKeyUp.bind(this)
   }
 
-  handleChange() {
-    var value = this.input.value
+  search(value) {
+    if (value == '')
+      this.setState({
+        icon: icons.search,
+        isSearching: false,
+      })
+    else
+      this.setState({
+        icon: icons.delete,
+        isSearching: true,
+      })
 
     this.props.onSearch(
       this.emojiIndex.search(value, {
@@ -27,16 +43,29 @@ export default class Search extends React.PureComponent {
     )
   }
 
+  clear() {
+    if (this.input.value == '') return
+    this.input.value = ''
+    this.search('')
+  }
+
+  handleChange() {
+    this.search(this.input.value)
+  }
+
+  handleKeyUp(e) {
+    if (e.keyCode === 13) {
+      this.clear()
+    }
+  }
+
   setRef(c) {
     this.input = c
   }
 
-  clear() {
-    this.input.value = ''
-  }
-
   render() {
     var { i18n, autoFocus } = this.props
+    var { icon, isSearching } = this.state
 
     return (
       <div className="emoji-mart-search">
@@ -47,6 +76,13 @@ export default class Search extends React.PureComponent {
           placeholder={i18n.search}
           autoFocus={autoFocus}
         />
+        <button
+          className="emoji-mart-search-icon"
+          onClick={this.clear}
+          onKeyUp={this.handleKeyUp}
+          disabled={!isSearching}
+          dangerouslySetInnerHTML={{ __html: icon }}
+        />
       </div>
     )
   }
diff --git a/src/svgs/index.js b/src/svgs/index.js
index 877ce15..b6a7f74 100644
--- a/src/svgs/index.js
+++ b/src/svgs/index.js
@@ -1,23 +1,29 @@
-const SVGs = {
-  activity: `<path d="M12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.628-5.372-12-12-12m9.949 11H17.05c.224-2.527 1.232-4.773 1.968-6.113A9.966 9.966 0 0 1 21.949 11M13 11V2.051a9.945 9.945 0 0 1 4.432 1.564c-.858 1.491-2.156 4.22-2.392 7.385H13zm-2 0H8.961c-.238-3.165-1.536-5.894-2.393-7.385A9.95 9.95 0 0 1 11 2.051V11zm0 2v8.949a9.937 9.937 0 0 1-4.432-1.564c.857-1.492 2.155-4.221 2.393-7.385H11zm4.04 0c.236 3.164 1.534 5.893 2.392 7.385A9.92 9.92 0 0 1 13 21.949V13h2.04zM4.982 4.887C5.718 6.227 6.726 8.473 6.951 11h-4.9a9.977 9.977 0 0 1 2.931-6.113M2.051 13h4.9c-.226 2.527-1.233 4.771-1.969 6.113A9.972 9.972 0 0 1 2.051 13m16.967 6.113c-.735-1.342-1.744-3.586-1.968-6.113h4.899a9.961 9.961 0 0 1-2.931 6.113"/>`,
+const categories = {
+  activity: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.628-5.372-12-12-12m9.949 11H17.05c.224-2.527 1.232-4.773 1.968-6.113A9.966 9.966 0 0 1 21.949 11M13 11V2.051a9.945 9.945 0 0 1 4.432 1.564c-.858 1.491-2.156 4.22-2.392 7.385H13zm-2 0H8.961c-.238-3.165-1.536-5.894-2.393-7.385A9.95 9.95 0 0 1 11 2.051V11zm0 2v8.949a9.937 9.937 0 0 1-4.432-1.564c.857-1.492 2.155-4.221 2.393-7.385H11zm4.04 0c.236 3.164 1.534 5.893 2.392 7.385A9.92 9.92 0 0 1 13 21.949V13h2.04zM4.982 4.887C5.718 6.227 6.726 8.473 6.951 11h-4.9a9.977 9.977 0 0 1 2.931-6.113M2.051 13h4.9c-.226 2.527-1.233 4.771-1.969 6.113A9.972 9.972 0 0 1 2.051 13m16.967 6.113c-.735-1.342-1.744-3.586-1.968-6.113h4.899a9.961 9.961 0 0 1-2.931 6.113"/></svg>`,
 
-  custom: `<g transform="translate(2.000000, 1.000000)"><rect id="Rectangle" x="8" y="0" width="3" height="21" rx="1.5"></rect><rect id="Rectangle" transform="translate(9.843, 10.549) rotate(60) translate(-9.843, -10.549) " x="8.343" y="0.049" width="3" height="21" rx="1.5"></rect><rect id="Rectangle" transform="translate(9.843, 10.549) rotate(-60) translate(-9.843, -10.549) " x="8.343" y="0.049" width="3" height="21" rx="1.5"></rect></g>`,
+  custom: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><g transform="translate(2.000000, 1.000000)"><rect id="Rectangle" x="8" y="0" width="3" height="21" rx="1.5"></rect><rect id="Rectangle" transform="translate(9.843, 10.549) rotate(60) translate(-9.843, -10.549) " x="8.343" y="0.049" width="3" height="21" rx="1.5"></rect><rect id="Rectangle" transform="translate(9.843, 10.549) rotate(-60) translate(-9.843, -10.549) " x="8.343" y="0.049" width="3" height="21" rx="1.5"></rect></g></svg>`,
 
-  flags: `<path d="M0 0l6.084 24H8L1.916 0zM21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.563 3h7.875l2 8H8.563l-2-8zm8.832 10l-2.856 1.904L12.063 13h3.332zM19 13l-1.5-6h1.938l2 8H16l3-2z"/>`,
+  flags: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M0 0l6.084 24H8L1.916 0zM21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.563 3h7.875l2 8H8.563l-2-8zm8.832 10l-2.856 1.904L12.063 13h3.332zM19 13l-1.5-6h1.938l2 8H16l3-2z"/></svg>`,
 
-  foods: `<path d="M17 4.978c-1.838 0-2.876.396-3.68.934.513-1.172 1.768-2.934 4.68-2.934a1 1 0 0 0 0-2c-2.921 0-4.629 1.365-5.547 2.512-.064.078-.119.162-.18.244C11.73 1.838 10.798.023 9.207.023 8.579.022 7.85.306 7 .978 5.027 2.54 5.329 3.902 6.492 4.999 3.609 5.222 0 7.352 0 12.969c0 4.582 4.961 11.009 9 11.009 1.975 0 2.371-.486 3-1 .629.514 1.025 1 3 1 4.039 0 9-6.418 9-11 0-5.953-4.055-8-7-8M8.242 2.546c.641-.508.943-.523.965-.523.426.169.975 1.405 1.357 3.055-1.527-.629-2.741-1.352-2.98-1.846.059-.112.241-.356.658-.686M15 21.978c-1.08 0-1.21-.109-1.559-.402l-.176-.146c-.367-.302-.816-.452-1.266-.452s-.898.15-1.266.452l-.176.146c-.347.292-.477.402-1.557.402-2.813 0-7-5.389-7-9.009 0-5.823 4.488-5.991 5-5.991 1.939 0 2.484.471 3.387 1.251l.323.276a1.995 1.995 0 0 0 2.58 0l.323-.276c.902-.78 1.447-1.251 3.387-1.251.512 0 5 .168 5 6 0 3.617-4.187 9-7 9"/>`,
+  foods: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17 4.978c-1.838 0-2.876.396-3.68.934.513-1.172 1.768-2.934 4.68-2.934a1 1 0 0 0 0-2c-2.921 0-4.629 1.365-5.547 2.512-.064.078-.119.162-.18.244C11.73 1.838 10.798.023 9.207.023 8.579.022 7.85.306 7 .978 5.027 2.54 5.329 3.902 6.492 4.999 3.609 5.222 0 7.352 0 12.969c0 4.582 4.961 11.009 9 11.009 1.975 0 2.371-.486 3-1 .629.514 1.025 1 3 1 4.039 0 9-6.418 9-11 0-5.953-4.055-8-7-8M8.242 2.546c.641-.508.943-.523.965-.523.426.169.975 1.405 1.357 3.055-1.527-.629-2.741-1.352-2.98-1.846.059-.112.241-.356.658-.686M15 21.978c-1.08 0-1.21-.109-1.559-.402l-.176-.146c-.367-.302-.816-.452-1.266-.452s-.898.15-1.266.452l-.176.146c-.347.292-.477.402-1.557.402-2.813 0-7-5.389-7-9.009 0-5.823 4.488-5.991 5-5.991 1.939 0 2.484.471 3.387 1.251l.323.276a1.995 1.995 0 0 0 2.58 0l.323-.276c.902-.78 1.447-1.251 3.387-1.251.512 0 5 .168 5 6 0 3.617-4.187 9-7 9"/></svg>`,
 
-  nature: `<path d="M15.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 15.5 8M8.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 8.5 8"/><path d="M18.933 0h-.027c-.97 0-2.138.787-3.018 1.497-1.274-.374-2.612-.51-3.887-.51-1.285 0-2.616.133-3.874.517C7.245.79 6.069 0 5.093 0h-.027C3.352 0 .07 2.67.002 7.026c-.039 2.479.276 4.238 1.04 5.013.254.258.882.677 1.295.882.191 3.177.922 5.238 2.536 6.38.897.637 2.187.949 3.2 1.102C8.04 20.6 8 20.795 8 21c0 1.773 2.35 3 4 3 1.648 0 4-1.227 4-3 0-.201-.038-.393-.072-.586 2.573-.385 5.435-1.877 5.925-7.587.396-.22.887-.568 1.104-.788.763-.774 1.079-2.534 1.04-5.013C23.929 2.67 20.646 0 18.933 0M3.223 9.135c-.237.281-.837 1.155-.884 1.238-.15-.41-.368-1.349-.337-3.291.051-3.281 2.478-4.972 3.091-5.031.256.015.731.27 1.265.646-1.11 1.171-2.275 2.915-2.352 5.125-.133.546-.398.858-.783 1.313M12 22c-.901 0-1.954-.693-2-1 0-.654.475-1.236 1-1.602V20a1 1 0 1 0 2 0v-.602c.524.365 1 .947 1 1.602-.046.307-1.099 1-2 1m3-3.48v.02a4.752 4.752 0 0 0-1.262-1.02c1.092-.516 2.239-1.334 2.239-2.217 0-1.842-1.781-2.195-3.977-2.195-2.196 0-3.978.354-3.978 2.195 0 .883 1.148 1.701 2.238 2.217A4.8 4.8 0 0 0 9 18.539v-.025c-1-.076-2.182-.281-2.973-.842-1.301-.92-1.838-3.045-1.853-6.478l.023-.041c.496-.826 1.49-1.45 1.804-3.102 0-2.047 1.357-3.631 2.362-4.522C9.37 3.178 10.555 3 11.948 3c1.447 0 2.685.192 3.733.57 1 .9 2.316 2.465 2.316 4.48.313 1.651 1.307 2.275 1.803 3.102.035.058.068.117.102.178-.059 5.967-1.949 7.01-4.902 7.19m6.628-8.202c-.037-.065-.074-.13-.113-.195a7.587 7.587 0 0 0-.739-.987c-.385-.455-.648-.768-.782-1.313-.076-2.209-1.241-3.954-2.353-5.124.531-.376 1.004-.63 1.261-.647.636.071 3.044 1.764 3.096 5.031.027 1.81-.347 3.218-.37 3.235"/>`,
+  nature: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M15.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 15.5 8M8.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 8.5 8"/><path d="M18.933 0h-.027c-.97 0-2.138.787-3.018 1.497-1.274-.374-2.612-.51-3.887-.51-1.285 0-2.616.133-3.874.517C7.245.79 6.069 0 5.093 0h-.027C3.352 0 .07 2.67.002 7.026c-.039 2.479.276 4.238 1.04 5.013.254.258.882.677 1.295.882.191 3.177.922 5.238 2.536 6.38.897.637 2.187.949 3.2 1.102C8.04 20.6 8 20.795 8 21c0 1.773 2.35 3 4 3 1.648 0 4-1.227 4-3 0-.201-.038-.393-.072-.586 2.573-.385 5.435-1.877 5.925-7.587.396-.22.887-.568 1.104-.788.763-.774 1.079-2.534 1.04-5.013C23.929 2.67 20.646 0 18.933 0M3.223 9.135c-.237.281-.837 1.155-.884 1.238-.15-.41-.368-1.349-.337-3.291.051-3.281 2.478-4.972 3.091-5.031.256.015.731.27 1.265.646-1.11 1.171-2.275 2.915-2.352 5.125-.133.546-.398.858-.783 1.313M12 22c-.901 0-1.954-.693-2-1 0-.654.475-1.236 1-1.602V20a1 1 0 1 0 2 0v-.602c.524.365 1 .947 1 1.602-.046.307-1.099 1-2 1m3-3.48v.02a4.752 4.752 0 0 0-1.262-1.02c1.092-.516 2.239-1.334 2.239-2.217 0-1.842-1.781-2.195-3.977-2.195-2.196 0-3.978.354-3.978 2.195 0 .883 1.148 1.701 2.238 2.217A4.8 4.8 0 0 0 9 18.539v-.025c-1-.076-2.182-.281-2.973-.842-1.301-.92-1.838-3.045-1.853-6.478l.023-.041c.496-.826 1.49-1.45 1.804-3.102 0-2.047 1.357-3.631 2.362-4.522C9.37 3.178 10.555 3 11.948 3c1.447 0 2.685.192 3.733.57 1 .9 2.316 2.465 2.316 4.48.313 1.651 1.307 2.275 1.803 3.102.035.058.068.117.102.178-.059 5.967-1.949 7.01-4.902 7.19m6.628-8.202c-.037-.065-.074-.13-.113-.195a7.587 7.587 0 0 0-.739-.987c-.385-.455-.648-.768-.782-1.313-.076-2.209-1.241-3.954-2.353-5.124.531-.376 1.004-.63 1.261-.647.636.071 3.044 1.764 3.096 5.031.027 1.81-.347 3.218-.37 3.235"/></svg>`,
 
-  objects: `<path d="M12 0a9 9 0 0 0-5 16.482V21s2.035 3 5 3 5-3 5-3v-4.518A9 9 0 0 0 12 0zm0 2c3.86 0 7 3.141 7 7s-3.14 7-7 7-7-3.141-7-7 3.14-7 7-7zM9 17.477c.94.332 1.946.523 3 .523s2.06-.19 3-.523v.834c-.91.436-1.925.689-3 .689a6.924 6.924 0 0 1-3-.69v-.833zm.236 3.07A8.854 8.854 0 0 0 12 21c.965 0 1.888-.167 2.758-.451C14.155 21.173 13.153 22 12 22c-1.102 0-2.117-.789-2.764-1.453z"/><path d="M14.745 12.449h-.004c-.852-.024-1.188-.858-1.577-1.824-.421-1.061-.703-1.561-1.182-1.566h-.009c-.481 0-.783.497-1.235 1.537-.436.982-.801 1.811-1.636 1.791l-.276-.043c-.565-.171-.853-.691-1.284-1.794-.125-.313-.202-.632-.27-.913-.051-.213-.127-.53-.195-.634C7.067 9.004 7.039 9 6.99 9A1 1 0 0 1 7 7h.01c1.662.017 2.015 1.373 2.198 2.134.486-.981 1.304-2.058 2.797-2.075 1.531.018 2.28 1.153 2.731 2.141l.002-.008C14.944 8.424 15.327 7 16.979 7h.032A1 1 0 1 1 17 9h-.011c-.149.076-.256.474-.319.709a6.484 6.484 0 0 1-.311.951c-.429.973-.79 1.789-1.614 1.789"/>`,
+  objects: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 0a9 9 0 0 0-5 16.482V21s2.035 3 5 3 5-3 5-3v-4.518A9 9 0 0 0 12 0zm0 2c3.86 0 7 3.141 7 7s-3.14 7-7 7-7-3.141-7-7 3.14-7 7-7zM9 17.477c.94.332 1.946.523 3 .523s2.06-.19 3-.523v.834c-.91.436-1.925.689-3 .689a6.924 6.924 0 0 1-3-.69v-.833zm.236 3.07A8.854 8.854 0 0 0 12 21c.965 0 1.888-.167 2.758-.451C14.155 21.173 13.153 22 12 22c-1.102 0-2.117-.789-2.764-1.453z"/><path d="M14.745 12.449h-.004c-.852-.024-1.188-.858-1.577-1.824-.421-1.061-.703-1.561-1.182-1.566h-.009c-.481 0-.783.497-1.235 1.537-.436.982-.801 1.811-1.636 1.791l-.276-.043c-.565-.171-.853-.691-1.284-1.794-.125-.313-.202-.632-.27-.913-.051-.213-.127-.53-.195-.634C7.067 9.004 7.039 9 6.99 9A1 1 0 0 1 7 7h.01c1.662.017 2.015 1.373 2.198 2.134.486-.981 1.304-2.058 2.797-2.075 1.531.018 2.28 1.153 2.731 2.141l.002-.008C14.944 8.424 15.327 7 16.979 7h.032A1 1 0 1 1 17 9h-.011c-.149.076-.256.474-.319.709a6.484 6.484 0 0 1-.311.951c-.429.973-.79 1.789-1.614 1.789"/></svg>`,
 
-  people: `<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"/><path d="M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"/>`,
+  people: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"/><path d="M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"/></svg>`,
 
-  places: `<path d="M6.5 12C5.122 12 4 13.121 4 14.5S5.122 17 6.5 17 9 15.879 9 14.5 7.878 12 6.5 12m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5M17.5 12c-1.378 0-2.5 1.121-2.5 2.5s1.122 2.5 2.5 2.5 2.5-1.121 2.5-2.5-1.122-2.5-2.5-2.5m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5"/><path d="M22.482 9.494l-1.039-.346L21.4 9h.6c.552 0 1-.439 1-.992 0-.006-.003-.008-.003-.008H23c0-1-.889-2-1.984-2h-.642l-.731-1.717C19.262 3.012 18.091 2 16.764 2H7.236C5.909 2 4.738 3.012 4.357 4.283L3.626 6h-.642C1.889 6 1 7 1 8h.003S1 8.002 1 8.008C1 8.561 1.448 9 2 9h.6l-.043.148-1.039.346a2.001 2.001 0 0 0-1.359 2.097l.751 7.508a1 1 0 0 0 .994.901H3v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h6v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h1.096a.999.999 0 0 0 .994-.901l.751-7.508a2.001 2.001 0 0 0-1.359-2.097M6.273 4.857C6.402 4.43 6.788 4 7.236 4h9.527c.448 0 .834.43.963.857L19.313 9H4.688l1.585-4.143zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.189-3H2.811l-.662-6.607L3 11h18l.852.393L21.189 18z"/>`,
+  places: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M6.5 12C5.122 12 4 13.121 4 14.5S5.122 17 6.5 17 9 15.879 9 14.5 7.878 12 6.5 12m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5M17.5 12c-1.378 0-2.5 1.121-2.5 2.5s1.122 2.5 2.5 2.5 2.5-1.121 2.5-2.5-1.122-2.5-2.5-2.5m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5"/><path d="M22.482 9.494l-1.039-.346L21.4 9h.6c.552 0 1-.439 1-.992 0-.006-.003-.008-.003-.008H23c0-1-.889-2-1.984-2h-.642l-.731-1.717C19.262 3.012 18.091 2 16.764 2H7.236C5.909 2 4.738 3.012 4.357 4.283L3.626 6h-.642C1.889 6 1 7 1 8h.003S1 8.002 1 8.008C1 8.561 1.448 9 2 9h.6l-.043.148-1.039.346a2.001 2.001 0 0 0-1.359 2.097l.751 7.508a1 1 0 0 0 .994.901H3v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h6v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h1.096a.999.999 0 0 0 .994-.901l.751-7.508a2.001 2.001 0 0 0-1.359-2.097M6.273 4.857C6.402 4.43 6.788 4 7.236 4h9.527c.448 0 .834.43.963.857L19.313 9H4.688l1.585-4.143zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.189-3H2.811l-.662-6.607L3 11h18l.852.393L21.189 18z"/></svg>`,
 
-  recent: `<path d="M13 4h-2l-.001 7H9v2h2v2h2v-2h4v-2h-4z"/><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"/>`,
+  recent: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M13 4h-2l-.001 7H9v2h2v2h2v-2h4v-2h-4z"/><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"/></svg>`,
 
-  symbols: `<path d="M0 0h11v2H0zM4 11h3V6h4V4H0v2h4zM15.5 17c1.381 0 2.5-1.116 2.5-2.493s-1.119-2.493-2.5-2.493S13 13.13 13 14.507 14.119 17 15.5 17m0-2.986c.276 0 .5.222.5.493 0 .272-.224.493-.5.493s-.5-.221-.5-.493.224-.493.5-.493M21.5 19.014c-1.381 0-2.5 1.116-2.5 2.493S20.119 24 21.5 24s2.5-1.116 2.5-2.493-1.119-2.493-2.5-2.493m0 2.986a.497.497 0 0 1-.5-.493c0-.271.224-.493.5-.493s.5.222.5.493a.497.497 0 0 1-.5.493M22 13l-9 9 1.513 1.5 8.99-9.009zM17 11c2.209 0 4-1.119 4-2.5V2s.985-.161 1.498.949C23.01 4.055 23 6 23 6s1-1.119 1-3.135C24-.02 21 0 21 0h-2v6.347A5.853 5.853 0 0 0 17 6c-2.209 0-4 1.119-4 2.5s1.791 2.5 4 2.5M10.297 20.482l-1.475-1.585a47.54 47.54 0 0 1-1.442 1.129c-.307-.288-.989-1.016-2.045-2.183.902-.836 1.479-1.466 1.729-1.892s.376-.871.376-1.336c0-.592-.273-1.178-.818-1.759-.546-.581-1.329-.871-2.349-.871-1.008 0-1.79.293-2.344.879-.556.587-.832 1.181-.832 1.784 0 .813.419 1.748 1.256 2.805-.847.614-1.444 1.208-1.794 1.784a3.465 3.465 0 0 0-.523 1.833c0 .857.308 1.56.924 2.107.616.549 1.423.823 2.42.823 1.173 0 2.444-.379 3.813-1.137L8.235 24h2.819l-2.09-2.383 1.333-1.135zm-6.736-6.389a1.02 1.02 0 0 1 .73-.286c.31 0 .559.085.747.254a.849.849 0 0 1 .283.659c0 .518-.419 1.112-1.257 1.784-.536-.651-.805-1.231-.805-1.742a.901.901 0 0 1 .302-.669M3.74 22c-.427 0-.778-.116-1.057-.349-.279-.232-.418-.487-.418-.766 0-.594.509-1.288 1.527-2.083.968 1.134 1.717 1.946 2.248 2.438-.921.507-1.686.76-2.3.76"/>`,
+  symbols: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M0 0h11v2H0zM4 11h3V6h4V4H0v2h4zM15.5 17c1.381 0 2.5-1.116 2.5-2.493s-1.119-2.493-2.5-2.493S13 13.13 13 14.507 14.119 17 15.5 17m0-2.986c.276 0 .5.222.5.493 0 .272-.224.493-.5.493s-.5-.221-.5-.493.224-.493.5-.493M21.5 19.014c-1.381 0-2.5 1.116-2.5 2.493S20.119 24 21.5 24s2.5-1.116 2.5-2.493-1.119-2.493-2.5-2.493m0 2.986a.497.497 0 0 1-.5-.493c0-.271.224-.493.5-.493s.5.222.5.493a.497.497 0 0 1-.5.493M22 13l-9 9 1.513 1.5 8.99-9.009zM17 11c2.209 0 4-1.119 4-2.5V2s.985-.161 1.498.949C23.01 4.055 23 6 23 6s1-1.119 1-3.135C24-.02 21 0 21 0h-2v6.347A5.853 5.853 0 0 0 17 6c-2.209 0-4 1.119-4 2.5s1.791 2.5 4 2.5M10.297 20.482l-1.475-1.585a47.54 47.54 0 0 1-1.442 1.129c-.307-.288-.989-1.016-2.045-2.183.902-.836 1.479-1.466 1.729-1.892s.376-.871.376-1.336c0-.592-.273-1.178-.818-1.759-.546-.581-1.329-.871-2.349-.871-1.008 0-1.79.293-2.344.879-.556.587-.832 1.181-.832 1.784 0 .813.419 1.748 1.256 2.805-.847.614-1.444 1.208-1.794 1.784a3.465 3.465 0 0 0-.523 1.833c0 .857.308 1.56.924 2.107.616.549 1.423.823 2.42.823 1.173 0 2.444-.379 3.813-1.137L8.235 24h2.819l-2.09-2.383 1.333-1.135zm-6.736-6.389a1.02 1.02 0 0 1 .73-.286c.31 0 .559.085.747.254a.849.849 0 0 1 .283.659c0 .518-.419 1.112-1.257 1.784-.536-.651-.805-1.231-.805-1.742a.901.901 0 0 1 .302-.669M3.74 22c-.427 0-.778-.116-1.057-.349-.279-.232-.418-.487-.418-.766 0-.594.509-1.288 1.527-2.083.968 1.134 1.717 1.946 2.248 2.438-.921.507-1.686.76-2.3.76"/></svg>`,
 }
 
-export default SVGs
+const search = {
+  search: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 20 20" opacity="0.5"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>`,
+
+  delete: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 20 20" opacity="0.5"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>`,
+}
+
+export { categories, search }

From 8e6d363d8bdd38c1ca41c80560d580e5bc66ad90 Mon Sep 17 00:00:00 2001
From: Rena Ryumae <rryumae@atlassian.com>
Date: Thu, 21 Jun 2018 11:56:40 -0400
Subject: [PATCH 03/17] Not Found Component for emoji search

If a user's search returns no results,
the sleuth_or_spy emoji appears. We would
instead like for a custom image to appear.

We propose creating a NotFound component
that uses the the sleuth_or_spy emoji
on default when a user's search returns
no results but otherwise uses what the
user passes through
---
 .DS_Store                              | Bin 0 -> 10244 bytes
 README.md                              |  12 +++++++++
 css/emoji-mart.css                     |   6 +++++
 src/components/category.js             |  33 +++++++++++------------
 src/components/index.js                |   1 +
 src/components/not-found.js            |  35 +++++++++++++++++++++++++
 src/components/picker/nimble-picker.js |   2 ++
 src/utils/shared-props.js              |   2 ++
 stories/index.js                       |  14 +++++++++-
 9 files changed, 87 insertions(+), 18 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 src/components/not-found.js

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..ecafee06560319c4ba490223db770d6e71ab8c45
GIT binary patch
literal 10244
zcmeHMTWl0n82<mZ*fT>*r`*acm#&mbmA1A;3Z;nK8?pjI*p`-SncW%Mk?G93GuswQ
zO*O&zU@%@1jc7E)7lR2;B*qsL@9}PIyhVM`7axs86QA%uXJ(t-ZFw*;O3a+ioc~<@
z|D6AP^UeHo&H?~-XZ2QqC;%|JxKt`ATOjd%e$7iILCXq~NcP~Ql9rRCnleu}YzPqu
z5eN|o5eN|o5x6-JpqR}QTkOj)4-p6v2oab=fWIH2ba5FA<cu%HtAjGJ1t3{Q%_31*
zeEgG)@&=NzK+gD*S}37!O42vQV2gpl-T{4c>W>BbGrsiA0maNTPB1eDI}{AI9vBts
zfH7Z&d5A!Wz<dPw-n|r3;DQ^s3ij`v)YEWXBw<ztI%wd5R;2gp0(vHm=N0N<O_5$X
zjVJV=35?>|@qCdspWWep7L9uCMtaE!HyxZte3(pIrt7t|e2pcgWs7bpXG~^trF=Xw
z>P#d&&C9yoTIMLP9niedWKiyR9BZzuB@da##IUlw$FV)lw2h1~Hg$tkjt!c&?o4z$
zSzC9-I0?UlF^NgTiaIsbwz;FdF}k_6ZMrc!)v;}BV|2@w_UUPf)zr7%9X~mC=IqqD
z>4%=D)lkCVB?nc0eJ;O9r8y)lcf7}6Vac<(6@HUjp(HO><M-{6hn1z{<oN!yXF9ff
z$jG=Phm|Uq78_4F_JNGS`v+5wl^wI)VWm2yS*fh0c}ACICCsyiJLDOY9xoknos8Eb
z6o*W*<!!@?l68%P1{s*+MlYGU3QCtNR;*or+oqN++wbX}tz1&2R4<j~BZP_VnWs!6
zGcaN5-soY?O&PXs+9QMGrfViGqu<uXjB5Nul4e)dtg2Ka>Y7|vu?bV^*ibfUKA1JV
zGqcK)s!F+5y;V}KvST`VvCq-@OuFb%Yt?$jj`H@Nj6u0BoZ8r+%Ka`aLeZEcS{j>V
zx&JiXOvNP^xZ|yDvN~XCNyAcfiHWB6t+F~e?jxz}2^u?h$m&qa85^S|y4Bc7&D<xo
zOYLFG2kZo&d#~nt`_qQar>|MHvaeQE5A*geT{m>bSY52aztaMSx>$=}lPEN*&`g1F
zHyoo!B@Jibakv0az(sfkuE14z6W)i9;WPLgzJTxGC-?<^gKO|R`~laIp@fUE0##g(
zb+`drumg8u47;!!_uv6Mhzab+<CsDNPvHoraT3qs6rRKLcmbcpr|@Zf0bj(I@MXM$
zuj5<zHok-J;-~l}e(yV2lB4TBzn;tS2P);$HFzLPPAo*%NZ+n||0BA7Tj6tb+42?Z
z>KdBbw(jVfyO%|GE}uk#J3cuCX>z0xx37?e#AY?JT3&l2HV+Wzj7i3cqm<98#E#l%
zB%*NYFj3u5Pt_7)H{(x+D&G+yO^qp~q8hnVZe>JJWs%=|m)tH9g_SbDw?pn^#8l-L
zzjvn`llViXfEZe;kI3|%`rGWg1ef6rcn>}z)_ny(!q4z4{E3L=SdBHf3RmMAT!$O+
zcHD%G*o5u44Yy+_?!Z3Wg}X6M{OiX79K<0!Lj2PO|4huFi&-2e9zKkZ5DOp0#{wQc
zLp;2Mmy1{z&+*Nd_*y>e#uFLaa_kXm<1DR&(-g!qFh+SZg%byCI7OugiUSMq@b_F^
z_$!CK5QiS<gZm)?eT88Nco59juAp%p3RwmW(_Fli1#5vY$Ae;_U79>g2`@)TUwFp7
zESyh-$9%h`^j64_zDGZkWF~KQCX6h!Lgb+{e+&r@((1aP7xs~CCcpK<Sve-i3NUfW
z*9^^=rg@7(GsmPrdkK9M7y|tijFOFyelywHFj6=ZE+gBCyqU_#Hci&4B0a*dV2)DK
z%gocFkBI`Ua{hTjsB+Kee|iuu1=<q5Z#idd!o(sgx;uql2wW!fyd_}66e18J5F!vF
z5F&81B2el(7Uk#veK-F9|7LYR^eaRlMBpDl0Lyw4z1=iWZXaJfCO>PB(shz9p19tO
zFNFzZ;y9k9IF6?ZKaLlt8Ppb>V+gw#wR8I!Us8$Ezy4=H(Q#F{{}1>7#k<%4`~Lqg
Dz79AO

literal 0
HcmV?d00001

diff --git a/README.md b/README.md
index 57dc456..54e4341 100644
--- a/README.md
+++ b/README.md
@@ -50,6 +50,7 @@ import { Picker } from 'emoji-mart'
 | **defaultSkin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |
 | **style** | | | Inline styles applied to the root element. Useful for positioning |
 | **title** | | `Emoji Mart™` | The title shown when no emojis are hovered |
+| **notFound** | | `{notFoundImg = ''}` | [Not Found](#not-found) |
 
 #### I18n
 ```js
@@ -234,6 +235,17 @@ const customEmojis = [
 <Picker custom={customEmojis} />
 ```
 
+## Not Found
+You can provide a custom Not Found object which will allow the appearance of the not found search results to change. In this case, we change the default 'sleuth_or_spy' emoji to Octocat when our search finds no results.
+
+```js
+import { Picker } from 'emoji-mart'
+
+const notFound = () => <img src='https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7' />
+
+<Picker notFound={notFound} />
+```
+
 ## Headless search
 The `Picker` doesn’t have to be mounted for you to take advantage of the advanced search results.
 
diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index 93e62d7..d9e2a3e 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -144,6 +144,12 @@
   padding-top: 70px;
   color: #858585;
 }
+.emoji-mart-no-results-img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+}
 .emoji-mart-no-results .emoji-mart-category-label {
   display: none;
 }
diff --git a/src/components/category.js b/src/components/category.js
index 890fbc5..e16f193 100644
--- a/src/components/category.js
+++ b/src/components/category.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import frequently from '../utils/frequently'
 import { getData } from '../utils'
-import { NimbleEmoji } from '.'
+import { NimbleEmoji, NotFound } from '.'
 
 export default class Category extends React.Component {
   constructor(props) {
@@ -144,7 +144,14 @@ export default class Category extends React.Component {
   }
 
   render() {
-    var { id, name, hasStickyPosition, emojiProps, i18n } = this.props,
+    var {
+        id,
+        name,
+        hasStickyPosition,
+        emojiProps,
+        i18n,
+        notFound,
+      } = this.props,
       emojis = this.getEmojis(),
       labelStyles = {},
       labelSpanStyles = {},
@@ -191,21 +198,12 @@ export default class Category extends React.Component {
 
         {emojis &&
           !emojis.length && (
-            <div>
-              <div>
-                {NimbleEmoji({
-                  data: this.data,
-                  ...emojiProps,
-                  size: 38,
-                  emoji: 'sleuth_or_spy',
-                  onOver: null,
-                  onLeave: null,
-                  onClick: null,
-                })}
-              </div>
-
-              <div className="emoji-mart-no-results-label">{i18n.notfound}</div>
-            </div>
+            <NotFound
+              i18n={i18n}
+              notFound={notFound}
+              data={this.data}
+              emojiProps={emojiProps}
+            />
           )}
       </div>
     )
@@ -220,6 +218,7 @@ Category.propTypes = {
   perLine: PropTypes.number.isRequired,
   emojiProps: PropTypes.object.isRequired,
   recent: PropTypes.arrayOf(PropTypes.string),
+  notFound: PropTypes.func,
 }
 
 Category.defaultProps = {
diff --git a/src/components/index.js b/src/components/index.js
index 2f59995..81faff2 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,6 +1,7 @@
 export { default as Anchors } from './anchors'
 export { default as Category } from './category'
 export { default as Preview } from './preview'
+export { default as NotFound } from './not-found'
 export { default as Search } from './search'
 export { default as Skins } from './skins'
 
diff --git a/src/components/not-found.js b/src/components/not-found.js
new file mode 100644
index 0000000..3880657
--- /dev/null
+++ b/src/components/not-found.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { NimbleEmoji } from '.'
+
+export default class NotFound extends React.PureComponent {
+  render() {
+    const { data, emojiProps, i18n, notFound } = this.props
+
+    const imageComponent = (notFound && notFound()) || (
+      <div>
+        {NimbleEmoji({
+          data: data,
+          ...emojiProps,
+          size: 38,
+          emoji: 'sleuth_or_spy',
+          onOver: null,
+          onLeave: null,
+          onClick: null,
+        })}
+        <div className="emoji-mart-no-results-label">{i18n.notfound}</div>
+      </div>
+    )
+
+    return <div className="emoji-mart-no-results">{imageComponent}</div>
+  }
+}
+
+NotFound.propTypes = {
+  notFound: PropTypes.func.isRequired,
+  emojiProps: PropTypes.object.isRequired,
+}
+
+NotFound.defaultProps = {
+  notFound: () => {},
+}
diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
index 20586e1..1bd3fc5 100644
--- a/src/components/picker/nimble-picker.js
+++ b/src/components/picker/nimble-picker.js
@@ -467,6 +467,7 @@ export default class NimblePicker extends React.PureComponent {
         exclude,
         recent,
         autoFocus,
+        notFound,
       } = this.props,
       { skin } = this.state,
       width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
@@ -539,6 +540,7 @@ export default class NimblePicker extends React.PureComponent {
                   onLeave: this.handleEmojiLeave,
                   onClick: this.handleEmojiClick,
                 }}
+                notFound={notFound}
               />
             )
           })}
diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js
index 3bb8083..9509825 100644
--- a/src/utils/shared-props.js
+++ b/src/utils/shared-props.js
@@ -71,6 +71,7 @@ const PickerPropTypes = {
       imageUrl: PropTypes.string.isRequired,
     }),
   ),
+  notFound: PropTypes.func,
 }
 
 const PickerDefaultProps = {
@@ -96,6 +97,7 @@ const PickerDefaultProps = {
   emojiTooltip: EmojiDefaultProps.tooltip,
   autoFocus: false,
   custom: [],
+  notFound: () => {},
 }
 
 export {
diff --git a/stories/index.js b/stories/index.js
index b0798ec..2250cf9 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -41,7 +41,19 @@ storiesOf('Picker', module)
       showPreview={boolean('Show preview', true)}
       showSkinTones={boolean('Show skin tones', true)}
       custom={CUSTOM_EMOJIS}
-    />
+    />))
+    .add('with a custom not found image', () => (
+      <Picker
+        notFound={
+          () => <img src='https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7' />
+        }
+      />))
+      .add('with a custom not found SVG', () => (
+        <Picker
+          notFound={
+            () => <svg aria-labelledby="simpleicons-jira-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-jira-icon">Jira icon</title><path d="M23.323 11.33L13.001 1 12 0 4.225 7.775.67 11.33a.96.96 0 0 0 0 1.347l7.103 7.103L12 24l7.771-7.771.121-.121 3.431-3.431a.945.945 0 0 0 0-1.347zM12 15.551L8.449 12 12 8.453 15.548 12 12 15.551z"/></svg>
+          }
+        />
   ));
 
 storiesOf('Emoji', module)

From 98af838d60813b6a1eeadd01276b3e39b1330268 Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Mon, 30 Jul 2018 16:17:22 -0400
Subject: [PATCH 04/17] Update search input & icon

---
 css/emoji-mart.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index 255cf44..4c8451d 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -94,7 +94,7 @@
   font-size: 16px;
   display: block;
   width: 100%;
-  padding: .2em 1.6em .2em .6em;
+  padding: 5px 25px 6px 10px;
   border-radius: 25px;
   border: 1px solid #d9d9d9;
   outline: 0;
@@ -102,8 +102,8 @@
 
 .emoji-mart-search-icon {
   position: absolute;
-  top: 5px;
-  right: 13px;
+  top: 9px;
+  right: 16px;
   z-index: 2;
   padding: 0;
   border: none;

From 3dc3e2fd954fbf7da4ea9825a103bc42661856e9 Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Mon, 30 Jul 2018 16:52:15 -0400
Subject: [PATCH 05/17] =?UTF-8?q?Don=E2=80=99t=20apply=20`emoji-mart-no-re?=
 =?UTF-8?q?sults`=20class=20when=20using=20custom=20notFound=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/category.js  | 4 +---
 src/components/not-found.js | 6 +++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/category.js b/src/components/category.js
index e16f193..ff5b4f6 100644
--- a/src/components/category.js
+++ b/src/components/category.js
@@ -176,9 +176,7 @@ export default class Category extends React.Component {
     return (
       <div
         ref={this.setContainerRef}
-        className={`emoji-mart-category ${
-          emojis && !emojis.length ? 'emoji-mart-no-results' : ''
-        }`}
+        className="emoji-mart-category"
         style={containerStyles}
       >
         <div
diff --git a/src/components/not-found.js b/src/components/not-found.js
index 3880657..9c51297 100644
--- a/src/components/not-found.js
+++ b/src/components/not-found.js
@@ -6,8 +6,8 @@ export default class NotFound extends React.PureComponent {
   render() {
     const { data, emojiProps, i18n, notFound } = this.props
 
-    const imageComponent = (notFound && notFound()) || (
-      <div>
+    const component = (notFound && notFound()) || (
+      <div className="emoji-mart-no-results">
         {NimbleEmoji({
           data: data,
           ...emojiProps,
@@ -21,7 +21,7 @@ export default class NotFound extends React.PureComponent {
       </div>
     )
 
-    return <div className="emoji-mart-no-results">{imageComponent}</div>
+    return component
   }
 }
 

From 8ddd8725e8506c73272786153e63453d1ad9e1f0 Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Mon, 30 Jul 2018 16:52:41 -0400
Subject: [PATCH 06/17] Update README

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 54e4341..8c85c89 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@ import { Picker } from 'emoji-mart'
 | **defaultSkin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |
 | **style** | | | Inline styles applied to the root element. Useful for positioning |
 | **title** | | `Emoji Mart™` | The title shown when no emojis are hovered |
-| **notFound** | | `{notFoundImg = ''}` | [Not Found](#not-found) |
+| **notFound** | | | [Not Found](#not-found) |
 
 #### I18n
 ```js

From 4bb41b9796fdd8a36c9ac51aefb8007eb5d1dbc4 Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Mon, 30 Jul 2018 17:06:23 -0400
Subject: [PATCH 07/17] Add notFoundEmoji props to Picker

---
 README.md                              | 1 +
 src/components/category.js             | 3 +++
 src/components/not-found.js            | 9 +++------
 src/components/picker/nimble-picker.js | 2 ++
 src/utils/shared-props.js              | 2 ++
 stories/index.js                       | 1 +
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 8c85c89..16b5f27 100644
--- a/README.md
+++ b/README.md
@@ -50,6 +50,7 @@ import { Picker } from 'emoji-mart'
 | **defaultSkin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |
 | **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 |
 | **notFound** | | | [Not Found](#not-found) |
 
 #### I18n
diff --git a/src/components/category.js b/src/components/category.js
index ff5b4f6..dccf99e 100644
--- a/src/components/category.js
+++ b/src/components/category.js
@@ -151,6 +151,7 @@ export default class Category extends React.Component {
         emojiProps,
         i18n,
         notFound,
+        notFoundEmoji,
       } = this.props,
       emojis = this.getEmojis(),
       labelStyles = {},
@@ -199,6 +200,7 @@ export default class Category extends React.Component {
             <NotFound
               i18n={i18n}
               notFound={notFound}
+              notFoundEmoji={notFoundEmoji}
               data={this.data}
               emojiProps={emojiProps}
             />
@@ -217,6 +219,7 @@ Category.propTypes = {
   emojiProps: PropTypes.object.isRequired,
   recent: PropTypes.arrayOf(PropTypes.string),
   notFound: PropTypes.func,
+  notFoundEmoji: PropTypes.string.isRequired,
 }
 
 Category.defaultProps = {
diff --git a/src/components/not-found.js b/src/components/not-found.js
index 9c51297..7ffda01 100644
--- a/src/components/not-found.js
+++ b/src/components/not-found.js
@@ -4,7 +4,7 @@ import { NimbleEmoji } from '.'
 
 export default class NotFound extends React.PureComponent {
   render() {
-    const { data, emojiProps, i18n, notFound } = this.props
+    const { data, emojiProps, i18n, notFound, notFoundEmoji } = this.props
 
     const component = (notFound && notFound()) || (
       <div className="emoji-mart-no-results">
@@ -12,7 +12,7 @@ export default class NotFound extends React.PureComponent {
           data: data,
           ...emojiProps,
           size: 38,
-          emoji: 'sleuth_or_spy',
+          emoji: notFoundEmoji,
           onOver: null,
           onLeave: null,
           onClick: null,
@@ -27,9 +27,6 @@ export default class NotFound extends React.PureComponent {
 
 NotFound.propTypes = {
   notFound: PropTypes.func.isRequired,
+  notFoundString: PropTypes.string.isRequired,
   emojiProps: PropTypes.object.isRequired,
 }
-
-NotFound.defaultProps = {
-  notFound: () => {},
-}
diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
index 1bd3fc5..45d6568 100644
--- a/src/components/picker/nimble-picker.js
+++ b/src/components/picker/nimble-picker.js
@@ -468,6 +468,7 @@ export default class NimblePicker extends React.PureComponent {
         recent,
         autoFocus,
         notFound,
+        notFoundEmoji,
       } = this.props,
       { skin } = this.state,
       width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
@@ -541,6 +542,7 @@ export default class NimblePicker extends React.PureComponent {
                   onClick: this.handleEmojiClick,
                 }}
                 notFound={notFound}
+                notFoundEmoji={notFoundEmoji}
               />
             )
           })}
diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js
index 9509825..c2041be 100644
--- a/src/utils/shared-props.js
+++ b/src/utils/shared-props.js
@@ -72,6 +72,7 @@ const PickerPropTypes = {
     }),
   ),
   notFound: PropTypes.func,
+  notFoundEmoji: PropTypes.string,
 }
 
 const PickerDefaultProps = {
@@ -98,6 +99,7 @@ const PickerDefaultProps = {
   autoFocus: false,
   custom: [],
   notFound: () => {},
+  notFoundEmoji: 'sleuth_or_spy',
 }
 
 export {
diff --git a/stories/index.js b/stories/index.js
index 2250cf9..d51a10a 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -36,6 +36,7 @@ storiesOf('Picker', module)
       perLine={number('Per line', 9)}
       title={text('Idle text', 'Your Title Here')}
       emoji={text('Idle emoji', 'department_store')}
+      notFoundEmoji={text('Not found emoji', 'sleuth_or_spy')}
       defaultSkin={number('Default skin tone', 1)}
       color={color('Highlight color', '#ae65c5')}
       showPreview={boolean('Show preview', true)}

From 31cc0ab2153fc47ff7011d8b02edb2d96f11f013 Mon Sep 17 00:00:00 2001
From: Rena Ryumae <rryumae@atlassian.com>
Date: Fri, 22 Jun 2018 17:23:42 -0400
Subject: [PATCH 08/17] Customizable Category Icons

Currently, the default emoji-mart
category icons cannot be changed.

We propose creating a categories
object that uses the emoji-mart
category icons on default but
otherwise uses custom imgs/svgs
passed in by the user
---
 README.md                              | 18 ++++++++++++++++++
 css/emoji-mart.css                     |  6 ++++--
 src/components/anchors.js              | 25 ++++++-------------------
 src/components/picker/nimble-picker.js | 18 ++++++++++++++++++
 src/utils/shared-props.js              |  2 ++
 stories/index.js                       | 22 +++++++++++++++++++++-
 6 files changed, 69 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index 57dc456..a8f7935 100644
--- a/README.md
+++ b/README.md
@@ -50,6 +50,7 @@ import { Picker } from 'emoji-mart'
 | **defaultSkin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |
 | **style** | | | Inline styles applied to the root element. Useful for positioning |
 | **title** | | `Emoji Mart™` | The title shown when no emojis are hovered |
+| **icons** | | `{}` | [Custom icons](#custom-icons) |
 
 #### I18n
 ```js
@@ -234,6 +235,23 @@ const customEmojis = [
 <Picker custom={customEmojis} />
 ```
 
+## Custom icons
+You can provide custom icons which will override the default icons.
+
+```js
+import { Picker } from 'emoji-mart'
+
+const customIcons = {
+  categories: {
+    recent: () => <img src='https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7' />,
+    foods: () => <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0l6.084 24H8L1.916 0zM21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.563 3h7.875l2 8H8.563l-2-8zm8.832 10l-2.856 1.904L12.063 13h3.332zM19 13l-1.5-6h1.938l2 8H16l3-2z"/></svg>,
+    people: () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M3 2l10 6-10 6z"></path></svg>
+  }
+}
+
+<Picker icons={customIcons} />
+```
+
 ## Headless search
 The `Picker` doesn’t have to be mounted for you to take advantage of the advanced search results.
 
diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index 93e62d7..9fbdeb6 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -72,9 +72,11 @@
   max-width: 22px;
 }
 
-.emoji-mart-anchors svg {
+.emoji-mart-anchors svg,
+.emoji-mart-anchors img {
   fill: currentColor;
-  max-height: 18px;
+  height: 18px;
+  width: 18px;
 }
 
 .emoji-mart-scroll {
diff --git a/src/components/anchors.js b/src/components/anchors.js
index e620387..5008d6b 100644
--- a/src/components/anchors.js
+++ b/src/components/anchors.js
@@ -1,8 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import SVGs from '../svgs'
-
 export default class Anchors extends React.PureComponent {
   constructor(props) {
     super(props)
@@ -18,21 +16,6 @@ export default class Anchors extends React.PureComponent {
     this.handleClick = this.handleClick.bind(this)
   }
 
-  getSVG(id) {
-    this.SVGs || (this.SVGs = {})
-
-    if (this.SVGs[id]) {
-      return this.SVGs[id]
-    } else {
-      let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-       ${SVGs[id]}
-      </svg>`
-
-      this.SVGs[id] = svg
-      return svg
-    }
-  }
-
   handleClick(e) {
     var index = e.currentTarget.getAttribute('data-index')
     var { categories, onAnchorClick } = this.props
@@ -41,7 +24,7 @@ export default class Anchors extends React.PureComponent {
   }
 
   render() {
-    var { categories, onAnchorClick, color, i18n } = this.props,
+    var { categories, color, i18n, icons } = this.props,
       { selected } = this.state
 
     return (
@@ -65,7 +48,9 @@ export default class Anchors extends React.PureComponent {
               }`}
               style={{ color: isSelected ? color : null }}
             >
-              <div dangerouslySetInnerHTML={{ __html: this.getSVG(id) }} />
+              <div className="emoji-mart-anchor-icon">
+                {icons.categories[id]()}
+              </div>
               <span
                 className="emoji-mart-anchor-bar"
                 style={{ backgroundColor: color }}
@@ -81,9 +66,11 @@ export default class Anchors extends React.PureComponent {
 Anchors.propTypes = {
   categories: PropTypes.array,
   onAnchorClick: PropTypes.func,
+  icons: PropTypes.object,
 }
 
 Anchors.defaultProps = {
   categories: [],
   onAnchorClick: () => {},
+  icons: {},
 }
diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
index 20586e1..9cd396f 100644
--- a/src/components/picker/nimble-picker.js
+++ b/src/components/picker/nimble-picker.js
@@ -3,6 +3,7 @@ import '../../vendor/raf-polyfill'
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import SVGs from '../../svgs'
 import store from '../../utils/store'
 import frequently from '../../utils/frequently'
 import { deepMerge, measureScrollbar } from '../../utils'
@@ -29,6 +30,21 @@ const I18N = {
   },
 }
 
+const toSVG = (val) => () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    dangerouslySetInnerHTML={{ __html: val }}
+  />
+)
+
+const ICON_FNS = {
+  categories: Object.keys(SVGs).reduce((acc, cur) => {
+    acc[cur] = toSVG(SVGs[cur])
+    return acc
+  }, {}),
+}
+
 export default class NimblePicker extends React.PureComponent {
   constructor(props) {
     super(props)
@@ -48,6 +64,7 @@ export default class NimblePicker extends React.PureComponent {
 
     this.data = props.data
     this.i18n = deepMerge(I18N, props.i18n)
+    this.icons = deepMerge(ICON_FNS, props.icons)
     this.state = {
       skin: props.skin || store.get('skin') || props.defaultSkin,
       firstRender: true,
@@ -485,6 +502,7 @@ export default class NimblePicker extends React.PureComponent {
             color={color}
             categories={this.categories}
             onAnchorClick={this.handleAnchorClick}
+            icons={this.icons}
           />
         </div>
 
diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js
index 3bb8083..89b6840 100644
--- a/src/utils/shared-props.js
+++ b/src/utils/shared-props.js
@@ -71,6 +71,7 @@ const PickerPropTypes = {
       imageUrl: PropTypes.string.isRequired,
     }),
   ),
+  icons: PropTypes.object,
 }
 
 const PickerDefaultProps = {
@@ -96,6 +97,7 @@ const PickerDefaultProps = {
   emojiTooltip: EmojiDefaultProps.tooltip,
   autoFocus: false,
   custom: [],
+  icons: {},
 }
 
 export {
diff --git a/stories/index.js b/stories/index.js
index b0798ec..60a035b 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -41,7 +41,27 @@ storiesOf('Picker', module)
       showPreview={boolean('Show preview', true)}
       showSkinTones={boolean('Show skin tones', true)}
       custom={CUSTOM_EMOJIS}
-    />
+    />))
+    .add('with-custom-icons', () => (
+      <Picker
+        custom={CUSTOM_EMOJIS}
+        icons={
+          {
+            categories: {
+              recent: () => <img src='https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7' />,
+              people: () => <svg aria-labelledby="simpleicons-reddit-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-reddit-icon">Reddit icon</title><path d="M2.204 14.049c-.06.276-.091.56-.091.847 0 3.443 4.402 6.249 9.814 6.249 5.41 0 9.812-2.804 9.812-6.249 0-.274-.029-.546-.082-.809l-.015-.032c-.021-.055-.029-.11-.029-.165-.302-1.175-1.117-2.241-2.296-3.103-.045-.016-.088-.039-.126-.07-.026-.02-.045-.042-.067-.064-1.792-1.234-4.356-2.008-7.196-2.008-2.815 0-5.354.759-7.146 1.971-.014.018-.029.033-.049.049-.039.033-.084.06-.13.075-1.206.862-2.042 1.937-2.354 3.123 0 .058-.014.114-.037.171l-.008.015zm9.773 5.441c-1.794 0-3.057-.389-3.863-1.197-.173-.174-.173-.457 0-.632.176-.165.46-.165.635 0 .63.629 1.685.943 3.228.943 1.542 0 2.591-.3 3.219-.929.165-.164.45-.164.629 0 .165.18.165.465 0 .645-.809.808-2.065 1.198-3.862 1.198l.014-.028zm-3.606-7.573c-.914 0-1.677.765-1.677 1.677 0 .91.763 1.65 1.677 1.65s1.651-.74 1.651-1.65c0-.912-.739-1.677-1.651-1.677zm7.233 0c-.914 0-1.678.765-1.678 1.677 0 .91.764 1.65 1.678 1.65s1.651-.74 1.651-1.65c0-.912-.739-1.677-1.651-1.677zm4.548-1.595c1.037.833 1.8 1.821 2.189 2.904.45-.336.719-.864.719-1.449 0-1.002-.815-1.816-1.818-1.816-.399 0-.778.129-1.09.363v-.002zM2.711 9.963c-1.003 0-1.817.816-1.817 1.818 0 .543.239 1.048.644 1.389.401-1.079 1.172-2.053 2.213-2.876-.302-.21-.663-.329-1.039-.329v-.002zm9.217 12.079c-5.906 0-10.709-3.205-10.709-7.142 0-.275.023-.544.068-.809C.494 13.598 0 12.729 0 11.777c0-1.496 1.227-2.713 2.725-2.713.674 0 1.303.246 1.797.682 1.856-1.191 4.357-1.941 7.112-1.992l1.812-5.524.404.095s.016 0 .016.002l4.223.993c.344-.798 1.138-1.36 2.065-1.36 1.229 0 2.231 1.004 2.231 2.234 0 1.232-1.003 2.234-2.231 2.234s-2.23-1.004-2.23-2.23l-3.851-.912-1.467 4.477c2.65.105 5.047.854 6.844 2.021.494-.464 1.144-.719 1.833-.719 1.498 0 2.718 1.213 2.718 2.711 0 .987-.54 1.886-1.378 2.365.029.255.059.494.059.749-.015 3.938-4.806 7.143-10.72 7.143l-.034.009zm8.179-19.187c-.74 0-1.34.599-1.34 1.338 0 .738.6 1.34 1.34 1.34.732 0 1.33-.6 1.33-1.334 0-.733-.598-1.332-1.347-1.332l.017-.012z"/></svg>,
+              nature: () => <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zM8 1.5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5-6.5-2.91-6.5-6.5 2.91-6.5 6.5-6.5zM4 5c0-0.552 0.448-1 1-1s1 0.448 1 1-0.448 1-1 1-1-0.448-1-1zM10 5c0-0.552 0.448-1 1-1s1 0.448 1 1-0.448 1-1 1-1-0.448-1-1z"></path><path d="M10.561 8.439c-0.586-0.586-1.536-0.586-2.121 0s-0.586 1.536 0 2.121c0.019 0.019 0.038 0.037 0.058 0.055 1.352 1.227 4.503-0.029 4.503-1.615-0.969 0.625-1.726 0.153-2.439-0.561z"></path><path d="M5.439 8.439c0.586-0.586 1.536-0.586 2.121 0s0.586 1.536 0 2.121c-0.019 0.019-0.038 0.037-0.058 0.055-1.352 1.227-4.503-0.029-4.503-1.615 0.969 0.625 1.726 0.153 2.439-0.561z"></path></svg>,
+              foods: () => <svg aria-labelledby="simpleicons-jira-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-jira-icon">Jira icon</title><path d="M23.323 11.33L13.001 1 12 0 4.225 7.775.67 11.33a.96.96 0 0 0 0 1.347l7.103 7.103L12 24l7.771-7.771.121-.121 3.431-3.431a.945.945 0 0 0 0-1.347zM12 15.551L8.449 12 12 8.453 15.548 12 12 15.551z"/></svg>,
+              activity: () => <img src='https://assets-cdn.github.com/images/icons/emoji/shipit.png?v7' />,
+              places: () => <svg aria-labelledby="simpleicons-stackoverflow-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-stackoverflow-icon">Stack Overflow icon</title><path d="M18.986 21.865v-6.404h2.134V24H1.844v-8.539h2.13v6.404h15.012zM6.111 19.731H16.85v-2.137H6.111v2.137zm.259-4.852l10.48 2.189.451-2.07-10.478-2.187-.453 2.068zm1.359-5.056l9.705 4.53.903-1.95-9.706-4.53-.902 1.936v.014zm2.715-4.785l8.217 6.855 1.359-1.62-8.216-6.853-1.35 1.617-.01.001zM15.751 0l-1.746 1.294 6.405 8.604 1.746-1.294L15.749 0h.002z"/></svg>,
+              objects: () => <svg aria-labelledby="simpleicons-500px-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ><title id="simpleicons-500px-icon">Atlassian icon</title><path d="M19.31 23.957H15.71a1.26 1.26 0 0 1-1.312-.792c-1.332-2.665-2.78-5.288-3.987-8.046a15.25 15.25 0 0 1 .885-14.47c.166-.281.52-.625.791-.625s.593.375.74.666q5.444 10.89 10.898 21.788c.542 1.041.292 1.468-.905 1.479zm-14.573 0H1.04c-1.041 0-1.27-.417-.812-1.333q2.8-5.538 5.549-11.055c.5-1.041.895-1.041 1.592-.177a12.221 12.221 0 0 1 2.51 11.17c-.344 1.322-.532 1.405-1.864 1.405z"/></svg>,
+              symbols: () => <svg aria-labelledby="simpleicons-hipchat-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-hipchat-icon">HipChat icon</title><path d="M19.736 19.056s.103-.073.267-.198C22.46 16.958 24 14.203 24 11.139 24 5.424 18.627.787 12.003.787 5.377.787 0 5.424 0 11.139c0 5.717 5.371 10.356 11.998 10.356.847 0 1.694-.073 2.524-.228l.262-.045c1.683 1.092 4.139 1.99 6.288 1.99.665 0 .978-.546.552-1.104-.648-.795-1.541-2.068-1.888-3.052zm-1.462-4.526c-.716 1.069-2.934 2.889-6.254 2.889h-.046c-3.328 0-5.543-1.831-6.254-2.889a1.137 1.137 0 0 1-.273-.574.49.49 0 0 1 .447-.526c.008-.003.014-.003.021-.003.117.006.23.043.328.111a9.137 9.137 0 0 0 5.754 2.056 8.805 8.805 0 0 0 5.76-2.059.461.461 0 0 1 .313-.122c.267 0 .478.213.483.475a1.321 1.321 0 0 1-.268.643h-.011z"/></svg>,
+              flags: () => <svg version="1.1" xmlns="http://www.w3.org/2000/svg"width="16" height="16" viewBox="0 0 16 16"><path d="M4.75 9.5c0 1.795 1.455 3.25 3.25 3.25s3.25-1.455 3.25-3.25-1.455-3.25-3.25-3.25-3.25 1.455-3.25 3.25zM15 4h-3.5c-0.25-1-0.5-2-1.5-2h-4c-1 0-1.25 1-1.5 2h-3.5c-0.55 0-1 0.45-1 1v9c0 0.55 0.45 1 1 1h14c0.55 0 1-0.45 1-1v-9c0-0.55-0.45-1-1-1zM8 13.938c-2.451 0-4.438-1.987-4.438-4.438s1.987-4.438 4.438-4.438c2.451 0 4.438 1.987 4.438 4.438s-1.987 4.438-4.438 4.438zM15 7h-2v-1h2v1z"></path></svg>,
+              custom: () => <svg aria-labelledby="simpleicons-trello-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-trello-icon">Trello icon</title><path d="M21 0H3C1.343 0 0 1.343 0 3v18c0 1.656 1.343 3 3 3h18c1.656 0 3-1.344 3-3V3c0-1.657-1.344-3-3-3zM10.44 18.18c0 .795-.645 1.44-1.44 1.44H4.56c-.795 0-1.44-.646-1.44-1.44V4.56c0-.795.645-1.44 1.44-1.44H9c.795 0 1.44.645 1.44 1.44v13.62zm10.44-6c0 .794-.645 1.44-1.44 1.44H15c-.795 0-1.44-.646-1.44-1.44V4.56c0-.795.646-1.44 1.44-1.44h4.44c.795 0 1.44.645 1.44 1.44v7.62z"/></svg>,
+            }
+          }
+        }
+      />
   ));
 
 storiesOf('Emoji', module)

From 2cea3df86ab7b20a19902e27dd672bf75bd5b2ae Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Tue, 31 Jul 2018 14:02:56 -0400
Subject: [PATCH 09/17] =?UTF-8?q?Call=20fallback=20when=20emoji=20name=20i?=
 =?UTF-8?q?sn=E2=80=99t=20recognized=20[Fix=20#199]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                            |  6 +++---
 src/components/emoji/nimble-emoji.js | 14 +++++++++++---
 stories/index.js                     |  4 ++--
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 16b5f27..64dae25 100644
--- a/README.md
+++ b/README.md
@@ -160,7 +160,7 @@ import { Emoji } from 'emoji-mart'
 | **onClick** | | | Params: `(emoji, event) => {}` |
 | **onLeave** | | | Params: `(emoji, event) => {}` |
 | **onOver** | | | Params: `(emoji, event) => {}` |
-| [**fallback**](#unsupported-emojis-fallback) | | | Params: `(emoji) => {}` |
+| [**fallback**](#unsupported-emojis-fallback) | | | Params: `(emoji, props) => {}` |
 | **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` |
 | **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |
 | **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/emoji-datasource@3.0.0/sheet_${set}_${sheetSize}.png`)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
@@ -178,8 +178,8 @@ To have the component render `:shrug:` you would need to:
   set={'messenger'}
   emoji={'shrug'}
   size={24}
-  fallback={(emoji) => {
-    return `:${emoji.short_names[0]}:`
+  fallback={(emoji, props) => {
+    return emoji ? `:${emoji.short_names[0]}:` : props.emoji
   }}
 />
 ```
diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js
index 2cc2652..135e735 100644
--- a/src/components/emoji/nimble-emoji.js
+++ b/src/components/emoji/nimble-emoji.js
@@ -87,7 +87,11 @@ const NimbleEmoji = (props) => {
 
   let data = _getData(props)
   if (!data) {
-    return null
+    if (props.fallback) {
+      return props.fallback(null, props)
+    } else {
+      return null
+    }
   }
 
   let { unified, custom, short_names, imageUrl } = data,
@@ -97,7 +101,11 @@ const NimbleEmoji = (props) => {
     title = null
 
   if (!unified && !custom) {
-    return null
+    if (props.fallback) {
+      return props.fallback(data, props)
+    } else {
+      return null
+    }
   }
 
   if (props.tooltip) {
@@ -129,7 +137,7 @@ const NimbleEmoji = (props) => {
 
     if (!setHasEmoji) {
       if (props.fallback) {
-        return props.fallback(data)
+        return props.fallback(data, props)
       } else {
         return null
       }
diff --git a/stories/index.js b/stories/index.js
index d51a10a..d639b61 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -67,8 +67,8 @@ storiesOf('Emoji', module)
       size={number('Emoji size', 64)}
       skin={number('Skin tone', 1)}
       html={boolean('HTML', false)}
-      fallback={(emoji) => {
-        return `:${emoji.short_names[0]}:`
+      fallback={(emoji, props) => {
+        return emoji ? `:${emoji.short_names[0]}:` : props.emoji
       }}
     />
   ));

From 60d3b9767ba179febf665b9895ff21fc0159a602 Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Tue, 31 Jul 2018 15:11:22 -0400
Subject: [PATCH 10/17] Update search input default border radius

---
 css/emoji-mart.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index c8a00f9..8db71f1 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -97,7 +97,7 @@
   display: block;
   width: 100%;
   padding: 5px 25px 6px 10px;
-  border-radius: 25px;
+  border-radius: 5px;
   border: 1px solid #d9d9d9;
   outline: 0;
 }

From a0075d70543631b706e3bdc55a8f2296a0ef4076 Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Tue, 31 Jul 2018 15:12:58 -0400
Subject: [PATCH 11/17] Update README

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a33fb54..b8c6bda 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 <div align="center">
   <br><b>Emoji Mart</b> is a Slack-like customizable<br>emoji picker component for React
   <br><a href="https://missive.github.io/emoji-mart">Demo</a> • <a href="https://github.com/missive/emoji-mart/releases">Changelog</a>
-  <br><br><img width="338" alt="picker" src="https://user-images.githubusercontent.com/436043/32532554-08be471c-c400-11e7-906a-c745dc3ec630.png">
+  <br><br><img width="338" alt="picker" src="https://user-images.githubusercontent.com/436043/43481399-d9b60acc-94d3-11e8-9b3b-e5f2db8f0bd1.png">
   <br><br><a title="Team email, team chat, team tasks, one app" href="https://missiveapp.com"><img width="30" alt="Missive | Team email, team chat, team tasks, one app" src="https://user-images.githubusercontent.com/436043/32532559-0d15ddfc-c400-11e7-8a24-64d0157d0cb0.png"></a>
   <br>Brought to you by the <a title="Team email, team chat, team tasks, one app" href="https://missiveapp.com">Missive</a> team
 </div>

From 58ceb30d3dd71e610409be1ad03c2042410dc8b7 Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Tue, 31 Jul 2018 15:29:11 -0400
Subject: [PATCH 12/17] Use ES6 export everywhere in /src

---
 scripts/build.js  | 2 +-
 src/utils/data.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/build.js b/scripts/build.js
index 580b7ff..b8dc5ef 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -3,7 +3,7 @@ var fs = require('fs'),
   inflection = require('inflection'),
   mkdirp = require('mkdirp')
 
-var { compress } = require('../src/utils/data')
+var { compress } = require('../dist/utils/data')
 
 var categories = [
   ['Smileys & People', 'people'],
diff --git a/src/utils/data.js b/src/utils/data.js
index 00e7623..4ad17ca 100644
--- a/src/utils/data.js
+++ b/src/utils/data.js
@@ -103,4 +103,4 @@ const uncompress = (data) => {
   }
 }
 
-module.exports = { buildSearch, compress, uncompress }
+export { buildSearch, compress, uncompress }

From c236437f91f7b95153628754bd158d9e3dafc11a Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Tue, 31 Jul 2018 15:31:39 -0400
Subject: [PATCH 13/17] Ignore .DS_Store

---
 .DS_Store  | Bin 10244 -> 0 bytes
 .gitignore |   1 +
 2 files changed, 1 insertion(+)
 delete mode 100644 .DS_Store

diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index ecafee06560319c4ba490223db770d6e71ab8c45..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 10244
zcmeHMTWl0n82<mZ*fT>*r`*acm#&mbmA1A;3Z;nK8?pjI*p`-SncW%Mk?G93GuswQ
zO*O&zU@%@1jc7E)7lR2;B*qsL@9}PIyhVM`7axs86QA%uXJ(t-ZFw*;O3a+ioc~<@
z|D6AP^UeHo&H?~-XZ2QqC;%|JxKt`ATOjd%e$7iILCXq~NcP~Ql9rRCnleu}YzPqu
z5eN|o5eN|o5x6-JpqR}QTkOj)4-p6v2oab=fWIH2ba5FA<cu%HtAjGJ1t3{Q%_31*
zeEgG)@&=NzK+gD*S}37!O42vQV2gpl-T{4c>W>BbGrsiA0maNTPB1eDI}{AI9vBts
zfH7Z&d5A!Wz<dPw-n|r3;DQ^s3ij`v)YEWXBw<ztI%wd5R;2gp0(vHm=N0N<O_5$X
zjVJV=35?>|@qCdspWWep7L9uCMtaE!HyxZte3(pIrt7t|e2pcgWs7bpXG~^trF=Xw
z>P#d&&C9yoTIMLP9niedWKiyR9BZzuB@da##IUlw$FV)lw2h1~Hg$tkjt!c&?o4z$
zSzC9-I0?UlF^NgTiaIsbwz;FdF}k_6ZMrc!)v;}BV|2@w_UUPf)zr7%9X~mC=IqqD
z>4%=D)lkCVB?nc0eJ;O9r8y)lcf7}6Vac<(6@HUjp(HO><M-{6hn1z{<oN!yXF9ff
z$jG=Phm|Uq78_4F_JNGS`v+5wl^wI)VWm2yS*fh0c}ACICCsyiJLDOY9xoknos8Eb
z6o*W*<!!@?l68%P1{s*+MlYGU3QCtNR;*or+oqN++wbX}tz1&2R4<j~BZP_VnWs!6
zGcaN5-soY?O&PXs+9QMGrfViGqu<uXjB5Nul4e)dtg2Ka>Y7|vu?bV^*ibfUKA1JV
zGqcK)s!F+5y;V}KvST`VvCq-@OuFb%Yt?$jj`H@Nj6u0BoZ8r+%Ka`aLeZEcS{j>V
zx&JiXOvNP^xZ|yDvN~XCNyAcfiHWB6t+F~e?jxz}2^u?h$m&qa85^S|y4Bc7&D<xo
zOYLFG2kZo&d#~nt`_qQar>|MHvaeQE5A*geT{m>bSY52aztaMSx>$=}lPEN*&`g1F
zHyoo!B@Jibakv0az(sfkuE14z6W)i9;WPLgzJTxGC-?<^gKO|R`~laIp@fUE0##g(
zb+`drumg8u47;!!_uv6Mhzab+<CsDNPvHoraT3qs6rRKLcmbcpr|@Zf0bj(I@MXM$
zuj5<zHok-J;-~l}e(yV2lB4TBzn;tS2P);$HFzLPPAo*%NZ+n||0BA7Tj6tb+42?Z
z>KdBbw(jVfyO%|GE}uk#J3cuCX>z0xx37?e#AY?JT3&l2HV+Wzj7i3cqm<98#E#l%
zB%*NYFj3u5Pt_7)H{(x+D&G+yO^qp~q8hnVZe>JJWs%=|m)tH9g_SbDw?pn^#8l-L
zzjvn`llViXfEZe;kI3|%`rGWg1ef6rcn>}z)_ny(!q4z4{E3L=SdBHf3RmMAT!$O+
zcHD%G*o5u44Yy+_?!Z3Wg}X6M{OiX79K<0!Lj2PO|4huFi&-2e9zKkZ5DOp0#{wQc
zLp;2Mmy1{z&+*Nd_*y>e#uFLaa_kXm<1DR&(-g!qFh+SZg%byCI7OugiUSMq@b_F^
z_$!CK5QiS<gZm)?eT88Nco59juAp%p3RwmW(_Fli1#5vY$Ae;_U79>g2`@)TUwFp7
zESyh-$9%h`^j64_zDGZkWF~KQCX6h!Lgb+{e+&r@((1aP7xs~CCcpK<Sve-i3NUfW
z*9^^=rg@7(GsmPrdkK9M7y|tijFOFyelywHFj6=ZE+gBCyqU_#Hci&4B0a*dV2)DK
z%gocFkBI`Ua{hTjsB+Kee|iuu1=<q5Z#idd!o(sgx;uql2wW!fyd_}66e18J5F!vF
z5F&81B2el(7Uk#veK-F9|7LYR^eaRlMBpDl0Lyw4z1=iWZXaJfCO>PB(shz9p19tO
zFNFzZ;y9k9IF6?ZKaLlt8Ppb>V+gw#wR8I!Us8$Ezy4=H(Q#F{{}1>7#k<%4`~Lqg
Dz79AO

diff --git a/.gitignore b/.gitignore
index c503f72..90717de 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+.DS_Store
 node_modules/
 dist/
 dist-es/

From 34ba02fc4b9e43734304a47c4868a2ff88cba1b2 Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Tue, 31 Jul 2018 15:32:30 -0400
Subject: [PATCH 14/17] Update gh-pages

---
 docs/bundle.js      | 905 +++++++++++++++++++++++++++++---------------
 docs/emoji-mart.css |  28 +-
 2 files changed, 622 insertions(+), 311 deletions(-)

diff --git a/docs/bundle.js b/docs/bundle.js
index c685738..dc6d00b 100644
--- a/docs/bundle.js
+++ b/docs/bundle.js
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 40);
+/******/ 	return __webpack_require__(__webpack_require__.s = 41);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -81,9 +81,9 @@ return /******/ (function(modules) { // webpackBootstrap
 /* WEBPACK VAR INJECTION */(function(process) {
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports = __webpack_require__(41);
-} else {
   module.exports = __webpack_require__(42);
+} else {
+  module.exports = __webpack_require__(43);
 }
 
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
@@ -344,11 +344,11 @@ if (process.env.NODE_ENV !== 'production') {
   // By explicitly using `prop-types` you are opting into new development behavior.
   // http://fb.me/prop-types-in-prod
   var throwOnDirectAccess = true;
-  module.exports = __webpack_require__(54)(isValidElement, throwOnDirectAccess);
+  module.exports = __webpack_require__(55)(isValidElement, throwOnDirectAccess);
 } else {
   // By explicitly using `prop-types` you are opting into new production behavior.
   // http://fb.me/prop-types-in-prod
-  module.exports = __webpack_require__(55)();
+  module.exports = __webpack_require__(56)();
 }
 
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
@@ -454,6 +454,27 @@ module.exports = emptyFunction;
 
 /***/ }),
 /* 9 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+var _Object = Object;
+
+/* harmony default export */ __webpack_exports__["a"] = (_Object.assign || function (target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i];
+
+    for (var key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        target[key] = source[key];
+      }
+    }
+  }
+
+  return target;
+});
+
+/***/ }),
+/* 10 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -512,27 +533,6 @@ function invariant(condition, format, a, b, c, d, e, f) {
 module.exports = invariant;
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
 
-/***/ }),
-/* 10 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-var _Object = Object;
-
-/* harmony default export */ __webpack_exports__["a"] = (_Object.assign || function (target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i];
-
-    for (var key in source) {
-      if (Object.prototype.hasOwnProperty.call(source, key)) {
-        target[key] = source[key];
-      }
-    }
-  }
-
-  return target;
-});
-
 /***/ }),
 /* 11 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -642,11 +642,10 @@ module.exports = shouldUseNative() ? Object.assign : function (target, source) {
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return deepMerge; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return unifiedToNative; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return measureScrollbar; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_keys__ = __webpack_require__(58);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_keys__ = __webpack_require__(59);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_keys___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_keys__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__data__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__data___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__data__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__polyfills_stringFromCodePoint__ = __webpack_require__(85);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__data__ = __webpack_require__(16);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__polyfills_stringFromCodePoint__ = __webpack_require__(86);
 
 
 
@@ -746,7 +745,7 @@ function getData(emoji, skin, set, data) {
     emojiData.custom = true;
 
     if (!emojiData.search) {
-      emojiData.search = Object(__WEBPACK_IMPORTED_MODULE_1__data__["buildSearch"])(emoji);
+      emojiData.search = Object(__WEBPACK_IMPORTED_MODULE_1__data__["a" /* buildSearch */])(emoji);
     }
   }
 
@@ -842,6 +841,44 @@ function measureScrollbar() {
 
 /***/ }),
 /* 13 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__anchors__ = __webpack_require__(87);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return __WEBPACK_IMPORTED_MODULE_0__anchors__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__category__ = __webpack_require__(88);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return __WEBPACK_IMPORTED_MODULE_1__category__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__preview__ = __webpack_require__(89);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return __WEBPACK_IMPORTED_MODULE_2__preview__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__not_found__ = __webpack_require__(90);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return __WEBPACK_IMPORTED_MODULE_3__not_found__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__search__ = __webpack_require__(91);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return __WEBPACK_IMPORTED_MODULE_4__search__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__skins__ = __webpack_require__(92);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return __WEBPACK_IMPORTED_MODULE_5__skins__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__emoji_emoji__ = __webpack_require__(93);
+/* unused harmony reexport Emoji */
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__emoji_nimble_emoji__ = __webpack_require__(39);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return __WEBPACK_IMPORTED_MODULE_7__emoji_nimble_emoji__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__picker_picker__ = __webpack_require__(94);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return __WEBPACK_IMPORTED_MODULE_8__picker_picker__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__picker_nimble_picker__ = __webpack_require__(40);
+/* unused harmony reexport NimblePicker */
+
+
+
+
+
+
+
+
+
+
+
+
+
+/***/ }),
+/* 14 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -865,7 +902,7 @@ module.exports = emptyObject;
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
 
 /***/ }),
-/* 14 */
+/* 15 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -934,9 +971,13 @@ module.exports = warning;
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
 
 /***/ }),
-/* 15 */
-/***/ (function(module, exports) {
+/* 16 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return buildSearch; });
+/* unused harmony export compress */
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return uncompress; });
 var mapping = {
   name: 'a',
   unified: 'b',
@@ -1042,41 +1083,6 @@ var uncompress = function uncompress(data) {
   }
 };
 
-module.exports = { buildSearch: buildSearch, compress: compress, uncompress: uncompress };
-
-/***/ }),
-/* 16 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__anchors__ = __webpack_require__(86);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return __WEBPACK_IMPORTED_MODULE_0__anchors__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__category__ = __webpack_require__(88);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return __WEBPACK_IMPORTED_MODULE_1__category__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__preview__ = __webpack_require__(89);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return __WEBPACK_IMPORTED_MODULE_2__preview__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__search__ = __webpack_require__(90);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return __WEBPACK_IMPORTED_MODULE_3__search__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__skins__ = __webpack_require__(91);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return __WEBPACK_IMPORTED_MODULE_4__skins__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__emoji_emoji__ = __webpack_require__(92);
-/* unused harmony reexport Emoji */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__emoji_nimble_emoji__ = __webpack_require__(38);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return __WEBPACK_IMPORTED_MODULE_6__emoji_nimble_emoji__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__picker_picker__ = __webpack_require__(93);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return __WEBPACK_IMPORTED_MODULE_7__picker_picker__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__picker_nimble_picker__ = __webpack_require__(39);
-/* unused harmony reexport NimblePicker */
-
-
-
-
-
-
-
-
-
-
 
 
 /***/ }),
@@ -1154,7 +1160,10 @@ var PickerPropTypes = {
     emoticons: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.arrayOf(__WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string),
     keywords: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.arrayOf(__WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string),
     imageUrl: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string.isRequired
-  }))
+  })),
+  notFound: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.func,
+  notFoundEmoji: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,
+  icons: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.object
 };
 
 var PickerDefaultProps = {
@@ -1179,7 +1188,10 @@ var PickerDefaultProps = {
   showSkinTones: true,
   emojiTooltip: EmojiDefaultProps.tooltip,
   autoFocus: false,
-  custom: []
+  custom: [],
+  notFound: function notFound() {},
+  notFoundEmoji: 'sleuth_or_spy',
+  icons: {}
 };
 
 
@@ -1199,8 +1211,8 @@ var PickerDefaultProps = {
 
 
 if (process.env.NODE_ENV !== 'production') {
-  var invariant = __webpack_require__(9);
-  var warning = __webpack_require__(14);
+  var invariant = __webpack_require__(10);
+  var warning = __webpack_require__(15);
   var ReactPropTypesSecret = __webpack_require__(19);
   var loggedTypeFailures = {};
 }
@@ -1324,8 +1336,7 @@ module.exports = {"compressed":true,"categories":[{"id":"people","name":"Smileys
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__polyfills_createClass__ = __webpack_require__(3);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2____ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__data__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__data___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3__data__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__data__ = __webpack_require__(16);
 
 
 
@@ -1336,7 +1347,7 @@ var NimbleEmojiIndex = function () {
     __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, NimbleEmojiIndex);
 
     if (data.compressed) {
-      Object(__WEBPACK_IMPORTED_MODULE_3__data__["uncompress"])(data);
+      Object(__WEBPACK_IMPORTED_MODULE_3__data__["b" /* uncompress */])(data);
     }
 
     this.data = data || {};
@@ -1906,7 +1917,7 @@ module.exports = shallowEqual;
  * 
  */
 
-var isTextNode = __webpack_require__(45);
+var isTextNode = __webpack_require__(46);
 
 /*eslint-disable no-bitwise */
 
@@ -2021,7 +2032,7 @@ module.exports = function (it) {
 /***/ (function(module, exports, __webpack_require__) {
 
 // to indexed object, toObject with fallback for non-array-like ES3 strings
-var IObject = __webpack_require__(65);
+var IObject = __webpack_require__(66);
 var defined = __webpack_require__(35);
 module.exports = function (it) {
   return IObject(defined(it));
@@ -2044,14 +2055,216 @@ module.exports = function (it) {
 /* 38 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "categories", function() { return categories; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "search", function() { return search; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
+
+
+var categories = {
+  activity: function activity() {
+    return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        width: "24",
+        height: "24"
+      },
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.628-5.372-12-12-12m9.949 11H17.05c.224-2.527 1.232-4.773 1.968-6.113A9.966 9.966 0 0 1 21.949 11M13 11V2.051a9.945 9.945 0 0 1 4.432 1.564c-.858 1.491-2.156 4.22-2.392 7.385H13zm-2 0H8.961c-.238-3.165-1.536-5.894-2.393-7.385A9.95 9.95 0 0 1 11 2.051V11zm0 2v8.949a9.937 9.937 0 0 1-4.432-1.564c.857-1.492 2.155-4.221 2.393-7.385H11zm4.04 0c.236 3.164 1.534 5.893 2.392 7.385A9.92 9.92 0 0 1 13 21.949V13h2.04zM4.982 4.887C5.718 6.227 6.726 8.473 6.951 11h-4.9a9.977 9.977 0 0 1 2.931-6.113M2.051 13h4.9c-.226 2.527-1.233 4.771-1.969 6.113A9.972 9.972 0 0 1 2.051 13m16.967 6.113c-.735-1.342-1.744-3.586-1.968-6.113h4.899a9.961 9.961 0 0 1-2.931 6.113" })
+    );
+  },
+
+  custom: function custom() {
+    return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        width: "24",
+        height: "24"
+      },
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+        "g",
+        { transform: "translate(2.000000, 1.000000)" },
+        __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("rect", { id: "Rectangle", x: "8", y: "0", width: "3", height: "21", rx: "1.5" }),
+        __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("rect", {
+          id: "Rectangle",
+          transform: "translate(9.843, 10.549) rotate(60) translate(-9.843, -10.549) ",
+          x: "8.343",
+          y: "0.049",
+          width: "3",
+          height: "21",
+          rx: "1.5"
+        }),
+        __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("rect", {
+          id: "Rectangle",
+          transform: "translate(9.843, 10.549) rotate(-60) translate(-9.843, -10.549) ",
+          x: "8.343",
+          y: "0.049",
+          width: "3",
+          height: "21",
+          rx: "1.5"
+        })
+      )
+    );
+  },
+
+  flags: function flags() {
+    return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        width: "24",
+        height: "24"
+      },
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M0 0l6.084 24H8L1.916 0zM21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.563 3h7.875l2 8H8.563l-2-8zm8.832 10l-2.856 1.904L12.063 13h3.332zM19 13l-1.5-6h1.938l2 8H16l3-2z" })
+    );
+  },
+
+  foods: function foods() {
+    return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        width: "24",
+        height: "24"
+      },
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M17 4.978c-1.838 0-2.876.396-3.68.934.513-1.172 1.768-2.934 4.68-2.934a1 1 0 0 0 0-2c-2.921 0-4.629 1.365-5.547 2.512-.064.078-.119.162-.18.244C11.73 1.838 10.798.023 9.207.023 8.579.022 7.85.306 7 .978 5.027 2.54 5.329 3.902 6.492 4.999 3.609 5.222 0 7.352 0 12.969c0 4.582 4.961 11.009 9 11.009 1.975 0 2.371-.486 3-1 .629.514 1.025 1 3 1 4.039 0 9-6.418 9-11 0-5.953-4.055-8-7-8M8.242 2.546c.641-.508.943-.523.965-.523.426.169.975 1.405 1.357 3.055-1.527-.629-2.741-1.352-2.98-1.846.059-.112.241-.356.658-.686M15 21.978c-1.08 0-1.21-.109-1.559-.402l-.176-.146c-.367-.302-.816-.452-1.266-.452s-.898.15-1.266.452l-.176.146c-.347.292-.477.402-1.557.402-2.813 0-7-5.389-7-9.009 0-5.823 4.488-5.991 5-5.991 1.939 0 2.484.471 3.387 1.251l.323.276a1.995 1.995 0 0 0 2.58 0l.323-.276c.902-.78 1.447-1.251 3.387-1.251.512 0 5 .168 5 6 0 3.617-4.187 9-7 9" })
+    );
+  },
+
+  nature: function nature() {
+    return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        width: "24",
+        height: "24"
+      },
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M15.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 15.5 8M8.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 8.5 8" }),
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M18.933 0h-.027c-.97 0-2.138.787-3.018 1.497-1.274-.374-2.612-.51-3.887-.51-1.285 0-2.616.133-3.874.517C7.245.79 6.069 0 5.093 0h-.027C3.352 0 .07 2.67.002 7.026c-.039 2.479.276 4.238 1.04 5.013.254.258.882.677 1.295.882.191 3.177.922 5.238 2.536 6.38.897.637 2.187.949 3.2 1.102C8.04 20.6 8 20.795 8 21c0 1.773 2.35 3 4 3 1.648 0 4-1.227 4-3 0-.201-.038-.393-.072-.586 2.573-.385 5.435-1.877 5.925-7.587.396-.22.887-.568 1.104-.788.763-.774 1.079-2.534 1.04-5.013C23.929 2.67 20.646 0 18.933 0M3.223 9.135c-.237.281-.837 1.155-.884 1.238-.15-.41-.368-1.349-.337-3.291.051-3.281 2.478-4.972 3.091-5.031.256.015.731.27 1.265.646-1.11 1.171-2.275 2.915-2.352 5.125-.133.546-.398.858-.783 1.313M12 22c-.901 0-1.954-.693-2-1 0-.654.475-1.236 1-1.602V20a1 1 0 1 0 2 0v-.602c.524.365 1 .947 1 1.602-.046.307-1.099 1-2 1m3-3.48v.02a4.752 4.752 0 0 0-1.262-1.02c1.092-.516 2.239-1.334 2.239-2.217 0-1.842-1.781-2.195-3.977-2.195-2.196 0-3.978.354-3.978 2.195 0 .883 1.148 1.701 2.238 2.217A4.8 4.8 0 0 0 9 18.539v-.025c-1-.076-2.182-.281-2.973-.842-1.301-.92-1.838-3.045-1.853-6.478l.023-.041c.496-.826 1.49-1.45 1.804-3.102 0-2.047 1.357-3.631 2.362-4.522C9.37 3.178 10.555 3 11.948 3c1.447 0 2.685.192 3.733.57 1 .9 2.316 2.465 2.316 4.48.313 1.651 1.307 2.275 1.803 3.102.035.058.068.117.102.178-.059 5.967-1.949 7.01-4.902 7.19m6.628-8.202c-.037-.065-.074-.13-.113-.195a7.587 7.587 0 0 0-.739-.987c-.385-.455-.648-.768-.782-1.313-.076-2.209-1.241-3.954-2.353-5.124.531-.376 1.004-.63 1.261-.647.636.071 3.044 1.764 3.096 5.031.027 1.81-.347 3.218-.37 3.235" })
+    );
+  },
+
+  objects: function objects() {
+    return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        width: "24",
+        height: "24"
+      },
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M12 0a9 9 0 0 0-5 16.482V21s2.035 3 5 3 5-3 5-3v-4.518A9 9 0 0 0 12 0zm0 2c3.86 0 7 3.141 7 7s-3.14 7-7 7-7-3.141-7-7 3.14-7 7-7zM9 17.477c.94.332 1.946.523 3 .523s2.06-.19 3-.523v.834c-.91.436-1.925.689-3 .689a6.924 6.924 0 0 1-3-.69v-.833zm.236 3.07A8.854 8.854 0 0 0 12 21c.965 0 1.888-.167 2.758-.451C14.155 21.173 13.153 22 12 22c-1.102 0-2.117-.789-2.764-1.453z" }),
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M14.745 12.449h-.004c-.852-.024-1.188-.858-1.577-1.824-.421-1.061-.703-1.561-1.182-1.566h-.009c-.481 0-.783.497-1.235 1.537-.436.982-.801 1.811-1.636 1.791l-.276-.043c-.565-.171-.853-.691-1.284-1.794-.125-.313-.202-.632-.27-.913-.051-.213-.127-.53-.195-.634C7.067 9.004 7.039 9 6.99 9A1 1 0 0 1 7 7h.01c1.662.017 2.015 1.373 2.198 2.134.486-.981 1.304-2.058 2.797-2.075 1.531.018 2.28 1.153 2.731 2.141l.002-.008C14.944 8.424 15.327 7 16.979 7h.032A1 1 0 1 1 17 9h-.011c-.149.076-.256.474-.319.709a6.484 6.484 0 0 1-.311.951c-.429.973-.79 1.789-1.614 1.789" })
+    );
+  },
+
+  people: function people() {
+    return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        width: "24",
+        height: "24"
+      },
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10" }),
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0" })
+    );
+  },
+
+  places: function places() {
+    return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        width: "24",
+        height: "24"
+      },
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M6.5 12C5.122 12 4 13.121 4 14.5S5.122 17 6.5 17 9 15.879 9 14.5 7.878 12 6.5 12m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5M17.5 12c-1.378 0-2.5 1.121-2.5 2.5s1.122 2.5 2.5 2.5 2.5-1.121 2.5-2.5-1.122-2.5-2.5-2.5m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5" }),
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M22.482 9.494l-1.039-.346L21.4 9h.6c.552 0 1-.439 1-.992 0-.006-.003-.008-.003-.008H23c0-1-.889-2-1.984-2h-.642l-.731-1.717C19.262 3.012 18.091 2 16.764 2H7.236C5.909 2 4.738 3.012 4.357 4.283L3.626 6h-.642C1.889 6 1 7 1 8h.003S1 8.002 1 8.008C1 8.561 1.448 9 2 9h.6l-.043.148-1.039.346a2.001 2.001 0 0 0-1.359 2.097l.751 7.508a1 1 0 0 0 .994.901H3v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h6v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h1.096a.999.999 0 0 0 .994-.901l.751-7.508a2.001 2.001 0 0 0-1.359-2.097M6.273 4.857C6.402 4.43 6.788 4 7.236 4h9.527c.448 0 .834.43.963.857L19.313 9H4.688l1.585-4.143zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.189-3H2.811l-.662-6.607L3 11h18l.852.393L21.189 18z" })
+    );
+  },
+
+  recent: function recent() {
+    return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        width: "24",
+        height: "24"
+      },
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M13 4h-2l-.001 7H9v2h2v2h2v-2h4v-2h-4z" }),
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10" })
+    );
+  },
+
+  symbols: function symbols() {
+    return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        width: "24",
+        height: "24"
+      },
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M0 0h11v2H0zM4 11h3V6h4V4H0v2h4zM15.5 17c1.381 0 2.5-1.116 2.5-2.493s-1.119-2.493-2.5-2.493S13 13.13 13 14.507 14.119 17 15.5 17m0-2.986c.276 0 .5.222.5.493 0 .272-.224.493-.5.493s-.5-.221-.5-.493.224-.493.5-.493M21.5 19.014c-1.381 0-2.5 1.116-2.5 2.493S20.119 24 21.5 24s2.5-1.116 2.5-2.493-1.119-2.493-2.5-2.493m0 2.986a.497.497 0 0 1-.5-.493c0-.271.224-.493.5-.493s.5.222.5.493a.497.497 0 0 1-.5.493M22 13l-9 9 1.513 1.5 8.99-9.009zM17 11c2.209 0 4-1.119 4-2.5V2s.985-.161 1.498.949C23.01 4.055 23 6 23 6s1-1.119 1-3.135C24-.02 21 0 21 0h-2v6.347A5.853 5.853 0 0 0 17 6c-2.209 0-4 1.119-4 2.5s1.791 2.5 4 2.5M10.297 20.482l-1.475-1.585a47.54 47.54 0 0 1-1.442 1.129c-.307-.288-.989-1.016-2.045-2.183.902-.836 1.479-1.466 1.729-1.892s.376-.871.376-1.336c0-.592-.273-1.178-.818-1.759-.546-.581-1.329-.871-2.349-.871-1.008 0-1.79.293-2.344.879-.556.587-.832 1.181-.832 1.784 0 .813.419 1.748 1.256 2.805-.847.614-1.444 1.208-1.794 1.784a3.465 3.465 0 0 0-.523 1.833c0 .857.308 1.56.924 2.107.616.549 1.423.823 2.42.823 1.173 0 2.444-.379 3.813-1.137L8.235 24h2.819l-2.09-2.383 1.333-1.135zm-6.736-6.389a1.02 1.02 0 0 1 .73-.286c.31 0 .559.085.747.254a.849.849 0 0 1 .283.659c0 .518-.419 1.112-1.257 1.784-.536-.651-.805-1.231-.805-1.742a.901.901 0 0 1 .302-.669M3.74 22c-.427 0-.778-.116-1.057-.349-.279-.232-.418-.487-.418-.766 0-.594.509-1.288 1.527-2.083.968 1.134 1.717 1.946 2.248 2.438-.921.507-1.686.76-2.3.76" })
+    );
+  }
+};
+
+var search = {
+  search: function search() {
+    return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "13",
+        height: "13",
+        viewBox: "0 0 20 20",
+        opacity: "0.5"
+      },
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z" })
+    );
+  },
+
+  delete: function _delete() {
+    return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "13",
+        height: "13",
+        viewBox: "0 0 20 20",
+        opacity: "0.5"
+      },
+      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" })
+    );
+  }
+};
+
+
+
+/***/ }),
+/* 39 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types__ = __webpack_require__(4);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_prop_types__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_data__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_data___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3__utils_data__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_data__ = __webpack_require__(16);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_shared_props__ = __webpack_require__(17);
 
 
@@ -2142,7 +2355,7 @@ var _convertStyleToCSS = function _convertStyleToCSS(style) {
 
 var NimbleEmoji = function NimbleEmoji(props) {
   if (props.data.compressed) {
-    Object(__WEBPACK_IMPORTED_MODULE_3__utils_data__["uncompress"])(props.data);
+    Object(__WEBPACK_IMPORTED_MODULE_3__utils_data__["b" /* uncompress */])(props.data);
   }
 
   for (var k in NimbleEmoji.defaultProps) {
@@ -2153,7 +2366,11 @@ var NimbleEmoji = function NimbleEmoji(props) {
 
   var data = _getData(props);
   if (!data) {
-    return null;
+    if (props.fallback) {
+      return props.fallback(null, props);
+    } else {
+      return null;
+    }
   }
 
   var unified = data.unified;
@@ -2166,7 +2383,11 @@ var NimbleEmoji = function NimbleEmoji(props) {
   var title = null;
 
   if (!unified && !custom) {
-    return null;
+    if (props.fallback) {
+      return props.fallback(data, props);
+    } else {
+      return null;
+    }
   }
 
   if (props.tooltip) {
@@ -2197,7 +2418,7 @@ var NimbleEmoji = function NimbleEmoji(props) {
 
     if (!setHasEmoji) {
       if (props.fallback) {
-        return props.fallback(data);
+        return props.fallback(data, props);
       } else {
         return null;
       }
@@ -2247,30 +2468,31 @@ NimbleEmoji.defaultProps = __WEBPACK_IMPORTED_MODULE_4__utils_shared_props__["a"
 /* harmony default export */ __webpack_exports__["a"] = (NimbleEmoji);
 
 /***/ }),
-/* 39 */
+/* 40 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(9);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__polyfills_objectGetPrototypeOf__ = __webpack_require__(5);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(2);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__polyfills_createClass__ = __webpack_require__(3);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__polyfills_possibleConstructorReturn__ = __webpack_require__(6);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__polyfills_inherits__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__vendor_raf_polyfill__ = __webpack_require__(94);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__vendor_raf_polyfill__ = __webpack_require__(95);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__vendor_raf_polyfill___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6__vendor_raf_polyfill__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_react__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_7_react__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8_prop_types__ = __webpack_require__(4);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_8_prop_types__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__utils_store__ = __webpack_require__(28);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__utils_frequently__ = __webpack_require__(29);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__utils__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__utils_data__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__utils_data___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_12__utils_data__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__utils_shared_props__ = __webpack_require__(17);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_14____ = __webpack_require__(16);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__svgs__ = __webpack_require__(38);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__utils_store__ = __webpack_require__(28);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__utils_frequently__ = __webpack_require__(29);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__utils__ = __webpack_require__(12);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__utils_data__ = __webpack_require__(16);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_14__utils_shared_props__ = __webpack_require__(17);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_15____ = __webpack_require__(13);
+
 
 
 
@@ -2326,13 +2548,14 @@ var NimblePicker = function (_React$PureComponent) {
     };
 
     if (props.data.compressed) {
-      Object(__WEBPACK_IMPORTED_MODULE_12__utils_data__["uncompress"])(props.data);
+      Object(__WEBPACK_IMPORTED_MODULE_13__utils_data__["b" /* uncompress */])(props.data);
     }
 
     _this.data = props.data;
-    _this.i18n = Object(__WEBPACK_IMPORTED_MODULE_11__utils__["a" /* deepMerge */])(I18N, props.i18n);
+    _this.i18n = Object(__WEBPACK_IMPORTED_MODULE_12__utils__["a" /* deepMerge */])(I18N, props.i18n);
+    _this.icons = Object(__WEBPACK_IMPORTED_MODULE_12__utils__["a" /* deepMerge */])(__WEBPACK_IMPORTED_MODULE_9__svgs__, props.icons);
     _this.state = {
-      skin: props.skin || __WEBPACK_IMPORTED_MODULE_9__utils_store__["a" /* default */].get('skin') || props.defaultSkin,
+      skin: props.skin || __WEBPACK_IMPORTED_MODULE_10__utils_store__["a" /* default */].get('skin') || props.defaultSkin,
       firstRender: true
     };
 
@@ -2432,7 +2655,7 @@ var NimblePicker = function (_React$PureComponent) {
     value: function componentWillReceiveProps(props) {
       if (props.skin) {
         this.setState({ skin: props.skin });
-      } else if (props.defaultSkin && !__WEBPACK_IMPORTED_MODULE_9__utils_store__["a" /* default */].get('skin')) {
+      } else if (props.defaultSkin && !__WEBPACK_IMPORTED_MODULE_10__utils_store__["a" /* default */].get('skin')) {
         this.setState({ skin: props.defaultSkin });
       }
     }
@@ -2522,7 +2745,7 @@ var NimblePicker = function (_React$PureComponent) {
       var _this3 = this;
 
       this.props.onSelect(emoji);
-      if (!this.hideRecent && !this.props.recent) __WEBPACK_IMPORTED_MODULE_10__utils_frequently__["a" /* default */].add(emoji);
+      if (!this.hideRecent && !this.props.recent) __WEBPACK_IMPORTED_MODULE_11__utils_frequently__["a" /* default */].add(emoji);
 
       var component = this.categoryRefs['category-1'];
       if (component) {
@@ -2670,7 +2893,7 @@ var NimblePicker = function (_React$PureComponent) {
 
 
       this.setState(newState);
-      __WEBPACK_IMPORTED_MODULE_9__utils_store__["a" /* default */].update(newState);
+      __WEBPACK_IMPORTED_MODULE_10__utils_store__["a" /* default */].update(newState);
 
       onSkinChange(skin);
     }
@@ -2767,8 +2990,10 @@ var NimblePicker = function (_React$PureComponent) {
       var exclude = _props.exclude;
       var recent = _props.recent;
       var autoFocus = _props.autoFocus;
+      var notFound = _props.notFound;
+      var notFoundEmoji = _props.notFoundEmoji;
       var skin = this.state.skin;
-      var width = perLine * (emojiSize + 12) + 12 + 2 + Object(__WEBPACK_IMPORTED_MODULE_11__utils__["e" /* measureScrollbar */])();
+      var width = perLine * (emojiSize + 12) + 12 + 2 + Object(__WEBPACK_IMPORTED_MODULE_12__utils__["e" /* measureScrollbar */])();
 
       return __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(
         'div',
@@ -2780,16 +3005,17 @@ var NimblePicker = function (_React$PureComponent) {
         __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(
           'div',
           { className: 'emoji-mart-bar' },
-          __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_14____["a" /* Anchors */], {
+          __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_15____["a" /* Anchors */], {
             ref: this.setAnchorsRef,
             data: this.data,
             i18n: this.i18n,
             color: color,
             categories: this.categories,
-            onAnchorClick: this.handleAnchorClick
+            onAnchorClick: this.handleAnchorClick,
+            icons: this.icons
           })
         ),
-        __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_14____["f" /* Search */], {
+        __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_15____["g" /* Search */], {
           ref: this.setSearchRef,
           onSearch: this.handleSearch,
           data: this.data,
@@ -2808,7 +3034,7 @@ var NimblePicker = function (_React$PureComponent) {
             onScroll: this.handleScroll
           },
           this.getCategories().map(function (category, i) {
-            return __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_14____["b" /* Category */], {
+            return __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_15____["b" /* Category */], {
               ref: _this4.setCategoryRef.bind(_this4, 'category-' + i),
               key: category.name,
               id: category.id,
@@ -2833,14 +3059,16 @@ var NimblePicker = function (_React$PureComponent) {
                 onOver: _this4.handleEmojiOver,
                 onLeave: _this4.handleEmojiLeave,
                 onClick: _this4.handleEmojiClick
-              }
+              },
+              notFound: notFound,
+              notFoundEmoji: notFoundEmoji
             });
           })
         ),
         showPreview && __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(
           'div',
           { className: 'emoji-mart-bar' },
-          __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_14____["e" /* Preview */], {
+          __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_15____["f" /* Preview */], {
             ref: this.setPreviewRef,
             data: this.data,
             title: title,
@@ -2869,15 +3097,15 @@ var NimblePicker = function (_React$PureComponent) {
 
 /* harmony default export */ __webpack_exports__["a"] = (NimblePicker);
 
-NimblePicker.defaultProps = Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({}, __WEBPACK_IMPORTED_MODULE_13__utils_shared_props__["c" /* PickerDefaultProps */]);
+NimblePicker.defaultProps = Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({}, __WEBPACK_IMPORTED_MODULE_14__utils_shared_props__["c" /* PickerDefaultProps */]);
 
 /***/ }),
-/* 40 */
+/* 41 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_polyfills_extends__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_polyfills_extends__ = __webpack_require__(9);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__src_polyfills_objectGetPrototypeOf__ = __webpack_require__(5);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(2);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__);
@@ -2886,9 +3114,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__src_polyfills_inherits__ = __webpack_require__(7);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_react__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_react__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_react_dom__ = __webpack_require__(43);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_react_dom__ = __webpack_require__(44);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_react_dom___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_7_react_dom__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__src__ = __webpack_require__(56);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__src__ = __webpack_require__(57);
 
 
 
@@ -3007,7 +3235,7 @@ var Example = function (_React$Component) {
 __WEBPACK_IMPORTED_MODULE_7_react_dom___default.a.render(__WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(Example, null), document.querySelector('div'));
 
 /***/ }),
-/* 41 */
+/* 42 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3020,7 +3248,7 @@ __WEBPACK_IMPORTED_MODULE_7_react_dom___default.a.render(__WEBPACK_IMPORTED_MODU
  This source code is licensed under the MIT license found in the
  LICENSE file in the root directory of this source tree.
 */
-var f=__webpack_require__(11),p=__webpack_require__(13);__webpack_require__(9);var r=__webpack_require__(8);
+var f=__webpack_require__(11),p=__webpack_require__(14);__webpack_require__(10);var r=__webpack_require__(8);
 function t(a){for(var b=arguments.length-1,d="Minified React error #"+a+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant\x3d"+a,e=0;e<b;e++)d+="\x26args[]\x3d"+encodeURIComponent(arguments[e+1]);b=Error(d+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");b.name="Invariant Violation";b.framesToPop=1;throw b;}
 var u={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}};function v(a,b,d){this.props=a;this.context=b;this.refs=p;this.updater=d||u}v.prototype.isReactComponent={};v.prototype.setState=function(a,b){"object"!==typeof a&&"function"!==typeof a&&null!=a?t("85"):void 0;this.updater.enqueueSetState(this,a,b,"setState")};v.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate")};
 function w(a,b,d){this.props=a;this.context=b;this.refs=p;this.updater=d||u}function x(){}x.prototype=v.prototype;var y=w.prototype=new x;y.constructor=w;f(y,v.prototype);y.isPureReactComponent=!0;function z(a,b,d){this.props=a;this.context=b;this.refs=p;this.updater=d||u}var A=z.prototype=new x;A.constructor=z;f(A,v.prototype);A.unstable_isAsyncReactComponent=!0;A.render=function(){return this.props.children};
@@ -3037,7 +3265,7 @@ module.exports={Children:{map:S.map,forEach:S.forEach,count:S.count,toArray:S.to
 
 
 /***/ }),
-/* 42 */
+/* 43 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3058,9 +3286,9 @@ if (process.env.NODE_ENV !== "production") {
 'use strict';
 
 var objectAssign$1 = __webpack_require__(11);
-var require$$0 = __webpack_require__(14);
-var emptyObject = __webpack_require__(13);
-var invariant = __webpack_require__(9);
+var require$$0 = __webpack_require__(15);
+var emptyObject = __webpack_require__(14);
+var invariant = __webpack_require__(10);
 var emptyFunction = __webpack_require__(8);
 var checkPropTypes = __webpack_require__(18);
 
@@ -4743,7 +4971,7 @@ module.exports = ReactEntry;
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
 
 /***/ }),
-/* 43 */
+/* 44 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4781,15 +5009,15 @@ if (process.env.NODE_ENV === 'production') {
   // DCE check should happen before ReactDOM bundle executes so that
   // DevTools can report bad minification during injection.
   checkDCE();
-  module.exports = __webpack_require__(44);
+  module.exports = __webpack_require__(45);
 } else {
-  module.exports = __webpack_require__(47);
+  module.exports = __webpack_require__(48);
 }
 
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
 
 /***/ }),
-/* 44 */
+/* 45 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4803,7 +5031,7 @@ if (process.env.NODE_ENV === 'production') {
  LICENSE file in the root directory of this source tree.
  Modernizr 3.0.0pre (Custom Build) | MIT
 */
-var aa=__webpack_require__(0);__webpack_require__(9);var l=__webpack_require__(20),n=__webpack_require__(11),ba=__webpack_require__(30),ca=__webpack_require__(8),da=__webpack_require__(13),ea=__webpack_require__(31),fa=__webpack_require__(32),ha=__webpack_require__(33),ia=__webpack_require__(34);
+var aa=__webpack_require__(0);__webpack_require__(10);var l=__webpack_require__(20),n=__webpack_require__(11),ba=__webpack_require__(30),ca=__webpack_require__(8),da=__webpack_require__(14),ea=__webpack_require__(31),fa=__webpack_require__(32),ha=__webpack_require__(33),ia=__webpack_require__(34);
 function w(a){for(var b=arguments.length-1,c="Minified React error #"+a+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant\x3d"+a,d=0;d<b;d++)c+="\x26args[]\x3d"+encodeURIComponent(arguments[d+1]);b=Error(c+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");b.name="Invariant Violation";b.framesToPop=1;throw b;}aa?void 0:w("227");
 function ja(a){switch(a){case "svg":return"http://www.w3.org/2000/svg";case "math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}}
 var ka={Namespaces:{html:"http://www.w3.org/1999/xhtml",mathml:"http://www.w3.org/1998/Math/MathML",svg:"http://www.w3.org/2000/svg"},getIntrinsicNamespace:ja,getChildNamespace:function(a,b){return null==a||"http://www.w3.org/1999/xhtml"===a?ja(b):"http://www.w3.org/2000/svg"===a&&"foreignObject"===b?"http://www.w3.org/1999/xhtml":a}},la=null,oa={};
@@ -5052,7 +5280,7 @@ unstable_deferredUpdates:Xj.deferredUpdates,flushSync:Xj.flushSync,__SECRET_INTE
 
 
 /***/ }),
-/* 45 */
+/* 46 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5067,7 +5295,7 @@ unstable_deferredUpdates:Xj.deferredUpdates,flushSync:Xj.flushSync,__SECRET_INTE
  * @typechecks
  */
 
-var isNode = __webpack_require__(46);
+var isNode = __webpack_require__(47);
 
 /**
  * @param {*} object The object to check.
@@ -5080,7 +5308,7 @@ function isTextNode(object) {
 module.exports = isTextNode;
 
 /***/ }),
-/* 46 */
+/* 47 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5108,7 +5336,7 @@ function isNode(object) {
 module.exports = isNode;
 
 /***/ }),
-/* 47 */
+/* 48 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5129,17 +5357,17 @@ if (process.env.NODE_ENV !== "production") {
 'use strict';
 
 var react = __webpack_require__(0);
-var invariant = __webpack_require__(9);
+var invariant = __webpack_require__(10);
 var ExecutionEnvironment = __webpack_require__(20);
 var _assign = __webpack_require__(11);
 var EventListener = __webpack_require__(30);
-var require$$0 = __webpack_require__(14);
-var hyphenateStyleName = __webpack_require__(48);
+var require$$0 = __webpack_require__(15);
+var hyphenateStyleName = __webpack_require__(49);
 var emptyFunction = __webpack_require__(8);
-var camelizeStyleName = __webpack_require__(50);
-var performanceNow = __webpack_require__(52);
+var camelizeStyleName = __webpack_require__(51);
+var performanceNow = __webpack_require__(53);
 var propTypes = __webpack_require__(4);
-var emptyObject = __webpack_require__(13);
+var emptyObject = __webpack_require__(14);
 var checkPropTypes = __webpack_require__(18);
 var shallowEqual = __webpack_require__(31);
 var containsNode = __webpack_require__(32);
@@ -22337,7 +22565,7 @@ module.exports = ReactDOMFiberEntry;
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
 
 /***/ }),
-/* 48 */
+/* 49 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -22352,7 +22580,7 @@ module.exports = ReactDOMFiberEntry;
 
 
 
-var hyphenate = __webpack_require__(49);
+var hyphenate = __webpack_require__(50);
 
 var msPattern = /^ms-/;
 
@@ -22379,7 +22607,7 @@ function hyphenateStyleName(string) {
 module.exports = hyphenateStyleName;
 
 /***/ }),
-/* 49 */
+/* 50 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -22415,7 +22643,7 @@ function hyphenate(string) {
 module.exports = hyphenate;
 
 /***/ }),
-/* 50 */
+/* 51 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -22430,7 +22658,7 @@ module.exports = hyphenate;
 
 
 
-var camelize = __webpack_require__(51);
+var camelize = __webpack_require__(52);
 
 var msPattern = /^-ms-/;
 
@@ -22458,7 +22686,7 @@ function camelizeStyleName(string) {
 module.exports = camelizeStyleName;
 
 /***/ }),
-/* 51 */
+/* 52 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -22493,7 +22721,7 @@ function camelize(string) {
 module.exports = camelize;
 
 /***/ }),
-/* 52 */
+/* 53 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -22508,7 +22736,7 @@ module.exports = camelize;
  * @typechecks
  */
 
-var performance = __webpack_require__(53);
+var performance = __webpack_require__(54);
 
 var performanceNow;
 
@@ -22530,7 +22758,7 @@ if (performance.now) {
 module.exports = performanceNow;
 
 /***/ }),
-/* 53 */
+/* 54 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -22556,7 +22784,7 @@ if (ExecutionEnvironment.canUseDOM) {
 module.exports = performance || {};
 
 /***/ }),
-/* 54 */
+/* 55 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -22570,8 +22798,8 @@ module.exports = performance || {};
 
 
 var emptyFunction = __webpack_require__(8);
-var invariant = __webpack_require__(9);
-var warning = __webpack_require__(14);
+var invariant = __webpack_require__(10);
+var warning = __webpack_require__(15);
 var assign = __webpack_require__(11);
 
 var ReactPropTypesSecret = __webpack_require__(19);
@@ -23106,7 +23334,7 @@ module.exports = function(isValidElement, throwOnDirectAccess) {
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
 
 /***/ }),
-/* 55 */
+/* 56 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -23120,7 +23348,7 @@ module.exports = function(isValidElement, throwOnDirectAccess) {
 
 
 var emptyFunction = __webpack_require__(8);
-var invariant = __webpack_require__(9);
+var invariant = __webpack_require__(10);
 var ReactPropTypesSecret = __webpack_require__(19);
 
 module.exports = function() {
@@ -23171,15 +23399,15 @@ module.exports = function() {
 
 
 /***/ }),
-/* 56 */
+/* 57 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_emoji_index_emoji_index__ = __webpack_require__(57);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_emoji_index_emoji_index__ = __webpack_require__(58);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_store__ = __webpack_require__(28);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_frequently__ = __webpack_require__(29);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__components__ = __webpack_require__(16);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return __WEBPACK_IMPORTED_MODULE_3__components__["d"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__components__ = __webpack_require__(13);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return __WEBPACK_IMPORTED_MODULE_3__components__["e"]; });
 /* unused harmony reexport NimblePicker */
 /* unused harmony reexport Emoji */
 /* unused harmony reexport NimbleEmoji */
@@ -23199,7 +23427,7 @@ module.exports = function() {
 
 
 /***/ }),
-/* 57 */
+/* 58 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -23220,29 +23448,29 @@ function search() {
 
 /* unused harmony default export */ var _unused_webpack_default_export = ({ search: search, emojis: emojis, emoticons: emoticons });
 
-/***/ }),
-/* 58 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = { "default": __webpack_require__(59), __esModule: true };
-
 /***/ }),
 /* 59 */
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(60);
-module.exports = __webpack_require__(24).Object.keys;
-
+module.exports = { "default": __webpack_require__(60), __esModule: true };
 
 /***/ }),
 /* 60 */
 /***/ (function(module, exports, __webpack_require__) {
 
-// 19.1.2.14 Object.keys(O)
-var toObject = __webpack_require__(61);
-var $keys = __webpack_require__(62);
+__webpack_require__(61);
+module.exports = __webpack_require__(24).Object.keys;
 
-__webpack_require__(74)('keys', function () {
+
+/***/ }),
+/* 61 */
+/***/ (function(module, exports, __webpack_require__) {
+
+// 19.1.2.14 Object.keys(O)
+var toObject = __webpack_require__(62);
+var $keys = __webpack_require__(63);
+
+__webpack_require__(75)('keys', function () {
   return function keys(it) {
     return $keys(toObject(it));
   };
@@ -23250,7 +23478,7 @@ __webpack_require__(74)('keys', function () {
 
 
 /***/ }),
-/* 61 */
+/* 62 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // 7.1.13 ToObject(argument)
@@ -23261,12 +23489,12 @@ module.exports = function (it) {
 
 
 /***/ }),
-/* 62 */
+/* 63 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // 19.1.2.14 / 15.2.3.14 Object.keys(O)
-var $keys = __webpack_require__(63);
-var enumBugKeys = __webpack_require__(73);
+var $keys = __webpack_require__(64);
+var enumBugKeys = __webpack_require__(74);
 
 module.exports = Object.keys || function keys(O) {
   return $keys(O, enumBugKeys);
@@ -23274,13 +23502,13 @@ module.exports = Object.keys || function keys(O) {
 
 
 /***/ }),
-/* 63 */
+/* 64 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var has = __webpack_require__(64);
+var has = __webpack_require__(65);
 var toIObject = __webpack_require__(36);
-var arrayIndexOf = __webpack_require__(67)(false);
-var IE_PROTO = __webpack_require__(70)('IE_PROTO');
+var arrayIndexOf = __webpack_require__(68)(false);
+var IE_PROTO = __webpack_require__(71)('IE_PROTO');
 
 module.exports = function (object, names) {
   var O = toIObject(object);
@@ -23297,7 +23525,7 @@ module.exports = function (object, names) {
 
 
 /***/ }),
-/* 64 */
+/* 65 */
 /***/ (function(module, exports) {
 
 var hasOwnProperty = {}.hasOwnProperty;
@@ -23307,11 +23535,11 @@ module.exports = function (it, key) {
 
 
 /***/ }),
-/* 65 */
+/* 66 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // fallback for non-array-like ES3 and non-enumerable old V8 strings
-var cof = __webpack_require__(66);
+var cof = __webpack_require__(67);
 // eslint-disable-next-line no-prototype-builtins
 module.exports = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
   return cof(it) == 'String' ? it.split('') : Object(it);
@@ -23319,7 +23547,7 @@ module.exports = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
 
 
 /***/ }),
-/* 66 */
+/* 67 */
 /***/ (function(module, exports) {
 
 var toString = {}.toString;
@@ -23330,14 +23558,14 @@ module.exports = function (it) {
 
 
 /***/ }),
-/* 67 */
+/* 68 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // false -> Array#indexOf
 // true  -> Array#includes
 var toIObject = __webpack_require__(36);
-var toLength = __webpack_require__(68);
-var toAbsoluteIndex = __webpack_require__(69);
+var toLength = __webpack_require__(69);
+var toAbsoluteIndex = __webpack_require__(70);
 module.exports = function (IS_INCLUDES) {
   return function ($this, el, fromIndex) {
     var O = toIObject($this);
@@ -23359,7 +23587,7 @@ module.exports = function (IS_INCLUDES) {
 
 
 /***/ }),
-/* 68 */
+/* 69 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // 7.1.15 ToLength
@@ -23371,7 +23599,7 @@ module.exports = function (it) {
 
 
 /***/ }),
-/* 69 */
+/* 70 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var toInteger = __webpack_require__(37);
@@ -23384,18 +23612,18 @@ module.exports = function (index, length) {
 
 
 /***/ }),
-/* 70 */
+/* 71 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var shared = __webpack_require__(71)('keys');
-var uid = __webpack_require__(72);
+var shared = __webpack_require__(72)('keys');
+var uid = __webpack_require__(73);
 module.exports = function (key) {
   return shared[key] || (shared[key] = uid(key));
 };
 
 
 /***/ }),
-/* 71 */
+/* 72 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var global = __webpack_require__(23);
@@ -23407,7 +23635,7 @@ module.exports = function (key) {
 
 
 /***/ }),
-/* 72 */
+/* 73 */
 /***/ (function(module, exports) {
 
 var id = 0;
@@ -23418,7 +23646,7 @@ module.exports = function (key) {
 
 
 /***/ }),
-/* 73 */
+/* 74 */
 /***/ (function(module, exports) {
 
 // IE 8- don't enum bug keys
@@ -23428,11 +23656,11 @@ module.exports = (
 
 
 /***/ }),
-/* 74 */
+/* 75 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // most Object methods by ES6 should accept primitives
-var $export = __webpack_require__(75);
+var $export = __webpack_require__(76);
 var core = __webpack_require__(24);
 var fails = __webpack_require__(27);
 module.exports = function (KEY, exec) {
@@ -23444,13 +23672,13 @@ module.exports = function (KEY, exec) {
 
 
 /***/ }),
-/* 75 */
+/* 76 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var global = __webpack_require__(23);
 var core = __webpack_require__(24);
-var ctx = __webpack_require__(76);
-var hide = __webpack_require__(78);
+var ctx = __webpack_require__(77);
+var hide = __webpack_require__(79);
 var PROTOTYPE = 'prototype';
 
 var $export = function (type, name, source) {
@@ -23511,11 +23739,11 @@ module.exports = $export;
 
 
 /***/ }),
-/* 76 */
+/* 77 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // optional / simple context binding
-var aFunction = __webpack_require__(77);
+var aFunction = __webpack_require__(78);
 module.exports = function (fn, that, length) {
   aFunction(fn);
   if (that === undefined) return fn;
@@ -23537,7 +23765,7 @@ module.exports = function (fn, that, length) {
 
 
 /***/ }),
-/* 77 */
+/* 78 */
 /***/ (function(module, exports) {
 
 module.exports = function (it) {
@@ -23547,11 +23775,11 @@ module.exports = function (it) {
 
 
 /***/ }),
-/* 78 */
+/* 79 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var dP = __webpack_require__(79);
-var createDesc = __webpack_require__(84);
+var dP = __webpack_require__(80);
+var createDesc = __webpack_require__(85);
 module.exports = __webpack_require__(26) ? function (object, key, value) {
   return dP.f(object, key, createDesc(1, value));
 } : function (object, key, value) {
@@ -23561,12 +23789,12 @@ module.exports = __webpack_require__(26) ? function (object, key, value) {
 
 
 /***/ }),
-/* 79 */
+/* 80 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var anObject = __webpack_require__(80);
-var IE8_DOM_DEFINE = __webpack_require__(81);
-var toPrimitive = __webpack_require__(83);
+var anObject = __webpack_require__(81);
+var IE8_DOM_DEFINE = __webpack_require__(82);
+var toPrimitive = __webpack_require__(84);
 var dP = Object.defineProperty;
 
 exports.f = __webpack_require__(26) ? Object.defineProperty : function defineProperty(O, P, Attributes) {
@@ -23583,7 +23811,7 @@ exports.f = __webpack_require__(26) ? Object.defineProperty : function definePro
 
 
 /***/ }),
-/* 80 */
+/* 81 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var isObject = __webpack_require__(25);
@@ -23594,16 +23822,16 @@ module.exports = function (it) {
 
 
 /***/ }),
-/* 81 */
+/* 82 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports = !__webpack_require__(26) && !__webpack_require__(27)(function () {
-  return Object.defineProperty(__webpack_require__(82)('div'), 'a', { get: function () { return 7; } }).a != 7;
+  return Object.defineProperty(__webpack_require__(83)('div'), 'a', { get: function () { return 7; } }).a != 7;
 });
 
 
 /***/ }),
-/* 82 */
+/* 83 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var isObject = __webpack_require__(25);
@@ -23616,7 +23844,7 @@ module.exports = function (it) {
 
 
 /***/ }),
-/* 83 */
+/* 84 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // 7.1.1 ToPrimitive(input [, PreferredType])
@@ -23634,7 +23862,7 @@ module.exports = function (it, S) {
 
 
 /***/ }),
-/* 84 */
+/* 85 */
 /***/ (function(module, exports) {
 
 module.exports = function (bitmap, value) {
@@ -23648,7 +23876,7 @@ module.exports = function (bitmap, value) {
 
 
 /***/ }),
-/* 85 */
+/* 86 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -23694,7 +23922,7 @@ var _String = String;
 });
 
 /***/ }),
-/* 86 */
+/* 87 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -23708,9 +23936,6 @@ var _String = String;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5_react__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_prop_types__ = __webpack_require__(4);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_prop_types__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__svgs__ = __webpack_require__(87);
-
-
 
 
 
@@ -23740,20 +23965,6 @@ var Anchors = function (_React$PureComponent) {
   }
 
   Object(__WEBPACK_IMPORTED_MODULE_2__polyfills_createClass__["a" /* default */])(Anchors, [{
-    key: 'getSVG',
-    value: function getSVG(id) {
-      this.SVGs || (this.SVGs = {});
-
-      if (this.SVGs[id]) {
-        return this.SVGs[id];
-      } else {
-        var svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\n       ' + __WEBPACK_IMPORTED_MODULE_7__svgs__["a" /* default */][id] + '\n      </svg>';
-
-        this.SVGs[id] = svg;
-        return svg;
-      }
-    }
-  }, {
     key: 'handleClick',
     value: function handleClick(e) {
       var index = e.currentTarget.getAttribute('data-index');
@@ -23771,9 +23982,9 @@ var Anchors = function (_React$PureComponent) {
 
       var _props2 = this.props;
       var categories = _props2.categories;
-      var onAnchorClick = _props2.onAnchorClick;
       var color = _props2.color;
       var i18n = _props2.i18n;
+      var icons = _props2.icons;
       var selected = this.state.selected;
 
 
@@ -23800,7 +24011,11 @@ var Anchors = function (_React$PureComponent) {
               className: 'emoji-mart-anchor ' + (isSelected ? 'emoji-mart-anchor-selected' : ''),
               style: { color: isSelected ? color : null }
             },
-            __WEBPACK_IMPORTED_MODULE_5_react___default.a.createElement('div', { dangerouslySetInnerHTML: { __html: _this2.getSVG(id) } }),
+            __WEBPACK_IMPORTED_MODULE_5_react___default.a.createElement(
+              'div',
+              { className: 'emoji-mart-anchor-icon' },
+              icons.categories[id]()
+            ),
             __WEBPACK_IMPORTED_MODULE_5_react___default.a.createElement('span', {
               className: 'emoji-mart-anchor-bar',
               style: { backgroundColor: color }
@@ -23819,44 +24034,16 @@ var Anchors = function (_React$PureComponent) {
 
 Anchors.defaultProps = {
   categories: [],
-  onAnchorClick: function onAnchorClick() {}
+  onAnchorClick: function onAnchorClick() {},
+  icons: {}
 };
 
-/***/ }),
-/* 87 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-var SVGs = {
-  activity: "<path d=\"M12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.628-5.372-12-12-12m9.949 11H17.05c.224-2.527 1.232-4.773 1.968-6.113A9.966 9.966 0 0 1 21.949 11M13 11V2.051a9.945 9.945 0 0 1 4.432 1.564c-.858 1.491-2.156 4.22-2.392 7.385H13zm-2 0H8.961c-.238-3.165-1.536-5.894-2.393-7.385A9.95 9.95 0 0 1 11 2.051V11zm0 2v8.949a9.937 9.937 0 0 1-4.432-1.564c.857-1.492 2.155-4.221 2.393-7.385H11zm4.04 0c.236 3.164 1.534 5.893 2.392 7.385A9.92 9.92 0 0 1 13 21.949V13h2.04zM4.982 4.887C5.718 6.227 6.726 8.473 6.951 11h-4.9a9.977 9.977 0 0 1 2.931-6.113M2.051 13h4.9c-.226 2.527-1.233 4.771-1.969 6.113A9.972 9.972 0 0 1 2.051 13m16.967 6.113c-.735-1.342-1.744-3.586-1.968-6.113h4.899a9.961 9.961 0 0 1-2.931 6.113\"/>",
-
-  custom: "<g transform=\"translate(2.000000, 1.000000)\"><rect id=\"Rectangle\" x=\"8\" y=\"0\" width=\"3\" height=\"21\" rx=\"1.5\"></rect><rect id=\"Rectangle\" transform=\"translate(9.843, 10.549) rotate(60) translate(-9.843, -10.549) \" x=\"8.343\" y=\"0.049\" width=\"3\" height=\"21\" rx=\"1.5\"></rect><rect id=\"Rectangle\" transform=\"translate(9.843, 10.549) rotate(-60) translate(-9.843, -10.549) \" x=\"8.343\" y=\"0.049\" width=\"3\" height=\"21\" rx=\"1.5\"></rect></g>",
-
-  flags: "<path d=\"M0 0l6.084 24H8L1.916 0zM21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.563 3h7.875l2 8H8.563l-2-8zm8.832 10l-2.856 1.904L12.063 13h3.332zM19 13l-1.5-6h1.938l2 8H16l3-2z\"/>",
-
-  foods: "<path d=\"M17 4.978c-1.838 0-2.876.396-3.68.934.513-1.172 1.768-2.934 4.68-2.934a1 1 0 0 0 0-2c-2.921 0-4.629 1.365-5.547 2.512-.064.078-.119.162-.18.244C11.73 1.838 10.798.023 9.207.023 8.579.022 7.85.306 7 .978 5.027 2.54 5.329 3.902 6.492 4.999 3.609 5.222 0 7.352 0 12.969c0 4.582 4.961 11.009 9 11.009 1.975 0 2.371-.486 3-1 .629.514 1.025 1 3 1 4.039 0 9-6.418 9-11 0-5.953-4.055-8-7-8M8.242 2.546c.641-.508.943-.523.965-.523.426.169.975 1.405 1.357 3.055-1.527-.629-2.741-1.352-2.98-1.846.059-.112.241-.356.658-.686M15 21.978c-1.08 0-1.21-.109-1.559-.402l-.176-.146c-.367-.302-.816-.452-1.266-.452s-.898.15-1.266.452l-.176.146c-.347.292-.477.402-1.557.402-2.813 0-7-5.389-7-9.009 0-5.823 4.488-5.991 5-5.991 1.939 0 2.484.471 3.387 1.251l.323.276a1.995 1.995 0 0 0 2.58 0l.323-.276c.902-.78 1.447-1.251 3.387-1.251.512 0 5 .168 5 6 0 3.617-4.187 9-7 9\"/>",
-
-  nature: "<path d=\"M15.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 15.5 8M8.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 8.5 8\"/><path d=\"M18.933 0h-.027c-.97 0-2.138.787-3.018 1.497-1.274-.374-2.612-.51-3.887-.51-1.285 0-2.616.133-3.874.517C7.245.79 6.069 0 5.093 0h-.027C3.352 0 .07 2.67.002 7.026c-.039 2.479.276 4.238 1.04 5.013.254.258.882.677 1.295.882.191 3.177.922 5.238 2.536 6.38.897.637 2.187.949 3.2 1.102C8.04 20.6 8 20.795 8 21c0 1.773 2.35 3 4 3 1.648 0 4-1.227 4-3 0-.201-.038-.393-.072-.586 2.573-.385 5.435-1.877 5.925-7.587.396-.22.887-.568 1.104-.788.763-.774 1.079-2.534 1.04-5.013C23.929 2.67 20.646 0 18.933 0M3.223 9.135c-.237.281-.837 1.155-.884 1.238-.15-.41-.368-1.349-.337-3.291.051-3.281 2.478-4.972 3.091-5.031.256.015.731.27 1.265.646-1.11 1.171-2.275 2.915-2.352 5.125-.133.546-.398.858-.783 1.313M12 22c-.901 0-1.954-.693-2-1 0-.654.475-1.236 1-1.602V20a1 1 0 1 0 2 0v-.602c.524.365 1 .947 1 1.602-.046.307-1.099 1-2 1m3-3.48v.02a4.752 4.752 0 0 0-1.262-1.02c1.092-.516 2.239-1.334 2.239-2.217 0-1.842-1.781-2.195-3.977-2.195-2.196 0-3.978.354-3.978 2.195 0 .883 1.148 1.701 2.238 2.217A4.8 4.8 0 0 0 9 18.539v-.025c-1-.076-2.182-.281-2.973-.842-1.301-.92-1.838-3.045-1.853-6.478l.023-.041c.496-.826 1.49-1.45 1.804-3.102 0-2.047 1.357-3.631 2.362-4.522C9.37 3.178 10.555 3 11.948 3c1.447 0 2.685.192 3.733.57 1 .9 2.316 2.465 2.316 4.48.313 1.651 1.307 2.275 1.803 3.102.035.058.068.117.102.178-.059 5.967-1.949 7.01-4.902 7.19m6.628-8.202c-.037-.065-.074-.13-.113-.195a7.587 7.587 0 0 0-.739-.987c-.385-.455-.648-.768-.782-1.313-.076-2.209-1.241-3.954-2.353-5.124.531-.376 1.004-.63 1.261-.647.636.071 3.044 1.764 3.096 5.031.027 1.81-.347 3.218-.37 3.235\"/>",
-
-  objects: "<path d=\"M12 0a9 9 0 0 0-5 16.482V21s2.035 3 5 3 5-3 5-3v-4.518A9 9 0 0 0 12 0zm0 2c3.86 0 7 3.141 7 7s-3.14 7-7 7-7-3.141-7-7 3.14-7 7-7zM9 17.477c.94.332 1.946.523 3 .523s2.06-.19 3-.523v.834c-.91.436-1.925.689-3 .689a6.924 6.924 0 0 1-3-.69v-.833zm.236 3.07A8.854 8.854 0 0 0 12 21c.965 0 1.888-.167 2.758-.451C14.155 21.173 13.153 22 12 22c-1.102 0-2.117-.789-2.764-1.453z\"/><path d=\"M14.745 12.449h-.004c-.852-.024-1.188-.858-1.577-1.824-.421-1.061-.703-1.561-1.182-1.566h-.009c-.481 0-.783.497-1.235 1.537-.436.982-.801 1.811-1.636 1.791l-.276-.043c-.565-.171-.853-.691-1.284-1.794-.125-.313-.202-.632-.27-.913-.051-.213-.127-.53-.195-.634C7.067 9.004 7.039 9 6.99 9A1 1 0 0 1 7 7h.01c1.662.017 2.015 1.373 2.198 2.134.486-.981 1.304-2.058 2.797-2.075 1.531.018 2.28 1.153 2.731 2.141l.002-.008C14.944 8.424 15.327 7 16.979 7h.032A1 1 0 1 1 17 9h-.011c-.149.076-.256.474-.319.709a6.484 6.484 0 0 1-.311.951c-.429.973-.79 1.789-1.614 1.789\"/>",
-
-  people: "<path d=\"M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10\"/><path d=\"M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0\"/>",
-
-  places: "<path d=\"M6.5 12C5.122 12 4 13.121 4 14.5S5.122 17 6.5 17 9 15.879 9 14.5 7.878 12 6.5 12m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5M17.5 12c-1.378 0-2.5 1.121-2.5 2.5s1.122 2.5 2.5 2.5 2.5-1.121 2.5-2.5-1.122-2.5-2.5-2.5m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5\"/><path d=\"M22.482 9.494l-1.039-.346L21.4 9h.6c.552 0 1-.439 1-.992 0-.006-.003-.008-.003-.008H23c0-1-.889-2-1.984-2h-.642l-.731-1.717C19.262 3.012 18.091 2 16.764 2H7.236C5.909 2 4.738 3.012 4.357 4.283L3.626 6h-.642C1.889 6 1 7 1 8h.003S1 8.002 1 8.008C1 8.561 1.448 9 2 9h.6l-.043.148-1.039.346a2.001 2.001 0 0 0-1.359 2.097l.751 7.508a1 1 0 0 0 .994.901H3v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h6v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h1.096a.999.999 0 0 0 .994-.901l.751-7.508a2.001 2.001 0 0 0-1.359-2.097M6.273 4.857C6.402 4.43 6.788 4 7.236 4h9.527c.448 0 .834.43.963.857L19.313 9H4.688l1.585-4.143zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.189-3H2.811l-.662-6.607L3 11h18l.852.393L21.189 18z\"/>",
-
-  recent: "<path d=\"M13 4h-2l-.001 7H9v2h2v2h2v-2h4v-2h-4z\"/><path d=\"M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10\"/>",
-
-  symbols: "<path d=\"M0 0h11v2H0zM4 11h3V6h4V4H0v2h4zM15.5 17c1.381 0 2.5-1.116 2.5-2.493s-1.119-2.493-2.5-2.493S13 13.13 13 14.507 14.119 17 15.5 17m0-2.986c.276 0 .5.222.5.493 0 .272-.224.493-.5.493s-.5-.221-.5-.493.224-.493.5-.493M21.5 19.014c-1.381 0-2.5 1.116-2.5 2.493S20.119 24 21.5 24s2.5-1.116 2.5-2.493-1.119-2.493-2.5-2.493m0 2.986a.497.497 0 0 1-.5-.493c0-.271.224-.493.5-.493s.5.222.5.493a.497.497 0 0 1-.5.493M22 13l-9 9 1.513 1.5 8.99-9.009zM17 11c2.209 0 4-1.119 4-2.5V2s.985-.161 1.498.949C23.01 4.055 23 6 23 6s1-1.119 1-3.135C24-.02 21 0 21 0h-2v6.347A5.853 5.853 0 0 0 17 6c-2.209 0-4 1.119-4 2.5s1.791 2.5 4 2.5M10.297 20.482l-1.475-1.585a47.54 47.54 0 0 1-1.442 1.129c-.307-.288-.989-1.016-2.045-2.183.902-.836 1.479-1.466 1.729-1.892s.376-.871.376-1.336c0-.592-.273-1.178-.818-1.759-.546-.581-1.329-.871-2.349-.871-1.008 0-1.79.293-2.344.879-.556.587-.832 1.181-.832 1.784 0 .813.419 1.748 1.256 2.805-.847.614-1.444 1.208-1.794 1.784a3.465 3.465 0 0 0-.523 1.833c0 .857.308 1.56.924 2.107.616.549 1.423.823 2.42.823 1.173 0 2.444-.379 3.813-1.137L8.235 24h2.819l-2.09-2.383 1.333-1.135zm-6.736-6.389a1.02 1.02 0 0 1 .73-.286c.31 0 .559.085.747.254a.849.849 0 0 1 .283.659c0 .518-.419 1.112-1.257 1.784-.536-.651-.805-1.231-.805-1.742a.901.901 0 0 1 .302-.669M3.74 22c-.427 0-.778-.116-1.057-.349-.279-.232-.418-.487-.418-.766 0-.594.509-1.288 1.527-2.083.968 1.134 1.717 1.946 2.248 2.438-.921.507-1.686.76-2.3.76\"/>"
-};
-
-/* harmony default export */ __webpack_exports__["a"] = (SVGs);
-
 /***/ }),
 /* 88 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(9);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__polyfills_objectGetPrototypeOf__ = __webpack_require__(5);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(2);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__);
@@ -23869,7 +24056,7 @@ var SVGs = {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_7_prop_types__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__utils_frequently__ = __webpack_require__(29);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__utils__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10____ = __webpack_require__(16);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10____ = __webpack_require__(13);
 
 
 
@@ -24060,6 +24247,8 @@ var Category = function (_React$Component) {
       var hasStickyPosition = _props3.hasStickyPosition;
       var emojiProps = _props3.emojiProps;
       var i18n = _props3.i18n;
+      var notFound = _props3.notFound;
+      var notFoundEmoji = _props3.notFoundEmoji;
       var emojis = this.getEmojis();
       var labelStyles = {};
       var labelSpanStyles = {};
@@ -24085,7 +24274,7 @@ var Category = function (_React$Component) {
         'div',
         {
           ref: this.setContainerRef,
-          className: 'emoji-mart-category ' + (emojis && !emojis.length ? 'emoji-mart-no-results' : ''),
+          className: 'emoji-mart-category',
           style: containerStyles
         },
         __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(
@@ -24104,28 +24293,13 @@ var Category = function (_React$Component) {
         emojis && emojis.map(function (emoji) {
           return Object(__WEBPACK_IMPORTED_MODULE_10____["c" /* NimbleEmoji */])(Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({ emoji: emoji, data: _this3.data }, emojiProps));
         }),
-        emojis && !emojis.length && __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(
-          'div',
-          null,
-          __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(
-            'div',
-            null,
-            Object(__WEBPACK_IMPORTED_MODULE_10____["c" /* NimbleEmoji */])(Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({
-              data: this.data
-            }, emojiProps, {
-              size: 38,
-              emoji: 'sleuth_or_spy',
-              onOver: null,
-              onLeave: null,
-              onClick: null
-            }))
-          ),
-          __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(
-            'div',
-            { className: 'emoji-mart-no-results-label' },
-            i18n.notfound
-          )
-        )
+        emojis && !emojis.length && __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_10____["d" /* NotFound */], {
+          i18n: i18n,
+          notFound: notFound,
+          notFoundEmoji: notFoundEmoji,
+          data: this.data,
+          emojiProps: emojiProps
+        })
       );
     }
   }]);
@@ -24146,7 +24320,7 @@ Category.defaultProps = {
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(9);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__polyfills_objectGetPrototypeOf__ = __webpack_require__(5);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(2);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__);
@@ -24158,7 +24332,7 @@ Category.defaultProps = {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_prop_types__ = __webpack_require__(4);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_7_prop_types__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__utils__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9____ = __webpack_require__(16);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9____ = __webpack_require__(13);
 
 
 
@@ -24279,7 +24453,7 @@ var Preview = function (_React$PureComponent) {
           showSkinTones && __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(
             'div',
             { className: 'emoji-mart-preview-skins' },
-            __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_9____["g" /* Skins */], skinsProps)
+            __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_9____["h" /* Skins */], skinsProps)
           )
         );
       }
@@ -24301,6 +24475,81 @@ Preview.defaultProps = {
 /* 90 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(9);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__polyfills_objectGetPrototypeOf__ = __webpack_require__(5);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(2);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__polyfills_createClass__ = __webpack_require__(3);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__polyfills_possibleConstructorReturn__ = __webpack_require__(6);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__polyfills_inherits__ = __webpack_require__(7);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_react__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_react__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_prop_types__ = __webpack_require__(4);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_7_prop_types__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8____ = __webpack_require__(13);
+
+
+
+
+
+
+
+
+
+
+var NotFound = function (_React$PureComponent) {
+  Object(__WEBPACK_IMPORTED_MODULE_5__polyfills_inherits__["a" /* default */])(NotFound, _React$PureComponent);
+
+  function NotFound() {
+    __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default()(this, NotFound);
+
+    return Object(__WEBPACK_IMPORTED_MODULE_4__polyfills_possibleConstructorReturn__["a" /* default */])(this, (NotFound.__proto__ || Object(__WEBPACK_IMPORTED_MODULE_1__polyfills_objectGetPrototypeOf__["a" /* default */])(NotFound)).apply(this, arguments));
+  }
+
+  Object(__WEBPACK_IMPORTED_MODULE_3__polyfills_createClass__["a" /* default */])(NotFound, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props;
+      var data = _props.data;
+      var emojiProps = _props.emojiProps;
+      var i18n = _props.i18n;
+      var notFound = _props.notFound;
+      var notFoundEmoji = _props.notFoundEmoji;
+
+
+      var component = notFound && notFound() || __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(
+        'div',
+        { className: 'emoji-mart-no-results' },
+        Object(__WEBPACK_IMPORTED_MODULE_8____["c" /* NimbleEmoji */])(Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({
+          data: data
+        }, emojiProps, {
+          size: 38,
+          emoji: notFoundEmoji,
+          onOver: null,
+          onLeave: null,
+          onClick: null
+        })),
+        __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(
+          'div',
+          { className: 'emoji-mart-no-results-label' },
+          i18n.notfound
+        )
+      );
+
+      return component;
+    }
+  }]);
+
+  return NotFound;
+}(__WEBPACK_IMPORTED_MODULE_6_react___default.a.PureComponent);
+
+/* harmony default export */ __webpack_exports__["a"] = (NotFound);
+
+/***/ }),
+/* 91 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_objectGetPrototypeOf__ = __webpack_require__(5);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_classCallCheck__ = __webpack_require__(2);
@@ -24312,7 +24561,9 @@ Preview.defaultProps = {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5_react__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_prop_types__ = __webpack_require__(4);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_prop_types__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__utils_emoji_index_nimble_emoji_index__ = __webpack_require__(22);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__svgs__ = __webpack_require__(38);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__utils_emoji_index_nimble_emoji_index__ = __webpack_require__(22);
+
 
 
 
@@ -24331,17 +24582,30 @@ var Search = function (_React$PureComponent) {
 
     var _this = Object(__WEBPACK_IMPORTED_MODULE_3__polyfills_possibleConstructorReturn__["a" /* default */])(this, (Search.__proto__ || Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_objectGetPrototypeOf__["a" /* default */])(Search)).call(this, props));
 
+    _this.state = {
+      icon: __WEBPACK_IMPORTED_MODULE_7__svgs__["search"].search,
+      isSearching: false
+    };
+
     _this.data = props.data;
-    _this.emojiIndex = new __WEBPACK_IMPORTED_MODULE_7__utils_emoji_index_nimble_emoji_index__["a" /* default */](_this.data);
+    _this.emojiIndex = new __WEBPACK_IMPORTED_MODULE_8__utils_emoji_index_nimble_emoji_index__["a" /* default */](_this.data);
     _this.setRef = _this.setRef.bind(_this);
     _this.handleChange = _this.handleChange.bind(_this);
+    _this.clear = _this.clear.bind(_this);
+    _this.handleKeyUp = _this.handleKeyUp.bind(_this);
     return _this;
   }
 
   Object(__WEBPACK_IMPORTED_MODULE_2__polyfills_createClass__["a" /* default */])(Search, [{
-    key: 'handleChange',
-    value: function handleChange() {
-      var value = this.input.value;
+    key: 'search',
+    value: function search(value) {
+      if (value == '') this.setState({
+        icon: __WEBPACK_IMPORTED_MODULE_7__svgs__["search"].search,
+        isSearching: false
+      });else this.setState({
+        icon: __WEBPACK_IMPORTED_MODULE_7__svgs__["search"].delete,
+        isSearching: true
+      });
 
       this.props.onSearch(this.emojiIndex.search(value, {
         emojisToShowFilter: this.props.emojisToShowFilter,
@@ -24351,22 +24615,39 @@ var Search = function (_React$PureComponent) {
         custom: this.props.custom
       }));
     }
+  }, {
+    key: 'clear',
+    value: function clear() {
+      if (this.input.value == '') return;
+      this.input.value = '';
+      this.search('');
+    }
+  }, {
+    key: 'handleChange',
+    value: function handleChange() {
+      this.search(this.input.value);
+    }
+  }, {
+    key: 'handleKeyUp',
+    value: function handleKeyUp(e) {
+      if (e.keyCode === 13) {
+        this.clear();
+      }
+    }
   }, {
     key: 'setRef',
     value: function setRef(c) {
       this.input = c;
     }
-  }, {
-    key: 'clear',
-    value: function clear() {
-      this.input.value = '';
-    }
   }, {
     key: 'render',
     value: function render() {
       var _props = this.props;
       var i18n = _props.i18n;
       var autoFocus = _props.autoFocus;
+      var _state = this.state;
+      var icon = _state.icon;
+      var isSearching = _state.isSearching;
 
 
       return __WEBPACK_IMPORTED_MODULE_5_react___default.a.createElement(
@@ -24378,7 +24659,17 @@ var Search = function (_React$PureComponent) {
           onChange: this.handleChange,
           placeholder: i18n.search,
           autoFocus: autoFocus
-        })
+        }),
+        __WEBPACK_IMPORTED_MODULE_5_react___default.a.createElement(
+          'button',
+          {
+            className: 'emoji-mart-search-icon',
+            onClick: this.clear,
+            onKeyUp: this.handleKeyUp,
+            disabled: !isSearching
+          },
+          icon()
+        )
       );
     }
   }]);
@@ -24397,7 +24688,7 @@ Search.defaultProps = {
 };
 
 /***/ }),
-/* 91 */
+/* 92 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -24503,16 +24794,16 @@ Skins.defaultProps = {
 };
 
 /***/ }),
-/* 92 */
+/* 93 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(9);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__data_all_json__ = __webpack_require__(21);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__data_all_json___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__data_all_json__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__nimble_emoji__ = __webpack_require__(38);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__nimble_emoji__ = __webpack_require__(39);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_shared_props__ = __webpack_require__(17);
 
 
@@ -24538,11 +24829,11 @@ Emoji.defaultProps = Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a"
 /* unused harmony default export */ var _unused_webpack_default_export = (Emoji);
 
 /***/ }),
-/* 93 */
+/* 94 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(9);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__polyfills_objectGetPrototypeOf__ = __webpack_require__(5);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(2);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__);
@@ -24553,7 +24844,7 @@ Emoji.defaultProps = Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a"
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_react__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__data_all_json__ = __webpack_require__(21);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__data_all_json___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_7__data_all_json__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__nimble_picker__ = __webpack_require__(39);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__nimble_picker__ = __webpack_require__(40);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__utils_shared_props__ = __webpack_require__(17);
 
 
@@ -24592,7 +24883,7 @@ var Picker = function (_React$PureComponent) {
 Picker.defaultProps = Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({}, __WEBPACK_IMPORTED_MODULE_9__utils_shared_props__["c" /* PickerDefaultProps */], { data: __WEBPACK_IMPORTED_MODULE_7__data_all_json___default.a });
 
 /***/ }),
-/* 94 */
+/* 95 */
 /***/ (function(module, exports) {
 
 // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
diff --git a/docs/emoji-mart.css b/docs/emoji-mart.css
index 3f61082..8db71f1 100644
--- a/docs/emoji-mart.css
+++ b/docs/emoji-mart.css
@@ -72,9 +72,11 @@
   max-width: 22px;
 }
 
-.emoji-mart-anchors svg {
+.emoji-mart-anchors svg,
+.emoji-mart-anchors img {
   fill: currentColor;
-  max-height: 18px;
+  height: 18px;
+  width: 18px;
 }
 
 .emoji-mart-scroll {
@@ -87,17 +89,29 @@
 .emoji-mart-search {
   margin-top: 6px;
   padding: 0 6px;
+  position: relative;
 }
+
 .emoji-mart-search input {
   font-size: 16px;
   display: block;
   width: 100%;
-  padding: .2em .6em;
-  border-radius: 25px;
+  padding: 5px 25px 6px 10px;
+  border-radius: 5px;
   border: 1px solid #d9d9d9;
   outline: 0;
 }
 
+.emoji-mart-search-icon {
+  position: absolute;
+  top: 9px;
+  right: 16px;
+  z-index: 2;
+  padding: 0;
+  border: none;
+  background: none;
+}
+
 .emoji-mart-category .emoji-mart-emoji span {
   z-index: 1;
   position: relative;
@@ -148,6 +162,12 @@
   padding-top: 70px;
   color: #858585;
 }
+.emoji-mart-no-results-img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+}
 .emoji-mart-no-results .emoji-mart-category-label {
   display: none;
 }

From 1588712ca04af1bd2d8c7df5dab7561b7ef01a60 Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Tue, 31 Jul 2018 15:39:26 -0400
Subject: [PATCH 15/17] Release v2.7.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4290d34..5388859 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "emoji-mart",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "Customizable Slack-like emoji picker for React",
   "main": "dist/index.js",
   "module": "dist-es/index.js",

From 385cb8f8c2888af3bfbe94b6bd1cf6fd9681280d Mon Sep 17 00:00:00 2001
From: Justine De Caires <justine@minerva.kgi.edu>
Date: Mon, 6 Aug 2018 14:31:02 -0700
Subject: [PATCH 16/17] Add sheetColumns and sheetRows props for non-square
 sprite sheets

---
 src/components/emoji/nimble-emoji.js   | 9 ++++-----
 src/components/picker/nimble-picker.js | 4 ++++
 src/utils/shared-props.js              | 4 ++++
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js
index 135e735..765a68c 100644
--- a/src/components/emoji/nimble-emoji.js
+++ b/src/components/emoji/nimble-emoji.js
@@ -5,8 +5,6 @@ import { getData, getSanitizedData, unifiedToNative } from '../../utils'
 import { uncompress } from '../../utils/data'
 import { EmojiPropTypes, EmojiDefaultProps } from '../../utils/shared-props'
 
-const SHEET_COLUMNS = 52
-
 const _getData = (props) => {
   var { emoji, skin, set, data } = props
   return getData(emoji, skin, set, data)
@@ -14,9 +12,10 @@ const _getData = (props) => {
 
 const _getPosition = (props) => {
   var { sheet_x, sheet_y } = _getData(props),
-    multiply = 100 / (SHEET_COLUMNS - 1)
+    multiplyX = 100 / (props.sheetColumns - 1),
+    multiplyY = 100 / (props.sheetRows - 1)
 
-  return `${multiply * sheet_x}% ${multiply * sheet_y}%`
+  return `${multiplyX * sheet_x}% ${multiplyY * sheet_y}%`
 }
 
 const _getSanitizedData = (props) => {
@@ -150,7 +149,7 @@ const NimbleEmoji = (props) => {
           props.set,
           props.sheetSize,
         )})`,
-        backgroundSize: `${100 * SHEET_COLUMNS}%`,
+        backgroundSize: `${100 * props.sheetColumns}% ${100 * props.sheetRows}%`,
         backgroundPosition: _getPosition(props),
       }
     }
diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
index 5d54057..762c950 100644
--- a/src/components/picker/nimble-picker.js
+++ b/src/components/picker/nimble-picker.js
@@ -455,6 +455,8 @@ export default class NimblePicker extends React.PureComponent {
         emojiSize,
         set,
         sheetSize,
+        sheetColumns,
+        sheetRows,
         style,
         title,
         emoji,
@@ -537,6 +539,8 @@ export default class NimblePicker extends React.PureComponent {
                   size: emojiSize,
                   set: set,
                   sheetSize: sheetSize,
+                  sheetColumns: sheetColumns,
+                  sheetRows: sheetRows,
                   forceSize: native,
                   tooltip: emojiTooltip,
                   backgroundImageFn: backgroundImageFn,
diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js
index fcea08f..4d4e3f8 100644
--- a/src/utils/shared-props.js
+++ b/src/utils/shared-props.js
@@ -12,6 +12,8 @@ const EmojiPropTypes = {
   tooltip: PropTypes.bool,
   skin: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
   sheetSize: PropTypes.oneOf([16, 20, 32, 64]),
+  sheetColumns: PropTypes.number,
+  sheetRows: PropTypes.number,
   set: PropTypes.oneOf([
     'apple',
     'google',
@@ -28,6 +30,8 @@ const EmojiDefaultProps = {
   skin: 1,
   set: 'apple',
   sheetSize: 64,
+  sheetColumns: 52,
+  sheetRows: 52,
   native: false,
   forceSize: false,
   tooltip: false,

From 57a548b199720d4316cce0cdd594aa345a3b2355 Mon Sep 17 00:00:00 2001
From: Trond Kjetil Bremnes <tkbremnes@gmail.com>
Date: Wed, 8 Aug 2018 12:22:28 +0200
Subject: [PATCH 17/17] fix typo in README.md

The sheet size for messenger says that the emoji download size is 449
_megabytes_ for a sheetSize of 32.
449 _kilobytes_ is the correct value.
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b8c6bda..55e00d7 100644
--- a/README.md
+++ b/README.md
@@ -82,7 +82,7 @@ Sheets are served from [unpkg](https://unpkg.com), a global CDN that serves file
 | emojione  | 315 KB                 | 435 KB                 | 1020 KB                | 2.33 MB                |
 | facebook  | 322 KB                 | 439 KB                 | 1020 KB                | 2.50 MB                |
 | google    | 301 KB                 | 409 KB                 |  907 KB                | 2.17 MB                |
-| messenger | 325 KB                 | 449 MB                 | 1.05 MB                | 2.69 MB                |
+| messenger | 325 KB                 | 449 KB                 | 1.05 MB                | 2.69 MB                |
 | twitter   | 288 KB                 | 389 KB                 |  839 KB                | 1.82 MB                |
 
 #### Datasets