@imaginario27/air-ui-ds 1.0.23 → 1.1.1

package/components/buttons/ActionIconButton.vue

@@ -18,21 +18,14 @@
         :disabled="disabled"
         
     >
-        <MdiIcon
-            v-if="icon && !svgIcon"
-            :icon
-            preserveAspectRatio="xMidYMid meet"
-            :class="[iconSizeClass, iconClass]"
+        <Icon 
+            :name="icon"
+            :iconClass="[
+                iconSizeClass, 
+                iconColorClass, 
+                iconClass ? iconClass : ''
+            ]"
         />
-        <span
-            v-else-if="svgIcon"
-            :class="[iconSizeClass, iconClass]"
-        >
-            <SVGImage
-                :src="svgIcon"
-                :color="resolvedSvgIconColor"
-            />
-        </span>
     </component>
 </template>
 
@@ -69,13 +62,8 @@ const props = defineProps({
         validator: (value: ButtonSize) => Object.values(ButtonSize).includes(value),
     },
     icon: {
-        type: String as PropType<any>,
-        default: "mdiHelp"
-    },
-    svgIcon: String as PropType<string>,
-    useSVGIconColor: {
-        type: Boolean as PropType<boolean>,
-        default: false
+        type: String as PropType<string>,
+        default: "mdi:help"
     },
     iconClass: String as PropType<string>,
     disabled: {
@@ -242,38 +230,22 @@ const iconSizeClass = computed(() => {
     return variant[props.size as ButtonSize] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
 })
 
-const svgIconColorClass = computed(() => {
+const iconColorClass = computed(() => {
     const variant = {
-        [ButtonStyleType.PRIMARY_BRAND_FILLED]: 'text-text-neutral-on-filled',
-        [ButtonStyleType.PRIMARY_BRAND_SOFT]: 'text-icon-primary-brand-on-soft-bg',
-        [ButtonStyleType.PRIMARY_BRAND_TRANSPARENT]: [
-            'text-text-primary-brand-default',
-            !props.disabled && 'hover:text-text-primary-brand-hover',
-        ],
-        [ButtonStyleType.SECONDARY_BRAND_FILLED]: 'text-text-neutral-on-filled',
-        [ButtonStyleType.NEUTRAL_FILLED]: 'text-text-neutral-on-neutral-filled-bg',
-        [ButtonStyleType.NEUTRAL_OUTLINED]: 'text-text-default',
-        [ButtonStyleType.NEUTRAL_TRANSPARENT]: 'text-text-default',
-        [ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE]: 'text-text-neutral-subtler',
-        [ButtonStyleType.DELETE_FILLED]: 'text-text-neutral-on-filled',
-        [ButtonStyleType.DELETE_SOFT]: 'text-text-delete',
-        [ButtonStyleType.DELETE_OUTLINED]: 'text-text-delete',
-        [ButtonStyleType.DELETE_TRANSPARENT]: 'text-text-delete',
+        [ButtonStyleType.PRIMARY_BRAND_FILLED]: '!text-text-neutral-on-filled',
+        [ButtonStyleType.PRIMARY_BRAND_SOFT]: '!text-icon-primary-brand-on-soft-bg',
+        [ButtonStyleType.PRIMARY_BRAND_TRANSPARENT]: '!text-text-primary-brand-default',
+        [ButtonStyleType.SECONDARY_BRAND_FILLED]: '!text-text-neutral-on-filled',
+        [ButtonStyleType.NEUTRAL_FILLED]: '!text-text-neutral-on-neutral-filled-bg',
+        [ButtonStyleType.NEUTRAL_OUTLINED]: '!text-text-default',
+        [ButtonStyleType.NEUTRAL_TRANSPARENT]: '!text-text-default',
+        [ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE]: '!text-text-neutral-subtler',
+        [ButtonStyleType.DELETE_FILLED]: '!text-text-neutral-on-filled',
+        [ButtonStyleType.DELETE_SOFT]: '!text-text-delete',
+        [ButtonStyleType.DELETE_OUTLINED]: '!text-text-delete',
+        [ButtonStyleType.DELETE_TRANSPARENT]: '!text-text-delete',
     }
-    return variant[props.styleType as ButtonStyleType] || 'text-text-default'
-})
-
-// Computed functions
-const resolvedSvgIconColor = computed(() => {
-    if (props.useSVGIconColor) return undefined
-
-    const val = svgIconColorClass.value
-
-    if (Array.isArray(val)) {
-        return val.filter(Boolean).join(' ')
-    }
-
-    return val
+    return variant[props.styleType as ButtonStyleType] || '!text-text-default'
 })
 
 // Props for the dynamic component

package/components/buttons/AlertButton.vue

@@ -18,26 +18,21 @@
             ...(actionType === ButtonActionType.ACTION ? { onClick: emitClick } : {})
         }"
         :disabled
-        
     >
         <!-- Left icon -->
-        <MdiIcon
+        <Icon 
             v-if="iconPosition === IconPosition.LEFT"
-            :icon
-            size="20"
-            preserveAspectRatio="xMidYMid meet"
-            class="min-w-[20px]"
+            :name="icon"
+            :iconClass="textIconClass"
         />
         <span :class="[ 'font-semibold' ]">
             {{ text }}
         </span>
         <!-- Right icon -->
-        <MdiIcon
+        <Icon
             v-if="iconPosition === IconPosition.RIGHT"
-            :icon
-            size="20"
-            preserveAspectRatio="xMidYMid meet"
-            class="min-w-[20px]"
+            :name="icon"
+            :iconClass="textIconClass"
         />
     </component>
 </template>
@@ -68,8 +63,8 @@ const props = defineProps({
         default: 'Button text'
     },
     icon: {
-        type: String as PropType<any>,
-        default: "mdiHelp"
+        type: String as PropType<string>,
+        default: "mdi:help"
     },
     iconPosition: {
         type: String as PropType<IconPosition>,

package/components/buttons/AlertIconButton.vue

@@ -18,11 +18,10 @@
         }"
         :disabled
     >
-        <MdiIcon
-            :icon
-            size="20"
-            preserveAspectRatio="xMidYMid meet"
-            class="min-w-[20px]"
+        <Icon 
+            v-if="icon"
+            :name="icon"
+            :iconClass
         />
     </component>
 </template>
@@ -53,8 +52,8 @@ const props = defineProps({
         default: 'Button text'
     },
     icon: {
-        type: String as PropType<any>,
-        default: "mdiHelp"
+        type: String as PropType<string>,
+        default: "mdi:help"
     },
     disabled: {
         type: Boolean as PropType<boolean>,

package/components/buttons/CopyButton.vue

@@ -83,8 +83,8 @@ const props = defineProps({
         validator: (value: ButtonSize) => Object.values(ButtonSize).includes(value),
     },
     icon: {
-        type: String as PropType<any>,
-        default: "mdiContentCopy",
+        type: String as PropType<string>,
+        default: "mdi:content-copy",
     },
     iconPosition: {
         type: String as PropType<IconPosition>,
@@ -114,7 +114,7 @@ const handleCopy = useThrottleFn(
         const success = await copyToClipboard(props.textToCopy)
 
         if (success) {
-            currentCopyButtonIcon.value = 'mdiCheck'
+            currentCopyButtonIcon.value = 'mdi:check-circle-outline'
             currentCopyButtonText.value = props.copySuccessText
 
             if (
@@ -133,7 +133,7 @@ const handleCopy = useThrottleFn(
 
             emit('success')
         } else {
-            currentCopyButtonIcon.value = 'mdiAlertCircleOutline'
+            currentCopyButtonIcon.value = 'mdi:alert-circle-outline'
             currentCopyButtonText.value = props.copyErrorText
 
             if (props.showToast) {

package/components/buttons/options/OptionButton.vue

@@ -29,8 +29,8 @@ const props = defineProps({
         default: ButtonStyleType.NEUTRAL_OUTLINED,
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp',
+        type: String as PropType<string>,
+        default: 'mdi:help',
     },
     iconPosition: {
         type: String as PropType<IconPosition>,

package/components/buttons/toggle/ToggleButton.vue

@@ -16,21 +16,19 @@
         @click="emitClick"
     >
         <!-- Left icon -->
-        <MdiIcon
+        <Icon
             v-if="iconPosition === IconPosition.LEFT"
-            :icon="icon"
-            preserveAspectRatio="xMidYMid meet"
-            :size="iconSizeClass"
+            :name="icon"
+            :iconClass="iconSizeClass"
         />
         <span :class="['font-semibold', textSizeClass]">
             {{ text }}
         </span>
         <!-- Right icon -->
-        <MdiIcon
+        <Icon
             v-if="iconPosition === IconPosition.RIGHT"
-            :icon="icon"
-            preserveAspectRatio="xMidYMid meet"
-            :size="iconSizeClass"
+            :name="icon"
+            :iconClass="iconSizeClass"
         />
     </button>
 </template>
@@ -47,8 +45,8 @@ const props = defineProps({
         validator: (value: ButtonSize) => Object.values(ButtonSize).includes(value),
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp',
+        type: String as PropType<string>,
+        default: 'mdi:help',
     },
     iconPosition: {
         type: String as PropType<IconPosition>,

package/components/cards/specific/ContactDetailsCard.vue

@@ -8,10 +8,8 @@
                 v-if="email" 
                 class="flex gap-2 items-center text-text-primary-brand-default"
             >
-                <MdiIcon
-                    icon="mdiAt"
-                    size="20"
-                    preserveAspectRatio="xMidYMid meet"
+                <Icon
+                    name="mdi:at"
                 />
                 <span class="font-semibold text-sm">
                     {{ email }}
@@ -22,10 +20,8 @@
                 v-if="phone" 
                 class="flex gap-2 items-center text-text-neutral-subtle"
             >
-                <MdiIcon
-                    icon="mdiPhoneOutline"
-                    size="20"
-                    preserveAspectRatio="xMidYMid meet"
+                <Icon
+                    name="mdi:phone-outline"
                 />
                 <span class="text-sm">
                     {{ phone }}

package/components/cards/specific/FeatureCard.vue

@@ -32,8 +32,8 @@ defineProps({
         default: 'Feature description'
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp'
+        type: String as PropType<string>,
+        default: 'mdi:help'
     },
     containedIconShape: {
         type: String as PropType<IconContainerShape>,

package/components/cards/specific/HelpTopicCard.vue

@@ -35,8 +35,8 @@
 // Props
 defineProps({
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp'
+        type: String as PropType<string>,
+        default: 'mdi:help'
     },
     title: {
         type: String as PropType<string>,
@@ -55,8 +55,8 @@ defineProps({
         default: 'Learn more' 
     },
     buttonIcon: {
-        type: String as PropType<any>,
-        default: 'mdiArrowRight'
+        type: String as PropType<string>,
+        default: 'mdi:arrow-right'
     },
 })
 </script>

package/components/cards/specific/subscription/SubscriptionPlanCard.vue

@@ -28,13 +28,13 @@
                 {{ computedAmount }}{{ currencySymbol }}<span class="text-text-neutral-subtle font-normal text-lg">/{{ computedPeriodicity }}</span>
             </span>
 
-            <MdiIcon 
+            <Icon 
                 v-if="isActive && !isFeatured"
-                icon="mdiCheckCircle"
-                size="24"
-                preserveAspectRatio="xMidYMid meet"
-                class="active-icon absolute top-0 right-0 text-icon-primary-brand-active"
+                name="mdi:check-circle"
+                :size="IconSize.LG"
+                iconClass="active-icon absolute top-0 right-0 text-icon-primary-brand-active"
             />
+          
         </CardHeader>
 
         <CardBody class="h-full">
@@ -49,7 +49,7 @@
                 >
                     <ListItem 
                         v-for="feature in features" :key="feature"
-                        icon="mdiCheck"
+                        icon="mdi:check"
                         :spaced="hasFeatureListSeparator"
                     >
                         {{ feature }}

package/components/cards/specific/subscription/UniqueSubscriptionPlanCard.vue

@@ -17,7 +17,7 @@
                 <List :layout="ListLayout.GRID" :cols="2">
                     <ListItem 
                         v-for="item in features" :key="item"
-                        icon="mdiCheck"
+                        icon="mdi:check"
                     >
                         {{ item }}
                     </ListItem>

package/components/collapsibles/Collapsible.vue

@@ -7,7 +7,7 @@
             
             <!-- This button does not have click event because the toggle is being controlled by the accordeon header div-->
             <ActionIconButton 
-                :icon="isOpen ? 'mdiUnfoldLessHorizontal' : 'mdiUnfoldMoreHorizontal'"
+                :icon="isOpen ? 'mdi:unfold-less-horizontal' : 'mdi:unfold-more-horizontal'"
                 :styleType="ButtonStyleType.NEUTRAL_OUTLINED"
                 :size="ButtonSize.MD" 
             />

package/components/content/ContentItem.vue

@@ -100,8 +100,8 @@ const props = defineProps({
         default: ImageHoverEffect.BLUR,
         validator: (value: ImageHoverEffect) => Object.values(ImageHoverEffect).includes(value),
     },
-    imgHoverIcon: String as PropType<any>,
-    imgFallbackIcon: String as PropType<any>,
+    imgHoverIcon: String as PropType<string>,
+    imgFallbackIcon: String as PropType<string>,
     imgContainerClass: String as PropType<string>,
     containerClass: String as PropType<string>,
     hasCardShadow: {

package/components/content/ContentItemImage.vue

@@ -29,11 +29,10 @@
                 v-else
                 class="w-full h-full flex items-center justify-center bg-background-neutral-subtlest"
             >
-                <MdiIcon
-                    :icon="fallbackIcon"
-                    size="32"
-                    preserveAspectRatio="xMidYMid meet"
-                    class="text-icon-primary-brand-default"
+                <Icon
+                    :name="fallbackIcon"
+                    :size="IconSize.XL"
+                    iconClass="text-icon-primary-brand-default"
                 />
             </div>
 
@@ -53,11 +52,10 @@
                         'transition-opacity duration-300',
                     ]"
                 >
-                    <MdiIcon
-                        :icon="hoverIcon"
-                        size="32"
-                        preserveAspectRatio="xMidYMid meet"
-                        class="text-icon-neutral-on-filled-bg"
+                    <Icon 
+                        :name="hoverIcon"
+                        :size="IconSize.XL"
+                        iconClass="text-icon-neutral-on-filled-bg"
                     />
                 </div>
             </template>
@@ -82,12 +80,12 @@ const props = defineProps({
         default: ImageHoverEffect.BLUR,
     },
     hoverIcon: {
-        type: String as PropType<any>,
-        default: 'mdiEyeOutline',
+        type: String as PropType<string>,
+        default: 'mdi:eye-outline',
     },
     fallbackIcon: {
-        type: String as PropType<any>,
-        default: 'mdiImageOffOutline',
+        type: String as PropType<string>,
+        default: 'mdi:image-off-outline',
     },
     containerClass: String as PropType<string>,
 })

package/components/dropdowns/DropdownMenuItem.vue

@@ -19,16 +19,12 @@
         ]"
     >
         <div class="flex items-center gap-3 w-full">
-            <MdiIcon
+            <Icon 
                 v-if="icon && (type === DropdownItemType.ICON || type === DropdownItemType.DANGER_ICON)"
-                :icon="icon"
-                size="20"
-                preserveAspectRatio="xMidYMid meet"
-                :class="[
-                    'min-w-[20px]',
-                    iconColorClass
-                ]"
+                :name="icon"
+                :iconClass="iconColorClass"
             />
+
             <template v-if="type === DropdownItemType.IMAGE">
                 <img
                     v-if="imgUrl && isImageLoaded"
@@ -45,9 +41,11 @@
                     class="w-[24px] h-[24px] rounded"
                 >
             </template>
+
             <span v-if="type !== DropdownItemType.USER" class="text-sm">
                 {{ text }}
             </span>
+
             <User
                 v-if="userDisplayName && type === DropdownItemType.USER"
                 :displayName="userDisplayName"
@@ -88,8 +86,8 @@ const props = defineProps({
         default: "Menu item text",
     },
     icon: {
-        type: String as PropType<any>,
-        default: "mdiHelp",
+        type: String as PropType<string>,
+        default: "mdi:help",
     },
     size: {
         type: String as PropType<DropdownItemSize>,
@@ -178,6 +176,7 @@ const sizeClass = computed(() => {
 const typeClass = computed(() => {
     const typeVariant = {
         [DropdownItemType.DANGER_ICON]: "text-text-delete",
+        [DropdownItemType.DANGER_TEXT]: "text-text-delete",
         [DropdownItemType.TEXT]: "text-text-default",
         [DropdownItemType.ICON]: "text-text-default",
         [DropdownItemType.IMAGE]: "text-text-default",
@@ -189,6 +188,7 @@ const typeClass = computed(() => {
 const iconColorClass = computed(() => {
     const colorVariant = {
         [DropdownItemType.DANGER_ICON]: "text-icon-delete",
+        [DropdownItemType.DANGER_TEXT]: "text-icon-delete",
         [DropdownItemType.TEXT]: "text-icon-neutral-subtle",
         [DropdownItemType.ICON]: "text-icon-neutral-subtle",
         [DropdownItemType.IMAGE]: undefined,

package/components/dropdowns/DropdownSelect.vue

@@ -64,16 +64,8 @@
                             </template>
                         </template>
                         <template v-else-if="type === SelectType.ICON && selectedOption?.icon">
-                            <MdiIcon 
-                                :icon="selectedOption?.icon" 
-                                size="20px" 
-                                preserveAspectRatio="xMidYMid meet"
-                            />
-                        </template>
-                        <template v-else-if="type === SelectType.ICON && selectedOption?.customIcon">
-                            <div
-                                class="w-[20px] h-[20px] text-icon-neutral-subtle"
-                                v-html="selectedOption?.customIcon" 
+                            <Icon
+                                :name="selectedOption?.icon" 
                             />
                         </template>
                         <template v-else-if="type === SelectType.IMAGE && selectedOption?.imgUrl">
@@ -106,17 +98,15 @@
                             v-if="multiple && Array.isArray(selected) && selected.length"
                             :size="ButtonSize.SM"
                             :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE"
-                            icon="mdiCloseCircle"
+                            icon="mdi:close-circle"
                             @click="selected = []"
                         />
 
                         <!-- Show loading icon while loading instead of the icon-->
                         <Spinner v-if="isLoading" />
-                        <MdiIcon
+                        <Icon 
                             v-else
-                            :icon="isOpen ? 'mdiUnfoldLessHorizontal' : 'mdiUnfoldMoreHorizontal'"
-                            size="20px"
-                            preserveAspectRatio="xMidYMid meet"
+                            :name="isOpen ? 'mdi:unfold-less-horizontal' : 'mdi:unfold-more-horizontal'"
                         />
                     </div>
                 </div>
@@ -165,7 +155,6 @@
                             :type="type"
                             :text="option.text"
                             :icon="option.icon"
-                            :customIcon="option.customIcon"
                             :userDisplayName="option.userDisplayName"
                             :userProfileImg="option.userProfileImg"
                             :imgUrl="option.imgUrl"

package/components/dropdowns/DropdownSelectItem.vue

@@ -17,23 +17,14 @@
     >
         <div class="flex justify-between items-center gap-3 w-full">
             <div class="flex items-center gap-3">
-                <MdiIcon 
-                    v-if="(type === SelectType.ICON) && !customIcon" 
-                    :icon="icon" 
-                    size="20"
-                    preserveAspectRatio="xMidYMid meet"
-                    :class="[
-                        'min-w-[20px]',
-                        isSelected && activeStyle === SelectActiveStyle.FILL ? 'text-icon-on-filled' : 'text-icon-neutral-subtle'
+                <Icon 
+                    v-if="type === SelectType.ICON"
+                    :name="icon"
+                    :iconClass="[
+                        isSelected && activeStyle === SelectActiveStyle.FILL ? '!text-icon-on-filled' : '!text-icon-neutral-subtle'
                     ]"
                 />
-                <!-- Custom icon (replaces the MdiIcon if it is used)-->
-                <div
-                    v-if="(type === SelectType.ICON) && customIcon"
-                    class="w-[20px] h-[20px]"
-                    :class="isSelected && activeStyle === SelectActiveStyle.FILL ? 'text-icon-on-filled' : 'text-icon-neutral-subtle'"
-                    v-html="customIcon" 
-                />
+        
                 <template v-if="type === SelectType.IMAGE">
                     <img
                         v-if="imgUrl && isImageLoaded"
@@ -50,6 +41,7 @@
                         class="w-[24px] h-[24px] rounded"
                     >
                 </template>
+
                 <span 
                     v-if="type !== SelectType.USER" 
                     :class="[
@@ -61,6 +53,7 @@
                 >
                     {{ text }}
                 </span>
+
                 <User 
                     v-if="type === SelectType.USER"
                     :displayName="userDisplayName"
@@ -69,12 +62,10 @@
                     :class="isSelected && activeStyle === SelectActiveStyle.FILL ? '!text-text-neutral-on-filled' : ''"
                 />
             </div>
-            <MdiIcon
+            <Icon 
                 v-if="isSelected && activeStyle === SelectActiveStyle.CHECK"
-                icon="mdiCheck"
-                size="20px"
-                preserveAspectRatio="xMidYMid meet"
-                class="text-icon-primary-brand-active"
+                name="mdi:check"
+                iconClass="text-icon-primary-brand-active"
             />
         </div>
         <p 
@@ -97,10 +88,9 @@ const props = defineProps({
         default: 'Select menu item',
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp',
+        type: String as PropType<string>,
+        default: 'mdi:help',
     },
-    customIcon: String as PropType<string>,
     size: {
         type: String as PropType<SelectSize>,
         default: SelectSize.MD,