How would I best setup a twemoji icons component?

Alexander · June 30, 2023, 5:57pm

The page you linked seems to use emojibase to get an ‘emoji map’ (with unicode, name, etc), maybe you can use something similar?

Relevant links:

github.com

ShahriarKh/twemoji-cheatsheet/blob/main/components/SearchBox.jsx

import { useEffect, useState } from "react";
import css from "./SearchBox.module.scss";
import Fuse from "fuse.js";

export default function SearchBox({ setAvailabeEmojis, emojis }) {
    const fuse = new Fuse(emojis, {
        threshold: 0.1,
        keys: ["label", "tags", "emoji", "hexcode", "emoticon"],
    });

    const [query, setQuery] = useState("");

    function handleSearch(query) {
        if (query == "") {
            setAvailabeEmojis(emojis);
            return;
        }
        let results = fuse.search(query);
        let flatResults = Object.keys(results).reduce(function (r, k) {
            return r.concat(results[k].item);

This file has been truncated. show original

By the way it looks great

Topic		Replies	Views
Twemoji Icons Theme component	4	776	July 20, 2023
Configure custom emoji Site Management emoji , how-to , customization	3	18324	November 18, 2024
How to include fontawesome icons in posts? Support	18	8736	August 20, 2018
How to create a new emoji set Support	6	2223	February 1, 2019
Adding OpenMoji as a new emoji set Feature completed	12	1826	May 12, 2025

How would I best setup a twemoji icons component?

Related topics