@imaginario27/air-ui-ds 1.0.22 → 1.0.23

package/components/icons/ContainedIcon.vue

@@ -11,25 +11,35 @@
             iconContainerSizeClass,
         ]"
     >
-        <MdiIcon 
-            :icon="icon" 
-            :size="iconSizeClass"
-            preserveAspectRatio="xMidYMid meet"
-            :class="iconColorClass"
+        <Icon
+            :icon
+            :type
+            :mode
+            :iconClass
         />
     </div>
 </template>
 <script setup lang="ts">
 // Props
 const props = defineProps({
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiHelp',
+    },
     styleType: {
         type: String as PropType<IconContainerStyleType>,
         default: IconContainerStyleType.FLAT,
         validator: (value: IconContainerStyleType) => Object.values(IconContainerStyleType).includes(value),
     },
-    icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp',
+    type: {
+        type: String as PropType<IconType>,
+        default: IconType.NATIVE, 
+        validator: (value: IconType) => Object.values(IconType).includes(value),
+    },
+    mode: {
+        type: String as PropType<IconMode>,
+        default: IconMode.CSS,
+        validator: (value: IconMode) => Object.values(IconMode).includes(value),
     },
     shape: {
         type: String as PropType<IconContainerShape>,
@@ -118,13 +128,16 @@ const iconContainerSizeClass = computed(() => {
 
 const iconSizeClass = computed(() => {
     const sizeVariants = {
-        [IconContainerSize.LG]: '24',
-        [IconContainerSize.XL]: '24',
-        [IconContainerSize.XXL]: '40',
-        [IconContainerSize.XXXL]: '48',
+        [IconContainerSize.LG]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
+        [IconContainerSize.XL]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
+        [IconContainerSize.XXL]: 'w-[40px] h-[40px] min-w-[40px] min-h-[40px]',
+        [IconContainerSize.XXXL]: 'w-[48px] h-[48px] min-w-[48px] min-h-[48px]',
     }
 
-    return sizeVariants[props.size as IconContainerSize] || '24'
+    return sizeVariants[props.size as IconContainerSize] || 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]'
+})
+
+const iconClass = computed(() => {
+    return [iconSizeClass.value, iconColorClass.value].join(' ')
 })
-    
 </script>

package/components/icons/Icon.vue

@@ -0,0 +1,82 @@
+<template>
+    <MdiIcon
+        v-if="type === IconType.NATIVE"
+        :icon
+        preserveAspectRatio="xMidYMid meet"
+        :class="[
+            iconSizeClass,
+            iconColorClass,
+            iconClass,
+        ]"
+    />
+    <NuxtIcon 
+        v-else-if="type === IconType.COLLECTION"
+        :name="icon"
+        :mode
+        :customize="svgCustomize"
+        :class="[
+            iconSizeClass,
+            iconColorClass,
+            iconClass,
+        ]"
+    />
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiHelp',
+    },
+    type: {
+        type: String as PropType<IconType>,
+        default: IconType.NATIVE, 
+        validator: (value: IconType) => Object.values(IconType).includes(value),
+    },
+    mode: {
+        type: String as PropType<IconMode>,
+        default: IconMode.CSS,
+        validator: (value: IconMode) => Object.values(IconMode).includes(value),
+    },
+    size: {
+        type: String as PropType<IconSize>,
+        default: IconSize.MD, 
+        validator: (value: IconSize) => Object.values(IconSize).includes(value),
+    },
+    color: {
+        type: String as PropType<ColorAccent>,
+        default: ColorAccent.NEUTRAL, 
+        validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
+    },
+    svgCustomize: Function as PropType<CollectionCustomizeCallback>,  
+    iconClass: String as PropType<string>,    
+})
+
+// Computed classes
+const iconSizeClass = computed(() => {
+    const variants = {
+        [IconSize.XS]: 'w-[12px] h-[12px] min-w-[12px] min-h-[12px]',
+        [IconSize.SM]: 'w-[16px] h-[16px] min-w-[16px] min-h-[16px]',
+        [IconSize.MD]: 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]',
+        [IconSize.LG]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
+        [IconSize.XL]: 'w-[32px] h-[32px] min-w-[32px] min-h-[32px]',
+        [IconSize.XXL]: 'w-[40px] h-[40px] min-w-[40px] min-h-[40px]',
+    }
+
+    return variants[props.size as IconSize] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
+})
+
+const iconColorClass = computed(() => {
+    const variants = {
+        [ColorAccent.NEUTRAL]: 'text-icon-default',
+        [ColorAccent.SUCCESS]: 'text-icon-success',
+        [ColorAccent.WARNING]: 'text-icon-warning',
+        [ColorAccent.DANGER]: 'text-icon-danger',
+        [ColorAccent.INFO]: 'text-icon-info',
+        [ColorAccent.PRIMARY_BRAND]: 'text-icon-primary-brand-default',
+        [ColorAccent.SECONDARY_BRAND]: 'text-icon-secondary-brand-default',
+    }
+
+    return variants[props.color as ColorAccent] || 'text-icon-default'
+})
+</script>

package/models/enums/icons.ts

@@ -19,4 +19,23 @@ export enum IconContainerSize {
     XL = 'xl',
     XXL = '2xl',
     XXXL = '3xl',
+}
+
+export enum IconSize {
+    XS = 'xs',
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+    XL = 'xl',
+    XXL = '2xl',
+}
+
+export enum IconType {
+    NATIVE = 'native',
+    COLLECTION = 'collection',
+}
+
+export enum IconMode {
+    CSS = 'css',
+    SVG = 'svg',
 }

package/models/types/icons.ts

@@ -0,0 +1,6 @@
+export type CollectionCustomizeCallback = (
+    svg: string,
+    name?: string,
+    prefix?: string,
+    provider?: string,
+) => string

package/nuxt.config.ts

@@ -10,7 +10,7 @@ export default defineNuxtConfig({
         '../air-ui-utils',
     ],
 
-    modules: ["@nuxt/image", "nuxt-mdi", "@nuxt/eslint", '@vueuse/nuxt'],
+    modules: ["@nuxt/image", "nuxt-mdi", "@nuxt/eslint", '@vueuse/nuxt', "@nuxt/icon"],
 
     plugins: ["@/plugins/vue3-toastify"],
 
@@ -28,6 +28,13 @@ export default defineNuxtConfig({
         },
     ],
 
+    icon: {
+        componentName: 'NuxtIcon',
+        serverBundle: {
+            collections: ['mdi']
+        }
+    },
+
     eslint: {
         // options here
     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.0.22",
+    "version": "1.0.23",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",
@@ -26,6 +26,7 @@
         "@jaxtheprime/vue3-dropzone": "3.4.0",
         "@nuxt/content": "3.7.1",
         "@nuxt/eslint": "1.9.0",
+        "@nuxt/icon": "2.1.1",
         "@nuxt/image": "1.11.0",
         "@nuxtjs/i18n": "10.1.0",
         "@tailwindcss/vite": "4.1.13",