fix: warn when using Nuxt Icon wrong in OG Images

Fixes #344

Author: harlan-zw

playground/components/OgImage/NuxtIcon.vue

@@ -21,8 +21,8 @@ const containerStyles = {
   <div :style="containerStyles">
     <div>{{ title }}</div>
     <div>{{ description }}</div>
-    <Icon name="carbon:book" size="250px" class="text-blue-500/30" style="margin: 0 auto;" />
-    <Icon name="carbon:star" size="250px" class="text-blue-500" style="margin: 0 auto;" />
-    <Icon name="uil:github" size="250px" class="text-blue-500" style="margin: 0 auto;" />
+    <Icon mode="svg" name="carbon:book" size="250px" class="size-30 text-blue-500/30" style="margin: 0 auto;" />
+    <Icon name="carbon:star" size="250px" class="size-30 text-blue-500" style="margin: 0 auto;" />
+    <Icon mode="svg" name="uil:github" size="250px" class="size-30 text-blue-500" style="margin: 0 auto;" />
   </div>
 </template>

src/runtime/server/og-image/satori/plugins/nuxt-icon.ts

@@ -0,0 +1,28 @@
+import type { VNode } from '../../../../types'
+import { logger } from '../../../util/logger'
+import { defineSatoriTransformer } from '../utils'
+
+export default defineSatoriTransformer([
+  // need to make sure parent div has flex for the emoji to render inline
+  {
+    filter: (node: VNode) =>
+      node.type === 'span' && node.props?.class?.includes('iconify'),
+    transform: (node: VNode, e) => {
+      if (import.meta.dev) {
+        logger.warn(`When using the Nuxt Icon components in \`${e.options.component}\` you must provide \`mode="svg"\` to ensure correct rendering.`)
+      }
+    },
+  },
+  // need to make sure parent div has flex for the emoji to render inline
+  {
+    filter: (node: VNode) =>
+      node.type === 'svg' && node.props?.class?.includes('iconify'),
+    transform: (node: VNode, e) => {
+      // strip classes
+      node.props.class = node.props.class
+        .split(' ')
+        .filter(c => !c.startsWith('iconify'))
+        .join(' ')
+    },
+  },
+])

src/runtime/server/og-image/satori/vnodes.ts

@@ -7,6 +7,7 @@ import emojis from './plugins/emojis'
 import encoding from './plugins/encoding'
 import flex from './plugins/flex'
 import imageSrc from './plugins/imageSrc'
+import nuxtIcon from './plugins/nuxt-icon'
 import unocss from './plugins/unocss'
 import { applyEmojis } from './transforms/emojis'
 import { applyInlineCss } from './transforms/inlineCss'
@@ -38,6 +39,7 @@ export async function createVNodes(ctx: OgImageRenderEventContext): Promise<VNod
     classes,
     flex,
     encoding,
+    nuxtIcon,
   ])
   // do async transforms
   await Promise.all(walkSatoriTree(ctx, satoriTree, [