chore: add definition info

README.md

@@ -13,6 +13,7 @@ Introducing a Nuxt module for implementing Twemoji in a Nuxt application
 
 ## Features
 - Nuxt 3 ready
+- Emoji 14.0 support
 - Get emoji by character
 - Get emoji by codepoint
 - SVG rendering by default
@@ -47,7 +48,7 @@ That's it! You can now use `nuxt-twemoji` in your Nuxt app ✨
 
 ## Usage
 
-1. Find emojis from the recommended unicode emoji list: https://unicode.org/emoji/charts/full-emoji-list.html
+1. Find emojis from the recommended unicode emoji list: https://unicode.org/emoji/charts-14.0/full-emoji-list.html
 
 2. In the project, use the component `<Twemoji emoji="" />`, where `emoji` is the emoji character or codepoint.
 3. If you employ SSR (Server Side Rendering) in your Nuxt application, this module will inject the emoji `<svg>` or `<img>` element into the output code during your project's build/generate process. Alternatively, if SSR is not used, the emojis will dynamically render during client runtime.
@@ -85,6 +86,17 @@ or
 <Twemoji emoji="U+1F60A" />
 ```
 
+Use the emoji property to render an emoji by definition.
+```html
+<script setup>
+import { twSmilingFaceWithSmilingEyes } from './node_modules/nuxt-twemoji/dist/runtime/assets/emojis'
+</script>
+
+<template>
+  <Twemoji :emoji="twSmilingFaceWithSmilingEyes" />
+</template>
+```
+
 ### More examples
 Check out the [🏀 Online playground](https://stackblitz.com/github/yizack/nuxt-twemoji?file=playground%2Fapp.vue) for more examples.
 

package.json

@@ -30,6 +30,7 @@
     "prepack": "nuxt-module-build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
+    "dev:generate": "nuxi generate playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
     "pack": "npm run lint && npm run test && npm run prepack",
     "release": "npm run pack && changelogen --release && npm run release:publish",
@@ -38,7 +39,8 @@
     "release:publish": "npm publish && git push --follow-tags",
     "lint": "eslint .",
     "test": "vitest run",
-    "test:watch": "vitest watch"
+    "test:watch": "vitest watch",
+    "emojis": "node ./scripts/generateEmojis.js"
   },
   "dependencies": {
     "@nuxt/kit": "^3.5.1"
@@ -61,4 +63,4 @@
       "domain": "github.com"
     }
   }
-}
+}

playground/app.vue

@@ -19,6 +19,16 @@
 </template>
 
 <script>
+import {
+  twOrangeHeart,
+  twFuelPump,
+  twFaceWithRollingEyes,
+  twBoy,
+  twGirl,
+  twStar,
+  twPoliceCarLight
+} from "./../src/runtime/assets/emojis";
+
 export default {
   data() {
     return {
@@ -29,7 +39,32 @@ export default {
         },
         {
           name: "Code Point",
-          emojis: ['2764', '1f618', 'U+231B', 'u+1f60e', '1F44D-1F3FF', '1F9D1-200D-1F4BB', '1F9D1-1F3FB-200D-1F393', '1F408-200D-2B1B']
+          emojis: [
+            '2764',
+            '1f618',
+            'U+231B', 
+            'u+1f60e',
+            '1F44D-1F3FF',
+            '1F9D1-200D-1F4BB',
+            '1F9D1-1F3FB-200D-1F393',
+            '1F408-200D-2B1B'
+          ]
+        },
+        {
+          name: "Object",
+          emojis: [
+            twOrangeHeart,
+            twFuelPump,
+            twFaceWithRollingEyes,
+            twBoy,
+            twGirl,
+            twStar,
+            twPoliceCarLight
+          ]
+        },
+        {
+          name: "Error",
+          emojis: ['1234']
         }
       ]
     }
@@ -38,11 +73,8 @@ export default {
 </script>
 
 <style scoped>
-* {
-  font-family: Arial;
-}
-
 table {
+  font-family: Arial;
   border-collapse: collapse;
   border-spacing: 0;
   border: 1px solid #ccc;