vue-emoji-to-icon

Universal emoji to Lucide icon converter for Vue 3. Automatically converts emojis and Korean keywords to beautiful Lucide icons.

✨ Features

• 🔄 140+ Emoji Mappings: Covers UI, TRPG, social, nature, food, and more
• 🇰🇷 Korean Keyword Support: Use Korean words like '집' (home), '사람' (user)
• 🎨 Fully Customizable: Size, color, stroke width, and more
• 🔌 Fallback System: Shows original emoji if no mapping exists
• 🌳 Tree-shakeable: Only bundles icons you actually use
• 🎯 Type Safe: Full TypeScript support
• 🪶 Lightweight: Minimal bundle size impact

📦 Installation

npm install vue-emoji-to-icon

🚀 Usage

Global Installation (Plugin)

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueEmojiToIcon from 'vue-emoji-to-icon'

const app = createApp(App)
app.use(VueEmojiToIcon)
app.mount('#app')

Component Import

<template>
  <div>
    <!-- Basic usage -->
    <EmojiToIcon emoji="🏠" />
    <EmojiToIcon emoji="👤" />
    <EmojiToIcon emoji="❤️" />
    
    <!-- With customization -->
    <EmojiToIcon 
      emoji="⭐" 
      :size="32" 
      color="gold" 
      :stroke-width="3" 
    />
    
    <!-- Korean keywords -->
    <EmojiToIcon emoji="집" />
    <EmojiToIcon emoji="사람" />
    <EmojiToIcon emoji="하트" />
    
    <!-- Fallback for unmapped emojis -->
    <EmojiToIcon emoji="🦄" :show-fallback="true" />
  </div>
</template>

<script>
import { EmojiToIcon } from 'vue-emoji-to-icon'

export default {
  components: {
    EmojiToIcon
  }
}
</script>

🎛️ Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | emoji | String | (required) | Emoji or Korean keyword to convert | | size | Number | 24 | Icon size in pixels | | color | String | 'currentColor' | Icon color | | fill | String | 'none' | Fill color | | strokeWidth | Number | 2 | Stroke width | | showFallback | Boolean | true | Show original emoji if no mapping | | iconClass | String | '' | CSS class for icon | | fallbackClass | String | 'emoji-fallback' | CSS class for fallback emoji |

📚 Emoji Mappings

UI & Navigation

• 🏠 → Home
• 👤 → User
• ⭐ → Star
• 🔍 → Search
• 💬 → MessageCircle
• ⚙️ → Settings
• ☰ → Menu
• ❌ → X

TRPG & Gaming

• 🎲 → Dice5
• ⚔️ → Sword
• 🛡️ → Shield
• 🏹 → BowArrow
• 🎯 → Target
• 📜 → Scroll
• ⚀⚁⚂⚃⚄⚅ → Dice1-6

Social & Communication

• ❤️ → Heart
• 👍 → ThumbsUp
• 👎 → ThumbsDown
• 📤 → Send
• 👀 → Eye
• 🔗 → Link

Nature & Weather

• ☀️ → Sun
• 🌙 → Moon
• ☁️ → Cloud
• 🔥 → Flame
• ❄️ → Snowflake

Korean Keywords

• 집 → Home
• 사람 → User
• 하트 → Heart
• 별 → Star
• 검색 → Search
• 메시지 → MessageCircle
• 설정 → Settings

[See full mapping list in source code]

💡 Why Use This?

Before (Raw Emojis)

<span class="icon">🏠</span>  <!-- Inconsistent rendering -->
<span class="icon">👤</span>  <!-- Different styles -->
<span class="icon">⭐</span>  <!-- Platform-dependent -->

After (EmojiToIcon)

<EmojiToIcon emoji="🏠" :size="16" />  <!-- Consistent Lucide icons -->
<EmojiToIcon emoji="👤" :size="16" />  <!-- Unified design language -->
<EmojiToIcon emoji="⭐" :size="16" />  <!-- Beautiful & customizable -->

🎨 Advanced Usage

Custom Styling

<template>
  <EmojiToIcon 
    emoji="⚔️"
    :size="48"
    color="red"
    :stroke-width="3"
    icon-class="my-custom-icon"
  />
</template>

<style>
.my-custom-icon {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
  transition: transform 0.2s;
}
.my-custom-icon:hover {
  transform: scale(1.1);
}
</style>

Dynamic Emoji Selection

<template>
  <div>
    <EmojiToIcon 
      v-for="emoji in emojiList" 
      :key="emoji"
      :emoji="emoji" 
      :size="24"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      emojiList: ['🏠', '👤', '⭐', '🔍', '💬']
    }
  }
}
</script>

📝 License

MIT

🤝 Contributing

Issues and PRs are welcome!

🔗 Related

• lucide-vue-next - Beautiful icon library
• Vue 3 - The Progressive JavaScript Framework

🙏 Credits

Built with Lucide Icons