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