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 }