fix: add inline-block for icon classes, with transformer

Author: danielroe

uno-transformer-icon-inline-block.ts

@@ -0,0 +1,27 @@
+import type { SourceCodeTransformer } from 'unocss'
+
+/**
+ * Transformer that automatically adds `inline-block` next to any icon class
+ * (`i-*`) in the source code, so the class appears in the rendered HTML.
+ */
+export function transformerIconInlineBlock(): SourceCodeTransformer {
+  return {
+    name: 'icon-inline-block',
+    enforce: 'pre',
+    transform(s) {
+      const code = s.original
+      // Match icon classes like i-lucide-star, i-mdi-home, i-custom-vlt etc.
+      const iconClassRe = /\bi-[\w:-]+/g
+      let match: RegExpExecArray | null
+
+      while ((match = iconClassRe.exec(code)) !== null) {
+        const end = match.index + match[0].length
+        // Skip if `inline-block` already follows (with optional whitespace)
+        if (/^\s+inline-block\b/.test(code.slice(end))) {
+          continue
+        }
+        s.appendRight(end, ' inline-block')
+      }
+    },
+  }
+}

uno.config.ts

@@ -8,6 +8,7 @@ import {
 import type { Theme } from '@unocss/preset-wind4/theme'
 import { presetRtl } from './uno-preset-rtl'
 import { presetA11y } from './uno-preset-a11y'
+import { transformerIconInlineBlock } from './uno-transformer-icon-inline-block'
 
 const customIcons = {
   'agent-skills':
@@ -23,7 +24,6 @@ export default defineConfig({
     presetWind4(),
     presetIcons({
       extraProperties: {
-        'display': 'inline-block',
         'forced-color-adjust': 'preserve-parent-color',
       },
       warn: true,
@@ -40,7 +40,7 @@ export default defineConfig({
       exclude: [/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/, /[/\\]node_modules[/\\]/],
     },
   },
-  transformers: [transformerDirectives(), transformerVariantGroup()],
+  transformers: [transformerDirectives(), transformerVariantGroup(), transformerIconInlineBlock()],
   theme: {
     spacing: { DEFAULT: '4px' },
     font: {