Add alert icon

src/components/AlertContainer.vue

@@ -34,6 +34,24 @@ const alertClass = computed(() => {
     }
 })
 
+const iconClass = computed(() => {
+    switch (props.alert.style) {
+        case AlertStyle.Success: {
+            return 'fa-solid fa-circle-check'
+        }
+        case AlertStyle.Warning: {
+            return 'fa-solid fa-circle-exclamation'
+        }
+        case AlertStyle.Danger: {
+            return 'fa-solid fa-triangle-exclamation'
+        }
+        case AlertStyle.Primary:
+        default: {
+            return 'fa-solid fa-circle-info'
+        }
+    }
+})
+
 /**
  * TODO : Closing an alert using the button will remove the HTML from the DOM.
  * This means the component can't be reused with a different variable. If used
@@ -44,7 +62,10 @@ const alertClass = computed(() => {
 <template>
     <div :class="alertClass" class="uk-alert" uk-alert>
         <a v-if="alert.closeBtn" class="uk-alert-close" uk-close @click="$emit('close')"></a>
-        <h3 v-if="alert.title">{{ alert.title }}</h3>
+        <h3 v-if="alert.title">
+            <font-awesome-icon v-if="!alert.hideIcon" :icon="iconClass" class="uk-icon" />
+            {{ alert.title }}
+        </h3>
         <p>
             <slot>{{ alert.description }}</slot>
         </p>

src/less/components/alert.less

@@ -1,18 +1,18 @@
 // Variables
 // ========================================================================
-@alert-primary-background: #E7F2FA; 
-@alert-success-background: #E6F9E6;
-@alert-warning-background: #FFF2DB;
-@alert-danger-background:  #FAE2E2;
+@alert-primary-background: #e7f2fa;
+@alert-success-background: #e6f9e6;
+@alert-warning-background: #fff2db;
+@alert-danger-background: #fae2e2;
 
 // Custom title bar backgrounds
-@alert-primary-title-background: #6AB0DE;
-@alert-success-title-background: #77C577;
-@alert-warning-title-background: #F0B37E;
-@alert-danger-title-background: #DF6F6C;
+@alert-primary-title-background: #6ab0de;
+@alert-success-title-background: #77c577;
+@alert-warning-title-background: #f0b37e;
+@alert-danger-title-background: #df6f6c;
 
 // Custom title style
-@alert-title-color: #FFFFFF;
+@alert-title-color: #ffffff;
 @alert-title-height: 34px;
 
 // Remove the main div padding
@@ -54,6 +54,10 @@
     line-height: @alert-title-height;
     padding-left: @alert-content-padding-horizontal;
     margin-bottom: 0px;
+
+    .uk-icon {
+        padding-right: 5px;
+    }
 }
 
 // Apply custom title bar background
@@ -68,4 +72,4 @@
 }
 .uk-alert-danger h3 {
     background-color: @alert-danger-title-background;
-}
+}

src/types.ts

@@ -5,6 +5,7 @@ export interface AlertInterface {
     description?: string
     style?: AlertStyle | keyof typeof AlertStyle
     closeBtn?: boolean
+    hideIcon?: boolean
 }
 
 export enum AlertStyle {