emoji-picker-react 4.20.8 → 4.21.0

package/llms.txt

@@ -238,9 +238,31 @@ Control the footer preview area with `previewConfig`:
 
 ## Custom Category Icons
 
-Customize the navigation icons using one of two methods.
+Customize the navigation icons using one of three methods.
 
-**Method 1: The `categoryIcons` prop**
+**Method 1: Recolor the default icons with CSS variables**
+
+The default icons follow two variables. Set them on the picker root via
+the `style` prop (the picker defines its own defaults on `.epr-main`, so
+values inherited from outer ancestors are shadowed):
+
+```tsx
+<EmojiPicker
+  style={
+    {
+      '--epr-category-icon-active-color': '#e11d48',
+      '--epr-category-icon-inactive-color': '#a8a29e',
+    } as React.CSSProperties
+  }
+/>
+```
+
+| Variable                             | Default                             |
+| :----------------------------------- | :---------------------------------- |
+| `--epr-category-icon-active-color`   | `#3371B7` (`#6AA9DD` in dark theme) |
+| `--epr-category-icon-inactive-color` | `#868686` (`#C0C0BF` in dark theme) |
+
+**Method 2: The `categoryIcons` prop**
 
 Map `Categories` enum values to React nodes:
 
@@ -255,7 +277,7 @@ import EmojiPicker, { Categories } from 'emoji-picker-react';
 />;
 ```
 
-**Method 2: The `categories` configuration array**
+**Method 3: The `categories` configuration array**
 
 Define the icon directly within the category configuration object:
 
@@ -386,10 +408,11 @@ aside.EmojiPickerReact {
 
 ## 🏷️ Category Navigation
 
-| Variable                                | Description                          | Default   |
-| :-------------------------------------- | :----------------------------------- | :-------- |
-| `--epr-category-navigation-button-size` | Size of category navigation buttons. | `30px`    |
-| `--epr-category-icon-active-color`      | Color of the active category icon.   | `#6aa8de` |
+| Variable                                | Description                                                     | Default             |
+| :-------------------------------------- | :-------------------------------------------------------------- | :------------------ |
+| `--epr-category-navigation-button-size` | Size of category navigation buttons.                            | `30px`              |
+| `--epr-category-icon-active-color`      | Color of the active/hovered category icon (and focus ring).     | `#3371B7` (`#6AA9DD` in dark theme) |
+| `--epr-category-icon-inactive-color`    | Color of inactive category icons.                               | `#868686` (`#C0C0BF` in dark theme) |
 
 ## 📃 Category Labels
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.20.8",
+  "version": "4.21.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/Stylesheet/stylesheet.tsx

