FluentUI Emojis ✨

Convert standard emojis into Microsoft's premium FluentUI Emoji set dynamically. This library fetches the high-quality assets (3D, Color, Flat, and High-Contrast) from a dedicated API and replaces standard glyphs in your web applications.

Developed by Kawdhitha Nirmal (Cyber Yakku).

🌟 Features

• Multi-Style Support: Choose between 3D (Premium 3D render), Color (Vibrant Vector), Flat (Minimalist), and High-Contrast (Accessible).
• Dynamic Fetching: API-driven search ensures you always get the latest Microsoft emoji assets.
• Efficient Caching: Built-in caching to prevent redundant API calls during text parsing.
• Universal Compatibility: Works seamlessly with Plain HTML/JS, React, and Next.js.

📦 Installation

For now, you can include the script directly or copy the src folder into your project.

CDN / Direct Script (Plain HTML)

<script src="https://dev.dubhub.lk/script/fluentui-emojis.js"></script>

React / Module

import { FluentEmoji } from 'fluentui-emojis';

🛠️ Usage Examples

1. Plain HTML / Script Integration

You can use the FluentEmojiParser in any standard HTML project by including the core script.

Step 2: Usage in HTML Files

You can now use a native HTML custom element anywhere in your project:

<!-- Style defaults to '3D' -->
<fluent-emoji glyph="🍏"></fluent-emoji>

<!-- Specifying a custom style -->
<fluent-emoji glyph="🍕" style="Color"></fluent-emoji>
<fluent-emoji glyph="🚗" style="Flat"></fluent-emoji>

Step 3: Scripted Usage (Dynamic Parsing)

If you want to replace emojis within a block of text automatically:

const parser = new FluentEmojiParser({ style: '3D' });
const contentElement = document.getElementById('content');
await parser.parseElement(contentElement);

2. React Component Interaction

Wrap individual emojis or use the component for specific glyphs.

import FluentEmoji from './src/react/FluentEmoji';

function App() {
  return (
    <div>
      <h1>Green Apple: <FluentEmoji glyph="🍏" style="3D" /></h1>
      <p>
        Stay healthy! <FluentEmoji glyph="🥗" style="Color" />
      </p>
    </div>
  );
}

🌐 API Interaction

The library communicates with the following endpoint: https://fluentui-emoji-my.netlify.app/api/emojis?search={EMOJI}

Sample Response Structure:

{
  "creator": "Kawdhitha Nirmal",
  "developers": "Cyber Yakku",
  "total": 1,
  "search_query": "🍏",
  "emojis": [
    {
      "cldr": "green apple",
      "variations": {
        "3D": ["https://fluentui-emoji-my.netlify.app/assets/Green-apple/3D/green_apple_3d.png"],
        "Color": ["https://fluentui-emoji-my.netlify.app/assets/Green-apple/Color/green_apple_color.svg"],
        "Flat": ["https://fluentui-emoji-my.netlify.app/assets/Green-apple/Flat/green_apple_flat.svg"],
        "High-Contrast": ["https://fluentui-emoji-my.netlify.app/assets/Green-apple/High-Contrast/green_apple_high_contrast.svg"]
      }
    }
  ]
}

🎨 Styles Available

| Style | Description | Preview Goal | |-------|-------------|--------------| | 3D | High-fidelity 3D renders with lighting and shadows. | ✨ Premium | | Color | Standard vibrant vector-based emojis. | 🌈 Colorful | | Flat | Modern flat design with solid colors. | 🧩 Minimal | | High-Contrast | Black and white high-contrast for accessibility. | 👁️ Clarity |

📝 License

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

Developed with ❤️ by Cyber Yakku (Kawdhitha Nirmal). "Making the web more expressive."