thingtime_review/remix/app/components/Icon/Icon.tsx

import React from "react"
import { Center } from "@chakra-ui/react"
import emojis from "emojis-list"

export const Icon = (props) => {
  const name = props?.name

  const icon = React.useMemo(() => {
    // nothing
    if (["gear", "cog"]?.includes(name)) {
      return "⚙️"
    }
    if (["crystal"]?.includes(name)) {
      return "🔮"
    }
    if (["flower", "hibiscus"]?.includes(name)) {
      return "🌺"
    }
    if (["sparke", "magic"]?.includes(name)) {
      return "✨"
    }
    if (["wizard", "gandalf"]?.includes(name)) {
      return "🧙‍♂️"
    }
    if (["two eyes"]?.includes(name)) {
      return "👀"
    }
    if (["box", "thing", "object"]?.includes(name)) {
      return "📦"
    }
    if (["pencil"]?.includes(name)) {
      return "✏️"
    }
    if (["edit", "paint", "create"]?.includes(name)) {
      return "🎨"
    }
    if (["book", "books"]?.includes(name)) {
      return "📚"
    }
    if (["any", "magic wand"]?.includes(name)) {
      return "🪄"
    }
    if (["book-open", "books-open"]?.includes(name)) {
      return "📖"
    }
    if (["book-reader", "books-reader"]?.includes(name)) {
      return "👩‍🏫"
    }
    if (["number", "hundred"]?.includes(name)) {
      return "💯"
    }
    if (["puzzle", "types"]?.includes(name)) {
      return "🧩"
    }
    if (["heart"]?.includes(name)) {
      return "❤️"
    }
    if (["heart-broken"]?.includes(name)) {
      return "💔"
    }
    if (["heart-pulse"]?.includes(name)) {
      return "💗"
    }
    if (["string", "text"]?.includes(name)) {
      return "💬"
    }
    if (["array", "list"]?.includes(name)) {
      return "📚"
    }
    if (["boolean", "bool"]?.includes(name)) {
      return "🌗"
      // return "⚖️"
    }
    if (["rainbow"]?.includes(name)) {
      return "🌈"
    }
    if (["sun"]?.includes(name)) {
      return "☀️"
    }
    if (["moon"]?.includes(name)) {
      return "🌙"
    }
    if (["unicorn"]?.includes(name)) {
      return "🦄"
    }
    if (["user", "person"]?.includes(name)) {
      return "👤"
    }
    if (["group", "team"]?.includes(name)) {
      return "👥"
    }
    if (["success", "check"]?.includes(name)) {
      return "✅"
    }
    if (["error", "stop"]?.includes(name)) {
      return "❌"
    }
    if (["warning", "alert"]?.includes(name)) {
      return "⚠️"
    }
    if (["time", "clock"]?.includes(name)) {
      return "⏰"
    }
    if (["star", "favorite"]?.includes(name)) {
      return "⭐"
    }
    if (["glowing star", "glowing favorite"]?.includes(name)) {
      return "🌟"
    }
    if (["question", "help"]?.includes(name)) {
      return "❓"
    }
    if (["video", "media"]?.includes(name)) {
      return "🎥"
    }
    if (["music", "audio"]?.includes(name)) {
      return "🎵"
    }
    if (["image", "picture"]?.includes(name)) {
      return "🖼️"
    }
    if (["email", "mail"]?.includes(name)) {
      return "✉️"
    }
    if (["computer", "laptop"]?.includes(name)) {
      return "💻"
    }
    if (["mobile", "phone"]?.includes(name)) {
      return "📱"
    }
    if (["world", "globe"]?.includes(name)) {
      return "🌍"
    }
    if (["rocket", "launch"]?.includes(name)) {
      return "🚀"
    }
    if (["pencil", "edit"]?.includes(name)) {
      return "✏️"
    }
    if (["search", "magnify"]?.includes(name)) {
      return "🔍"
    }
    if (["lock", "secure"]?.includes(name)) {
      return "🔒"
    }
    if (["unlock", "access"]?.includes(name)) {
      return "🔓"
    }
    if (["thumb-up", "like"]?.includes(name)) {
      return "👍"
    }
    if (["thumb-down", "dislike"]?.includes(name)) {
      return "👎"
    }
    if (["plus", "add"]?.includes(name)) {
      return "➕"
    }
    if (["seedling", "seed"]?.includes(name)) {
      return "🌱"
    }
    if (["undefined", "null", "question", "confused"]?.includes(name)) {
      return "❓"
      // return "🌫️"
    }
    if (["codex", "robot", "ai", "chatgpt"]?.includes(name)) {
      return "🤖"
    }
    if (["trash", "bin", "delete", "remove"]?.includes(name)) {
      return "🗑️"
    }
    if (["cash", "money"]?.includes(name)) {
      // return "💰"
      return "💵"
    }
    if (["money bag"]?.includes(name)) {
      return "💰"
    }
    if (["cyclone", "tornado"]?.includes(name)) {
      return "🌀"
    }
    if (["thingtime"]?.includes(name)) {
      if (Math.random() > 0.5) {
        return "🌳"
      }
      return "🌀"
    }
    if (["function", "lambda"]?.includes(name)) {
      return "📐"
    }
    if (["pin", "pinned", "located"]?.includes(name)) {
      return "📌"
    }

    if (["wrap", "wrapped"]?.includes(name)) {
      return "🎁"
      // return "🎀"
    }

    if (["dinosaur", "dino"]?.includes(name)) {
      return "🦕"
    }

    if (emojis?.includes(name)) {
      return name
    }

    if (["random"]?.includes(name)) {
      return emojis[Math.floor(Math.random() * emojis.length)]
    }

    // question mark
    return "❓"
  }, [name])

  return (
    <Center
      transition="all 0.2s ease-out"
      {...props}
      {...props?.chakras}
      fontSize={props?.size}
    >
      {icon}
    </Center>
  )
}