@@ -40,7 +40,7 @@ export const commonInteractionStyles = stylesheet.create({
       categoryBtn: {
         ':hover': {
           opacity: '1',
-          backgroundPositionY: 'var(--epr-category-navigation-button-size)',
+          color: 'var(--epr-category-icon-active-color, #3371B7)',
         },
       },
       hiddenOnSearch: {
@@ -68,11 +68,11 @@ export const commonInteractionStyles = stylesheet.create({
     categoryBtn: {
       ':hover': {
         opacity: '1',
-        backgroundPositionY: 'var(--epr-category-navigation-button-size)',
+        color: 'var(--epr-category-icon-active-color, #3371B7)',
       },
       '&.epr-active': {
         opacity: '1',
-        backgroundPositionY: 'var(--epr-category-navigation-button-size)',
+        color: 'var(--epr-category-icon-active-color, #3371B7)',
       },
     },
     visibleOnSearchOnly: {

package/src/components/main/PickerMain.tsx

@@ -95,6 +95,8 @@ const DarkTheme = {
     'var(--epr-dark-emoji-variation-indicator-color)',
   '--epr-category-icon-active-color':
     'var(--epr-dark-category-icon-active-color)',
+  '--epr-category-icon-inactive-color':
+    'var(--epr-dark-category-icon-inactive-color)',
   '--epr-skin-tone-picker-menu-color':
     'var(--epr-dark-skin-tone-picker-menu-color)',
   '--epr-skin-tone-outer-border-color':
@@ -132,7 +134,8 @@ const styles = stylesheet.create({
       '--epr-picker-border-color': '#e7e7e7',
       '--epr-bg-color': '#fff',
       '--epr-reactions-bg-color': '#ffffff90',
-      '--epr-category-icon-active-color': '#6aa8de',
+      '--epr-category-icon-active-color': '#3371B7',
+      '--epr-category-icon-inactive-color': '#868686',
       '--epr-skin-tone-picker-menu-color': '#ffffff95',
       '--epr-skin-tone-outer-border-color': '#555555',
       '--epr-skin-tone-inner-border-color': 'var(--epr-bg-color)',
@@ -214,7 +217,8 @@ const styles = stylesheet.create({
       '--epr-dark-reactions-bg-color': '#22222290',
       '--epr-dark-search-input-bg-color-active': 'var(--epr-dark)',
       '--epr-dark-emoji-variation-indicator-color': '#444',
-      '--epr-dark-category-icon-active-color': '#3271b7',
+      '--epr-dark-category-icon-active-color': '#6AA9DD',
+      '--epr-dark-category-icon-inactive-color': '#C0C0BF',
       '--epr-dark-skin-tone-picker-menu-color': '#22222295',
       '--epr-dark-skin-tone-outer-border-color':
         'var(--epr-dark-picker-border-color)',

package/src/components/navigation/CategoryButton.tsx

@@ -11,7 +11,7 @@ import { categoryNameFromCategoryConfig } from '../../config/categoryConfig';
 import { CategoryConfig } from '../../types/exposedTypes';
 import { Button } from '../atoms/Button';
 
-import SVGNavigation from './svg/CategoryNav.svg';
+import { CategoryNavIcon } from './CategoryNavIcon';
 
 type Props = {
   isActiveCategory: boolean;
@@ -51,23 +51,23 @@ export function CategoryButton({
       role="tab"
       aria-controls="epr-category-nav-id"
     >
-      {hasCustomIcon ? icon : null}
+      {hasCustomIcon ? icon : <CategoryNavIcon category={category} />}
     </Button>
   );
 }
 
-const DarkActivePositionY = {
-  backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)',
+const DarkActiveColor = {
+  color: 'var(--epr-category-icon-active-color, #6AA9DD)',
 };
-const DarkPositionY = {
-  backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 2)',
+const DarkInactiveColor = {
+  color: 'var(--epr-category-icon-inactive-color, #C0C0BF)',
 };
 
 const DarkInactivePosition = {
   ':not(.epr-search-active)': {
     catBtn: {
-      ':hover': DarkActivePositionY,
-      '&.epr-active': DarkActivePositionY,
+      ':hover': DarkActiveColor,
+      '&.epr-active': DarkActiveColor,
     },
   },
 };
@@ -80,10 +80,11 @@ const styles = stylesheet.create({
     position: 'relative',
     height: 'var(--epr-category-navigation-button-size)',
     width: 'var(--epr-category-navigation-button-size)',
-    backgroundSize: 'calc(var(--epr-category-navigation-button-size) * 10)',
     outline: 'none',
-    backgroundPosition: '0 0',
-    backgroundImage: `url(${SVGNavigation})`,
+    // Icon glyphs are inline SVGs painted with currentColor, so the fill
+    // follows the --epr-category-icon-*-color variables.
+    // https://github.com/ealush/emoji-picker-react/issues/399
+    color: 'var(--epr-category-icon-inactive-color, #868686)',
     ':focus:before': {
       content: '',
       position: 'absolute',
@@ -94,54 +95,14 @@ const styles = stylesheet.create({
       border: '2px solid var(--epr-category-icon-active-color)',
       borderRadius: '50%',
     },
-    '&.epr-icn-suggested': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -8)',
-    },
-    '&.epr-icn-custom': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -9)',
-    },
-    '&.epr-icn-activities': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -4)',
-    },
-    '&.epr-icn-animals_nature': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -1)',
-    },
-    '&.epr-icn-flags': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -7)',
-    },
-    '&.epr-icn-food_drink': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -2)',
-    },
-    '&.epr-icn-objects': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -5)',
-    },
-    '&.epr-icn-smileys_people': {
-      backgroundPositionX: '0px',
-    },
-    '&.epr-icn-symbols': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -6)',
-    },
-    '&.epr-icn-travel_places': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -3)',
-    },
   },
   customIcon: {
     '.': 'epr-cat-btn-custom-icon',
-    backgroundImage: 'none',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
   },
-  ...darkMode('catBtn', DarkPositionY),
+  ...darkMode('catBtn', DarkInactiveColor),
   '.epr-dark-theme': {
     ...DarkInactivePosition,
   },

package/src/components/navigation/CategoryNavIcon.tsx

