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>
  )
}