@vc-shell/framework 1.1.58 → 1.1.60

package/ui/components/atoms/vc-icon/vc-fontawesome-icon.vue

@@ -1,15 +1,18 @@
 <template>
-  <Icon
-    :icon="iconName"
-    :class="['vc-fa-icon', !hasCustomSize && `vc-fa-icon--${size}`, variant ? `vc-fa-icon--${variant}` : '']"
+  <i
+    :class="[
+      'vc-fa-icon',
+      !hasCustomSize && `vc-fa-icon--${size}`,
+      iconClasses,
+      variant ? `vc-fa-icon--${variant}` : '',
+    ]"
     :style="mergedStyle"
     aria-hidden="true"
-  />
+  ></i>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import { Icon } from "@iconify/vue";
 import type { IconSize, IconVariant } from "./types";
 import { useIcon } from "./composables";
 
@@ -62,40 +65,31 @@ const mergedStyle = computed(() => {
   return styles;
 });
 
-const iconName = computed(() => {
-  const iconParts = props.icon.split(" ");
-  let style = "solid";
-  let name = props.icon;
-
-  if (iconParts.length > 1) {
-    const prefix = iconParts[0];
-    name = iconParts.slice(1).join(" ").replace("fa-", "");
-
-    switch (prefix) {
-      case "fas":
-        style = "solid";
-        break;
-      case "far":
-        style = "regular";
-        break;
-      case "fab":
-        style = "brands";
-        break;
-      case "fal":
-        style = "light";
-        break;
-      case "fad":
-        style = "duotone";
-        break;
-      default:
-        // Use the already processed name from slice(1), not the original props.icon
-        break;
-    }
-  } else {
-    name = name.replace("fa-", "");
+// Compute the FontAwesome class from the icon string
+const iconClasses = computed(() => {
+  // If icon already has a style prefix (fas, far, fal, fab), use it as is
+  if (
+    props.icon.startsWith("fas ") ||
+    props.icon.startsWith("far ") ||
+    props.icon.startsWith("fal ") ||
+    props.icon.startsWith("fab ") ||
+    props.icon.startsWith("fad ")
+  ) {
+    return props.icon;
   }
 
-  return `fa-${style}:${name}`;
+  // If icon starts with fa-, add the default style prefix
+  if (props.icon.startsWith("fa-")) {
+    return `fas ${props.icon}`;
+  }
+
+  // If icon contains fa- but doesn't start with a style prefix, assume the style prefix is included
+  if (props.icon.includes("fa-")) {
+    return props.icon;
+  }
+
+  // Otherwise, assume it's a bare icon name and add both the style prefix and fa- prefix
+  return `fas fa-${props.icon}`;
 });
 </script>
 

package/ui/components/atoms/vc-icon/vc-icon.vue

@@ -110,6 +110,16 @@ const sizeMap = {
   xxxl: 64,
 } as const;
 
+// Scaling factors for different icon types to make them visually equal
+const scalingFactors = {
+  fontawesome: 1, // base reference
+  material: 1.1,
+  bootstrap: 0.95,
+  lucide: 1.2,
+  custom: 1,
+  svg: 1,
+};
+
 // Function to detect icon type if not explicitly specified
 const detectIconType = computed((): IconType => {
   if (typeof props.icon !== "string") {
@@ -152,16 +162,16 @@ const normalizedIconName = computed(() => {
     return props.icon;
   }
 
-  const type = detectIconType.value;
+  if (detectIconType.value === "material" && props.icon.startsWith("material-")) {
+    return props.icon.replace(/^material-/, "");
+  }
 
-  switch (type) {
-    case "material":
-      return props.icon.replace(/^material-/, "");
-    case "lucide":
-      return props.icon.replace(/^lucide-/, "");
-    default:
-      return props.icon;
+  if (detectIconType.value === "lucide" && props.icon.startsWith("lucide-")) {
+    const baseName = props.icon.replace(/^lucide-/, "");
+    return baseName.endsWith("Icon") ? baseName : `${baseName}Icon`;
   }
+
+  return props.icon;
 });
 
 // Check if icon is a Material Design symbol
@@ -176,7 +186,7 @@ const isLucideIcon = computed(() => detectIconType.value === "lucide");
 // Check if icon is a Font Awesome Icon
 const isFontAwesomeIcon = computed(() => detectIconType.value === "fontawesome");
 
-// Check if icon is a component or can be resolved as a component
+// Check if the icon is a component or can be resolved as a component
 const isCustomIcon = computed(() => {
   if (typeof props.icon !== "string") {
     return true; // Component instance passed directly
@@ -191,13 +201,25 @@ const isCustomIcon = computed(() => {
     return false;
   }
 
-  // For Lucide icons, assume they can be resolved (safer approach)
+  // Check for Lucide icons - they could be resolved as components
   if (isLucideIcon.value) {
-    return true; // Assume Lucide icons are available as components
+    try {
+      const iconName =
+        typeof normalizedIconName.value === "string" ? normalizedIconName.value : String(normalizedIconName.value);
+      const resolved = resolveComponent(iconName);
+      return resolved !== iconName;
+    } catch (e) {
+      return false;
+    }
   }
 
-  // For other cases, assume it's not a component to avoid resolveComponent calls
-  return false;
+  // Check if string is a component name that can be resolved
+  try {
+    const resolved = resolveComponent(props.icon);
+    return resolved !== props.icon; // If resolved is different from original string, it's a component name
+  } catch (e) {
+    return false;
+  }
 });
 
 // Get the component instance for rendering
@@ -211,14 +233,15 @@ const safeIcon = computed(() => {
     return "i";
   }
 
-  // For Lucide icons, return the normalized name directly
-  if (isLucideIcon.value) {
+  // Try to resolve component by name (mostly for Lucide icons)
+  try {
     const iconName =
       typeof normalizedIconName.value === "string" ? normalizedIconName.value : String(normalizedIconName.value);
-    return iconName; // Let Vue handle component resolution in template
+    const resolved = resolveComponent(iconName);
+    return resolved !== iconName ? resolved : "i"; // Return resolved component or fallback to 'i'
+  } catch (e) {
+    return "i";
   }
-
-  return "i";
 });
 
 // Determine which component to render
@@ -292,32 +315,82 @@ const containerStyle = computed(() => {
 
 // Prepare props for the rendered component
 const componentProps = computed(() => {
-  const type = detectIconType.value;
-
-  switch (type) {
-    case "lucide":
-    case "material":
-    case "bootstrap":
-    case "fontawesome":
-      return { icon: normalizedIconName.value, size: props.size, variant: props.variant, customSize: props.customSize };
-    case "svg":
-      return {
-        icon: svgPath.value,
-        size: props.size,
-        variant: props.variant,
-        strokeWidth: 1.5,
-        customSize: props.customSize, // Set custom size without scaling
-        basePath: props.basePath,
-      };
-    default:
-      // For custom components, no extra props needed
-      return {
-        size: props.size,
-        width: calculatedSize.value,
-        height: calculatedSize.value,
-        color: props.variant ? `var(--icon-color-${props.variant})` : "currentColor",
-      };
+  if (isMaterialIcon.value) {
+    // Clean the name from possible suffixes of the icon type
+    const cleanIconName =
+      typeof normalizedIconName.value === "string"
+        ? normalizedIconName.value.replace(/-outlined$|-rounded$|-sharp$/, "")
+        : normalizedIconName.value;
+
+    return {
+      icon: cleanIconName,
+      size: props.size,
+      variant: props.variant,
+      type: "outlined",
+      fill: 0,
+      weight: 300,
+      grade: 0,
+      customSize: props.customSize, // Set custom size without scaling
+    };
+  }
+
+  if (isBootstrapIcon.value) {
+    // For Bootstrap icons
+    const iconName = typeof props.icon === "string" ? props.icon : "";
+
+    return {
+      icon: iconName,
+      size: props.size,
+      variant: props.variant,
+      customSize: props.customSize, // Set custom size without scaling
+    };
+  }
+
+  if (isLucideIcon.value) {
+    // For Lucide icons
+    const iconName =
+      typeof normalizedIconName.value === "string" ? normalizedIconName.value : String(normalizedIconName.value);
+
+    return {
+      icon: iconName,
+      size: props.size,
+      variant: props.variant,
+      strokeWidth: 1.5,
+      customSize: props.customSize, // Set custom size without scaling
+    };
+  }
+
+  if (isFontAwesomeIcon.value) {
+    // For Font Awesome icons
+    return {
+      icon: typeof props.icon === "string" ? props.icon : "",
+      size: props.size,
+      variant: props.variant,
+      customSize: props.customSize, // Set custom size without scaling
+    };
+  }
+
+  if (isSvgIcon.value) {
+    return {
+      icon: svgPath.value,
+      size: props.size,
+      variant: props.variant,
+      strokeWidth: 1.5,
+      customSize: props.customSize, // Set custom size without scaling
+      basePath: props.basePath,
+    };
   }
+
+  if (isCustomIcon.value) {
+    return {
+      size: props.size,
+      width: calculatedSize.value,
+      height: calculatedSize.value,
+      color: props.variant ? `var(--icon-color-${props.variant})` : "currentColor",
+    };
+  }
+
+  return {};
 });
 
 // Check if icon is an SVG icon
@@ -461,4 +534,74 @@ const svgPath = computed(() => {
   min-height: calc(var(--icon-size-xxxl) * 1.33);
   font-size: var(--icon-size-xxxl); /* Set font-size for the container */
 }
+
+/* Material Icons specific styles */
+.material-symbols-outlined,
+.material-symbols-rounded,
+.material-symbols-sharp {
+  font-family: "Material Symbols Outlined";
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: "liga";
+  -webkit-font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Bootstrap Icons specific styles */
+[class^="bi-"],
+[class*=" bi-"] {
+  font-family: bootstrap-icons !important;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Font Awesome Icons */
+[class^="fa-"],
+[class*=" fa-"],
+[class~="fas"],
+[class~="far"],
+[class~="fal"],
+[class~="fab"],
+[class~="fad"] {
+  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Duotone", "Font Awesome 6 Pro";
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Font weight adjustments for Font Awesome */
+.fas,
+.fa-solid {
+  font-weight: 900;
+}
+
+.far,
+.fa-regular {
+  font-weight: 400;
+}
+
+.fal,
+.fa-light {
+  font-weight: 300;
+}
+
+.fab,
+.fa-brands {
+  font-family: "Font Awesome 6 Brands";
+}
 </style>

package/ui/components/atoms/vc-icon/vc-lucide-icon.vue

@@ -1,6 +1,7 @@
 <template>
-  <Icon
-    :icon="iconName"
+  <component
+    :is="resolvedIconComponent"
+    v-if="resolvedIconComponent"
     :class="[
       'vc-lucide-icon',
       !hasCustomSize && `vc-lucide-icon--${size}`,
@@ -9,12 +10,18 @@
     :style="computedStyle"
     aria-hidden="true"
   />
+  <span
+    v-else
+    :class="['vc-lucide-icon', !hasCustomSize && `vc-lucide-icon--${size}`]"
+  >
+    <i class="vc-lucide-icon__fallback">❓</i>
+  </span>
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
-import { Icon } from "@iconify/vue";
+import { computed, markRaw, onMounted, ref } from "vue";
 import type { IconSize, IconVariant } from "./types";
+import type { Component } from "vue";
 import { useIcon } from "./composables";
 
 interface Props {
@@ -33,6 +40,11 @@ interface Props {
    */
   variant?: IconVariant;
 
+  /**
+   * Stroke width for SVG
+   */
+  strokeWidth?: number;
+
   /**
    * Custom size in pixels
    */
@@ -41,11 +53,15 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   size: "m",
+  strokeWidth: 1.5,
 });
 
 // Check if using custom size to conditionally apply CSS class
 const hasCustomSize = computed(() => typeof props.customSize === "number" && props.customSize > 0);
 
+// Component reference for Lucide icon
+const resolvedIconComponent = ref<Component | null>(null);
+
 // Use the shared icon composable for consistent scaling
 const { iconStyle } = useIcon({
   type: "lucide",
@@ -54,40 +70,71 @@ const { iconStyle } = useIcon({
   customSize: props.customSize,
 });
 
+// Normalize the icon name for Lucide
+const normalizedIconName = computed(() => {
+  if (!props.icon) return "HelpCircleIcon";
+
+  // Handle removal of lucide- prefix
+  let name = props.icon;
+  if (name.startsWith("lucide-")) {
+    name = name.substring(7);
+  }
+
+  // Ensure name ends with 'Icon'
+  if (!name.endsWith("Icon")) {
+    name = `${name}Icon`;
+  }
+
+  // Convert to PascalCase if kebab-case
+  if (name.includes("-")) {
+    name = name
+      .split("-")
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join("");
+  }
+
+  // Ensure first letter is capitalized
+  return name.charAt(0).toUpperCase() + name.slice(1);
+});
+
 // Combine the shared icon styles with Lucide-specific settings
 const computedStyle = computed(() => {
   const styles = { ...iconStyle.value };
 
+  if (props.strokeWidth) {
+    styles.strokeWidth = props.strokeWidth.toString();
+  }
+
   // If using custom size, make sure size is applied with !important
-  // if (hasCustomSize.value) {
-  //   if (styles.width) styles.width = `${styles.width.replace("px", "")}px !important`;
-  //   if (styles.height) styles.height = `${styles.height.replace("px", "")}px !important`;
-  // }
+  if (hasCustomSize.value) {
+    if (styles.width) styles.width = `${styles.width.replace("px", "")}px !important`;
+    if (styles.height) styles.height = `${styles.height.replace("px", "")}px !important`;
+  }
 
   return styles;
 });
 
-const iconName = computed(() => {
-  let name = props.icon;
-
-  // Convert from PascalCaseIcon or kebab-caseIcon to kebab-case.
-  name = name.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-
-  if (name.endsWith("-icon")) {
-    name = name.slice(0, -5);
+// Dynamically import the Lucide icon
+onMounted(async () => {
+  try {
+    // Import from lucide-vue-next
+    const module = await import("lucide-vue-next");
+
+    // Get the icon component safely with type checking
+    const iconName = normalizedIconName.value;
+    if (module && typeof module === "object" && iconName in module) {
+      resolvedIconComponent.value = markRaw(module[iconName as keyof typeof module] as Component);
+    } else {
+      console.warn(`Lucide icon not found: ${iconName}`);
+    }
+  } catch (error) {
+    console.error(`Error loading Lucide icon: ${normalizedIconName.value}`, error);
   }
-
-  return `lucide:${name}`;
 });
 </script>
 
 <style lang="scss">
 .vc-lucide-icon {
-  & g,
-  & path {
-    stroke-width: var(--vc-lucide-icon-stroke-width, 1.5);
-  }
-
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/ui/components/atoms/vc-icon/vc-material-icon.vue

@@ -1,26 +1,26 @@
 <template>
-  <Icon
-    v-if="finalIconName"
-    :icon="finalIconName"
+  <span
     :class="[
       'vc-material-icon',
+      'material-symbols-' + type,
       !hasCustomSize && `vc-material-icon--${size}`,
       variant ? `vc-material-icon--${variant}` : '',
     ]"
-    :style="computedStyle"
+    :style="iconStyle"
     aria-hidden="true"
-  />
+  >
+    {{ icon }}
+  </span>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, computed } from "vue";
-import { Icon, loadIcon } from "@iconify/vue";
+import { computed } from "vue";
 import type { IconSize, IconVariant } from "./types";
 import { useIcon } from "./composables";
 
 interface Props {
   /**
-   * Material icon name
+   * Material icon name (e.g., "home", "settings", "account_circle")
    */
   icon: string;
 
@@ -29,6 +29,11 @@ interface Props {
    */
   size?: IconSize;
 
+  /**
+   * Type of the Material icon (outlined, rounded, sharp)
+   */
+  type?: "outlined" | "rounded" | "sharp";
+
   /**
    * Icon color variant
    */
@@ -42,57 +47,36 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   size: "m",
+  type: "outlined",
 });
 
-// Check if using custom size to conditionally apply CSS class
 const hasCustomSize = computed(() => typeof props.customSize === "number" && props.customSize > 0);
 
-// Use the shared icon composable for consistent scaling
 const { iconStyle } = useIcon({
   type: "material",
   size: props.size,
   variant: props.variant,
   customSize: props.customSize,
 });
-
-const finalIconName = ref("");
-
-watch(
-  () => props.icon,
-  (icon) => {
-    const collection = "material-symbols-light";
-
-    const cleanIconName = icon.replace(/_/g, "-");
-    const baseIcon = `${collection}:${cleanIconName}`;
-    const outlineIcon = `${collection}:${cleanIconName}-outline`;
-
-    loadIcon(outlineIcon)
-      .then(() => {
-        finalIconName.value = outlineIcon;
-      })
-      .catch(() => {
-        finalIconName.value = baseIcon;
-      });
-  },
-  { immediate: true },
-);
-
-// Combine the shared icon styles with Material-specific settings
-const computedStyle = computed(() => {
-  const styles = { ...iconStyle.value };
-
-  // font-variation-settings is not applicable for SVG icons
-  // If using custom size, make sure fontSize is applied with !important
-  if (hasCustomSize.value && styles.fontSize) {
-    styles.fontSize = `${styles.fontSize.replace("px", "")}px !important`;
-  }
-
-  return styles;
-});
 </script>
 
 <style lang="scss">
 .vc-material-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-feature-settings: "liga"; // Enable ligatures for icons
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+
+  // Sizes
   &--xs {
     font-size: var(--icon-size-xs);
   }
@@ -121,6 +105,7 @@ const computedStyle = computed(() => {
     font-size: var(--icon-size-xxxl);
   }
 
+  // Variants
   &--warning {
     color: var(--icon-color-warning);
   }
@@ -133,4 +118,11 @@ const computedStyle = computed(() => {
     color: var(--icon-color-success);
   }
 }
+
+// Base class provided by the @material-symbols/font-300 package
+.material-symbols-outlined,
+.material-symbols-rounded,
+.material-symbols-sharp {
+  font-family: "Material Symbols Outlined", "Material Symbols Rounded", "Material Symbols Sharp";
+}
 </style>