@voicenter-team/emotion-icons

Emotion Icons Library

A TypeScript library providing a collection of emotion icons in both GIF and SVG formats. This library simplifies the usage of emotion icons by mapping various emotion names to icon assets, allowing for consistent icon usage across different projects.

Installation

Install the library via npm:

npm install @voicenter-team/emotion-icons

Development

If you want to add new icon or modify the existing ones, you need follow the steps below:

1. Adjust the src/input-icons.ts file. This is single source of truth for the actual icons we have.
2. Make sure that in folders:
   • src/icons/gif you have all the gif icons files which names are the same as in the array in src/input-icons.ts
   • src/icons/svg you have all the svg icons files which names are the same as in the array in src/input-icons.ts
3. Just run npm run build to build the library.
4. Publish to npm.
5. If you added new icons, run the upload-cdn script (make sure you created yourself an .env file) to upload the new icons to the CDN.

Usage

Importing Functions and Icons

Import the functions and icon maps you need from the library:

import {
   isIconName,
   getIcon,
   getEmotionIconName,
   getSvgRawIcon,
   getSvgCdnIcon,
   getSvgBase64Icon,
   getGifCdnIcon,
   INPUT_ICONS,
   ICONS,
   ALL_ICONS,
   SVG_BASE_64_ICONS,
   SVG_CDN_ICONS,
   SVG_RAW_ICONS,
   GIF_CDN_ICONS,
} from '@voicenter-team/emotion-icons'
import type {
   InputIconName,
   InputIcons,
   Icons,
   IconName,
   IconsMap,
} from '@voicenter-team/emotion-icons'

Getting Icons

Retrieve an icon by passing the emotion name to the corresponding function.

Example:

// Getting a GIF icon
const angryGifIcon = getGifCdnIcon('angry')

// Getting an SVG icon
const smileSvgIcon = getSvgCdnIcon('smile')

Using Utility Functions and Types

There are some utility functions that you can use them to perform additional operations.

// Check if a name is a valid icon name
const name = 'happy'
if (isIconName(name)) {
  console.log(`${name} is a valid icon name.`)
} else {
  console.log(`${name} is not a valid icon name.`)
}

Using the Icons

The functions return a base64-encoded data URL string, which can be used directly in an img element's src attribute or as a CSS background-image.

<!-- In an HTML file -->
<img src="{{ angryGifIcon }}" alt="Angry Emoji" />

/* In a CSS file */
.icon {
  background-image: url('{{ smileSvgIcon }}');
}

API Reference

Go to the API Reference for detailed information about the functions and types provided by the library.

Error Handling

If an invalid or unsupported emotion name is provided:

• A warning is logged to the console: Icon "{name}" not found in icon map, using neutral icon instead.
• The function returns the neutral icon as a fallback.

Example:

const icon = getGifEmojiIcon('unknown')
// Logs: Icon "unknown" not found in icon map, using neutral icon instead.

License

This project is licensed under the MIT License - see the LICENSE file for details.