/ web / .vitepress / configs / emoji.ts
emoji.ts
 1  import type { MarkdownRenderer } from "vitepress";
 2  import type { IconifyJSON } from "@iconify-json/octicon";
 3  
 4  // Icons that need to be used should be imported here
 5  import { icons as mdi } from "@iconify-json/mdi";
 6  import { icons as octicon } from "@iconify-json/octicon";
 7  // 1. Install emoji pack with `pnpm add -g @iconify-json/<icon>`
 8  // 2. Import them like I did above
 9  // 3. Add it to this emojis array, like I did for octicon, and add a prefix
10  const emojis: { pack: IconifyJSON; prefix?: string }[] = [
11    // octicon emojis, prefixed with "octicon-"
12    { pack: octicon, prefix: "octicon-" },
13    { pack: mdi, prefix: "mdi-" },
14  ];
15  
16  const defs: Record<string, string> = {};
17  
18  for (const elem of emojis) {
19    for (const key in elem.pack.icons) {
20      if (elem.prefix) defs[elem.prefix + key] = "";
21      else defs[key] = "";
22    }
23  }
24  
25  export { defs };
26  
27  export function emojiRender(md: MarkdownRenderer) {
28    md.renderer.rules.emoji = (tokens, idx) => {
29      for (const emoji of emojis) {
30        if (tokens[idx].markup.startsWith(emoji.prefix!)) {
31          return `<span class="i-${tokens[idx].markup}"></span>`;
32        }
33      }
34  
35      return `<span class="i-twemoji-${tokens[idx].markup}"></span>`;
36    };
37  }