@@ -0,0 +1,317 @@
+import * as React from 'react';
+
+// Default navigation icons, extracted from the former CategoryNav.svg
+// sprite (row 0). Paint uses currentColor so the fill follows the
+// --epr-category-icon-*-color variables.
+// https://github.com/ealush/emoji-picker-react/issues/399
+
+const COLUMNS: Record<string, number> = {
+  smileys_people: 0,
+  animals_nature: 1,
+  food_drink: 2,
+  travel_places: 3,
+  activities: 4,
+  objects: 5,
+  symbols: 6,
+  flags: 7,
+  suggested: 8,
+  custom: 9,
+};
+
+const SHAPES: Record<number, React.ReactNode> = {
+  0: (
+    <>
+      <path
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="0.1"
+        strokeMiterlimit="10"
+        d="M12.8,9.5c0.6,0,1.1-0.5,1.1-1.2
+		c0-0.6-0.5-1.1-1.1-1.1c-0.6,0-1.2,0.5-1.2,1.1S12.2,9.5,12.8,9.5z M12.8,7.9c0.2,0,0.4,0.2,0.4,0.4c0,0.2-0.2,0.4-0.4,0.4
+		c-0.2,0-0.4-0.2-0.4-0.4C12.4,8.1,12.6,7.9,12.8,7.9z"
+      />
+      <path
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="0.1"
+        strokeMiterlimit="10"
+        d="M7.2,9.5c0.6,0,1.2-0.5,1.2-1.2
+		c0-0.6-0.5-1.1-1.2-1.1c-0.6,0-1.1,0.5-1.1,1.1S6.6,9.5,7.2,9.5z M7.2,7.9c0.2,0,0.4,0.2,0.4,0.4c0,0.2-0.2,0.4-0.4,0.4
+		C7,8.7,6.8,8.5,6.8,8.3C6.8,8.1,7,7.9,7.2,7.9z"
+      />
+      <path
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="0.1"
+        strokeMiterlimit="10"
+        d="M14.6,11.2c-0.1-0.1-0.2-0.2-0.3-0.2H5.7
+		c-0.1,0-0.2,0.1-0.3,0.2c-0.1,0.1-0.1,0.2,0,0.4c0.7,2,2.5,3.3,4.6,3.3s3.9-1.3,4.6-3.3C14.7,11.4,14.7,11.3,14.6,11.2z M10,14.1
+		c-1.6,0-3-0.9-3.7-2.2h7.3C13,13.2,11.6,14.1,10,14.1z"
+      />
+      <path
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="0.1"
+        strokeMiterlimit="10"
+        d="M10,3c-3.8,0-7,3.1-7,7s3.1,7,7,7s7-3.1,7-7
+		S13.8,3,10,3z M10,16.2c-3.4,0-6.2-2.8-6.2-6.2S6.6,3.8,10,3.8s6.2,2.8,6.2,6.2S13.4,16.2,10,16.2z"
+      />
+    </>
+  ),
+  1: (
+    <>
+      <path
+        fill="none"
+        stroke="currentColor"
+        d="M24.2,11V3.5c0.1,0.1,0.8,0.9,2.8,3.1c2.5-1.7,5.6-0.7,6.9,0l2.4-3.1v7.1
+			c0,1.2-0.1,2.5-0.9,3.4c-1,1.2-2.7,2.5-5.3,2.5c-2.9,0-4.5-1.5-5.3-2.9C24.2,12.9,24.2,11.9,24.2,11z"
+      />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        d="M21.2,10l5.4,1.2"
+      />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        d="M21.2,14.1l5.4-1.2"
+      />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        d="M38.8,10l-5.4,1.2"
+      />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        d="M38.8,14.1l-5.4-1.2"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill="currentColor"
+        d="M29.5,12.4L29,11.7c-0.2-0.3,0-0.6,0.3-0.6h1.4
+			c0.3,0,0.5,0.4,0.3,0.6l-0.7,1l0,0c-0.7,1.2-2.6,1.1-3.1-0.3l-0.1-0.2c-0.1-0.2,0-0.4,0.2-0.5s0.4,0,0.5,0.2l0.1,0.2
+			C28.3,12.7,29.1,12.9,29.5,12.4z"
+      />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        d="M32.4,12.1l-0.1,0.2c-0.4,1-1.8,1.1-2.3,0.2"
+      />
+      <ellipse fill="currentColor" cx="27.6" cy="9.7" rx="0.7" ry="0.7" />
+      <ellipse fill="currentColor" cx="32.4" cy="9.7" rx="0.7" ry="0.7" />
+    </>
+  ),
+  2: (
+    <>
+      <path
+        fill="none"
+        stroke="currentColor"
+        d="M48.1,3.5h3.7c2.5,0,4.5,2,4.5,4.5c0,0.5-0.4,0.9-0.9,0.9H44.5c-0.5,0-0.9-0.4-0.9-0.9
+				C43.6,5.5,45.6,3.5,48.1,3.5z"
+      />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        d="M43.5,8.7c-0.2,0.1-0.5,1.2,0,1.5c1.4,0.9,8.5,0.8,11.3,0.6
+				c0.8-0.1,1.6-0.4,1.7-1.2c0-0.3-0.1-0.6-0.6-0.9"
+      />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        d="M43.5,10.6L43.3,11c-0.2,0.5,0.2,1,0.7,0.9
+				c0.3-0.1,0.5,0.1,0.7,0.3l0.1,0.2c0.3,0.5,1,0.6,1.5,0.2l0,0c0.3-0.2,0.7-0.3,1-0.2l0.8,0.3c0.4,0.1,0.8,0.1,1.2,0l0.5-0.2
+				c0.4-0.2,0.9-0.2,1.3,0l0.5,0.2c0.4,0.2,0.8,0.1,1.2-0.1l0.2-0.1c0.3-0.2,0.8-0.1,1.1,0.1l0.2,0.2c0.3,0.3,0.8,0.2,1-0.2l0.1-0.2
+				c0.1-0.2,0-0.3,0.2-0.4c0.5,0,1.2-0.3,1.1-0.7l-0.4-1.1"
+      />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        d="M43.5,12.1c-0.1,0.2-0.3,0.8,0,1.1c0.3,0.4,3,1.1,6.4,1.1
+				c2.2,0,4.6-0.3,6-0.6c0.5-0.1,0.9-0.4,0.8-0.9c0-0.2-0.2-0.5-0.4-0.7"
+      />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        d="M43.5,13.3c0,0.5,0.6,2.4,1.3,2.6c1.8,0.8,5.7,0.7,8.1,0.5
+				c1.3-0.1,2.5-0.7,3.2-1.8c0.3-0.5,0.5-1,0.5-1.4"
+      />
+      <ellipse fill="currentColor" cx="51.6" cy="6.5" rx="0.3" ry="0.4" />
+      <ellipse fill="currentColor" cx="53" cy="4.9" rx="0.3" ry="0.4" />
+      <ellipse fill="currentColor" cx="53" cy="7.2" rx="0.3" ry="0.4" />
+      <ellipse fill="currentColor" cx="54.3" cy="6.5" rx="0.3" ry="0.4" />
+      <ellipse fill="currentColor" cx="50.9" cy="4.9" rx="0.3" ry="0.4" />
+    </>
+  ),
+  3: (
+    <>
+      <path
+        fill="none"
+        stroke="currentColor"
+        d="M64.1,13.4l2.3,0c0.2,0,0.4,0.2,0.4,0.4v2.1c0,0.2-0.2,0.4-0.4,0.4h-2.3
+				c-0.2,0-0.4-0.2-0.4-0.4v-2.1C63.7,13.6,63.8,13.4,64.1,13.4z"
+      />
+      <path
+        fill="none"
+        stroke="currentColor"
+        d="M73.5,13.4h2.4c0.2,0,0.4,0.2,0.4,0.4v2.1c0,0.2-0.2,0.4-0.4,0.4h-2.4
+				c-0.2,0-0.4-0.2-0.4-0.4l0-2.1C73.1,13.6,73.3,13.4,73.5,13.4z"
+      />
+      <path fill="none" stroke="currentColor" d="M63.7,8.4h12.6v5H63.7V8.4z" />
+      <path
+        fill="none"
+        stroke="currentColor"
+        d="M65.5,3.6h8.9c1,0,1.9,0.8,1.9,1.9v3.1H63.7V5.5C63.7,4.4,64.5,3.6,65.5,3.6z"
+      />
+      <ellipse fill="currentColor" cx="66.2" cy="10.9" rx="0.9" ry="0.9" />
+      <ellipse fill="currentColor" cx="73.8" cy="10.9" rx="0.9" ry="0.9" />
+    </>
+  ),
+  4: (
+    <>
+      <path
+        fill="none"
+        stroke="currentColor"
+        d="M96.4,10c0,3.6-2.9,6.5-6.4,6.5s-6.4-2.9-6.4-6.5s2.9-6.5,6.4-6.5S96.4,6.4,96.4,10z"
+      />
+      <path
+        fill="none"
+        stroke="currentColor"
+        d="M96.3,8.6c0,0,0,0.1,0,0.1c-0.9,0.1-2.9,0.1-4.6-1.2c-1.1-0.8-2-1.7-2.6-2.5
+				c-0.3-0.4-0.6-0.8-0.7-1.1c-0.1-0.1-0.1-0.2-0.1-0.2c0.5-0.1,1.2-0.2,2-0.2c1.2,0,2.5,0.3,3.5,1.1c1,0.8,1.7,1.8,2.1,2.8
+				C96.1,7.9,96.2,8.3,96.3,8.6z"
+      />
+      <path
+        fill="none"
+        stroke="currentColor"
+        d="M84,12.1c0,0,0-0.1,0-0.1c0.9-0.2,2.9-0.4,4.7,0.6c1.1,0.6,1.9,1.5,2.4,2.3
+				c0.4,0.5,0.6,1,0.7,1.3c-0.4,0.1-1,0.2-1.7,0.3c-1,0-2.1-0.1-3.2-0.8c-1.1-0.6-1.9-1.6-2.4-2.5C84.2,12.8,84.1,12.4,84,12.1z"
+      />
+    </>
+  ),
+  5: (
+    <>
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        d="M116.3,6.8l-1.4,2L114.1,8l-0.6-0.7l0,0.9l-0.1,8.2h-6.8l-0.1-8.2
+				l0-0.9L105.9,8l-0.8,0.8l-1.4-2l2.6-2.9c0.1-0.1,0.2-0.1,0.3-0.1h1.3l0.4,0.7c0.7,1.3,2.6,1.3,3.3-0.1l0.3-0.6h1.2
+				c0.1,0,0.2,0,0.3,0.1l0.3-0.3l-0.3,0.3L116.3,6.8z"
+      />
+      <path
+        fill="none"
+        stroke="currentColor"
+        d="M110.1,7.7h2v0.9c0,0.4-0.4,0.7-1,0.7c-0.6,0-1-0.3-1-0.7L110.1,7.7L110.1,7.7z"
+      />
+    </>
+  ),
+  6: (
+    <>
+      <path
+        fill="none"
+        stroke="currentColor"
+        d="M126.8,14.3c0,1.2-1,2.2-2.2,2.2s-2.2-1-2.2-2.2s1-2.2,2.2-2.2S126.8,13.1,126.8,14.3z"
+      />
+      <path
+        fill="none"
+        stroke="currentColor"
+        d="M137.6,14.3c0,1.2-1,2.2-2.2,2.2c-1.2,0-2.2-1-2.2-2.2s1-2.2,2.2-2.2
+				C136.6,12.1,137.6,13.1,137.6,14.3z"
+      />
+      <path fill="none" stroke="currentColor" d="M126.8,4.4v9.9" />
+      <path fill="none" stroke="currentColor" d="M137.7,4.4v9.9" />
+      <path
+        fill="none"
+        stroke="currentColor"
+        d="M126.8,3.5h10.8v2.7h-10.8C126.8,6.2,126.8,3.5,126.8,3.5z"
+      />
+    </>
+  ),
+  7: (
+    <>
+      <path
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="0.25"
+        strokeMiterlimit="10"
+        d="M156,4.3c-0.2-0.1-0.4-0.1-0.5,0
+	c0,0-0.2,0.1-0.9,0.1c-0.7,0-2.4-0.1-3.8-0.6c-0.8-0.3-1.7-0.5-2.5-0.5c-0.2,0-0.4,0-0.5,0c-1.3,0-2.5,0.3-3.6,1
+	c-0.2,0.1-0.2,0.2-0.2,0.4v11.6c0,0.3,0.1,0.5,0.3,0.5c0.6,0,0.5-0.4,0.5-0.6v-5.7c0.7-0.3,3.2-1.1,5.8-0.1c1.6,0.6,3.5,0.7,4.3,0.7
+	c0.8,0,1.3-0.3,1.3-0.3c0.2-0.1,0.3-0.2,0.3-0.4V4.7C156.2,4.5,156.1,4.4,156,4.3z M155.6,10.2c-0.1,0-0.7,0.1-1,0.1
+	c-0.7,0-2.4-0.1-3.8-0.6c-2.5-1-5-0.5-6.2-0.1V4.7c0.9-0.5,2.2-0.7,3.2-0.7c0.1,0,0.3,0,0.4,0c0.7,0,1.5,0.2,2.2,0.4
+	c1.6,0.6,3.5,0.7,4.3,0.7c0.2,0,0.8,0,1-0.1V10.2z"
+      />
+    </>
+  ),
+  8: (
+    <>
+      <path
+        fill="currentColor"
+        d="M170.8,3.1L170.8,3.1c-0.3,0-0.5,0-0.8,0c-2.1,0-4,1-5.3,2.5l-0.1,0l-0.1-0.1l-1-1.2l-0.3,3.4l3.4,0.3
+				l-1.1-1.3l-0.1-0.1l0.1-0.1c1.1-1.4,3-2.3,5-2.1l0,0c3.2,0.3,5.5,3.1,5.2,6.3c-0.3,3-3.1,5.3-6.1,5.1c-3.1-0.2-5.4-2.9-5.3-6
+				L163,9.5c-0.2,3.8,2.6,7.1,6.3,7.4c3.9,0.4,7.3-2.6,7.6-6.5C177.2,6.8,174.4,3.5,170.8,3.1z"
+      />
+      <path
+        fill="currentColor"
+        d="M170.3,7.4c0-0.3-0.3-0.6-0.6-0.6S169,7.1,169,7.4v3.2c0,0.2,0.1,0.3,0.2,0.4c0.1,0.1,0.3,0.2,0.4,0.2
+				h2.4c0.4,0,0.6-0.3,0.6-0.6s-0.3-0.6-0.6-0.6h-1.6h-0.2V9.8L170.3,7.4L170.3,7.4z"
+      />
+    </>
+  ),
+  9: (
+    <>
+      <path
+        fill="none"
+        stroke="currentColor"
+        d="M186.2,3.4h7.7c1.5,0,2.7,1.2,2.7,2.7v7.7c0,1.5-1.2,2.7-2.7,2.7h-7.7
+				c-1.5,0-2.7-1.2-2.7-2.7V6.1C183.4,4.6,184.7,3.4,186.2,3.4z"
+      />
+      <ellipse fill="currentColor" cx="186" cy="8.9" rx="0.7" ry="0.7" />
+      <ellipse fill="currentColor" cx="194" cy="6.7" rx="0.7" ry="0.7" />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        d="M186,13.3l0.4-0.3c0.4-0.3,1-0.3,1.5-0.1l1,0.4
+				c0.5,0.2,1,0.2,1.5-0.1l0.8-0.5c0.4-0.3,1-0.3,1.5-0.1l1.8,0.8"
+      />
+    </>
+  ),
+};
+
+export function CategoryNavIcon({ category }: { category: string }) {
+  const column = COLUMNS[category] ?? 0;
+  return (
+    <svg
+      viewBox={`${column * 20} 0 20 20`}
+      width="100%"
+      height="100%"
+      // Absolutely positioned over the button's padding box, matching the
+      // geometry of the former background-image sprite. Percentage sizes
+      // alone would resolve against the smaller content box (the button
+      // reset carries padding), shrinking the glyph.
+      style={{
+        display: 'block',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+      }}
+      aria-hidden="true"
+    >
+      {SHAPES[column] ?? null}
+    </svg>
+  );
+}

package/src/components/navigation/CategoryNavigation.tsx

@@ -31,6 +31,17 @@ export function CategoryNavigation() {
   const CategoryNavigationRef = useCategoryNavigationRef();
   const hideCustomCategory = useShouldHideCustomEmojis();
 
+  const visibleCategories = categoriesConfig.filter(
+    categoryConfig =>
+      !(isCustomCategory(categoryConfig) && hideCustomCategory),
+  );
+
+  // A single tab navigates nowhere — hide the bar to reclaim its space.
+  // https://github.com/ealush/emoji-picker-react/issues/396
+  if (visibleCategories.length <= 1) {
+    return null;
+  }
+
   return (
     <div
       className={cx(styles.nav)}
@@ -39,14 +50,10 @@ export function CategoryNavigation() {
       id="epr-category-nav-id"
       ref={CategoryNavigationRef}
     >
-      {categoriesConfig.map((categoryConfig) => {
+      {visibleCategories.map(categoryConfig => {
         const category = categoryFromCategoryConfig(categoryConfig);
         const isActiveCategory = category === activeCategory;
 
-        if (isCustomCategory(categoryConfig) && hideCustomCategory) {
-          return null;
-        }
-
         const allowNavigation = !isSearchMode && !isActiveCategory;
 
         return (