fix

compiler/plugins/vue.plugin.js

@@ -26,8 +26,6 @@ module.exports = function vueCompilerPlugin() {
 
 function fixCleanupRefAst(ast) {
   if (ast.hooks && ast.hooks.onUnMount) {
-    console.log(ast.hooks);
-
     const onUnMountCode = ast.hooks.onUnMount.code;
 
     let updatedCode = onUnMountCode;
@@ -88,11 +86,5 @@ function fixCleanupRefAst(ast) {
 }
 
 function fixVueClassName(codeStr) {
-  return codeStr
-    .replace(/\.className/g, ".class")
-    .replace(/\bclassName\b/g, "class")
-    .replace(
-      /:class="boxStyles\.class"/g,
-      ':class="clsx(boxStyles.class, class)"',
-    );
+  return codeStr.replace(/\bprops\.className\b/g, "props.class");
 }

packages/vue/stories/core/Icon.stories.ts

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import Icon from "../../src/ui/icon/icon.vue";
+import Box from "../../src/ui/box/box.vue";
+import Text from "../../src/ui/text/text.vue";
+import { ALL_ICON_NAMES } from "../../src/ui/icon/icon.types";
+
+const meta: Meta<typeof Icon> = {
+  title: "Core/Icon",
+  component: Icon,
+  tags: ["autodocs"],
+  argTypes: {
+    name: {
+      control: "select",
+      options: ALL_ICON_NAMES,
+    },
+    size: {
+      control: "text",
+    },
+    color: {
+      control: "color",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Icon>;
+
+export const Primary: Story = {
+  args: {},
+  render: (args) => ({
+    components: { Icon, Box, Text },
+    setup() {
+      return { args, ALL_ICON_NAMES };
+    },
+    template: `
+      <div
+        style="
+          display: grid;
+          grid-auto-rows: min-content;
+          grid-auto-flow: row dense;
+          grid-auto-columns: minmax(0, 1fr);
+          grid-template-columns: repeat(4, minmax(0, 1fr));
+          row-gap: 40px;
+        "
+      >
+        <Box
+          v-for="iconName in ALL_ICON_NAMES"
+          :key="iconName"
+          display="inline-flex"
+          flexDirection="column"
+          justifyContent="center"
+          alignItems="center"
+          maxWidth="200px"
+          color="$text"
+          fontSize="$xl"
+        >
+          <Icon :name="iconName" v-bind="args" fontSize="inherit" />
+          <Text
+            :attributes="{
+              mt: '$4',
+              display: 'inline-block',
+            }"
+          >
+            {{ iconName }}
+          </Text>
+        </Box>
+      </div>
+    `,
+  }),
+};

src/ui/box/box.lite.tsx

@@ -16,30 +16,26 @@ export default function Box(props: BoxProps) {
   const state = useStore<{
     comp: string;
     boxStyles: {
-      className: string;
+      combinedClassName: string;
       style: Record<string, unknown>;
       passThroughProps: Record<string, unknown>;
     };
     finalPassThroughProps: Record<string, unknown>;
-    combinedClassName: string;
   }>({
     get comp() {
       return props.as ?? DEFAULT_VALUES.as;
     },
     get finalPassThroughProps() {
       return state.boxStyles.passThroughProps;
     },
-    get combinedClassName() {
-      return clsx(state.boxStyles.className, props.className);
-    },
     get boxStyles() {
       const sprinklesObj = rainbowSprinkles({
         ...omit(props, ["attributes", "as", "boxRef"]),
         ...props.attributes,
       });
 
       return {
-        className: clsx(sprinklesObj.className, props.className),
+        combinedClassName: clsx(sprinklesObj.className, props.className),
         style: sprinklesObj.style,
         passThroughProps: omit(sprinklesObj.otherProps, [
           "attributes",
@@ -53,7 +49,7 @@ export default function Box(props: BoxProps) {
 
   return (
     <state.comp
-      className={state.combinedClassName}
+      className={state.boxStyles.combinedClassName}
       style={{
         ...state.boxStyles.style,
         ...props.attributes?.style,

src/ui/icon/icon.lite.tsx

@@ -1,4 +1,4 @@
-import { Show, useMetadata } from "@builder.io/mitosis";
+import { Show, useMetadata, useStore } from "@builder.io/mitosis";
 import Box from "../box";
 import { IconProps } from "./icon.types";
 
@@ -9,17 +9,25 @@ useMetadata({
 });
 
 export default function Icon(props: IconProps) {
+  const state = useStore({
+    get spreadAttributes() {
+      return {
+        ...props.attributes,
+        ...props.domAttributes,
+      };
+    },
+  });
+
   return (
     <Box
+      {...state.spreadAttributes}
       as="svg"
       width="1em"
       height="1em"
       fill="currentColor"
       fontSize={props.size}
       color={props.color}
       className={props.className}
-      {...props.attributes}
-      {...props.domAttributes}
     >
       <Show when={!!props.title}>
         <title>{props.title}</title>