TipBox.vue: Support different size icons

src/TipBox.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="alert container" :class="[boxStyle, addClass, lightStyle]" :style="customStyle">
-        <div v-if="!isDefault" class="icon-wrapper">
+        <div v-if="!isDefault" class="icon-wrapper" :class="[iconStyle]">
             <slot name="_icon">
                 <span v-html="iconType"></span>
             </slot>
@@ -12,7 +12,6 @@
             </button>
             <slot></slot>
         </div>
-
     </div>
 </template>
 
@@ -40,6 +39,14 @@
         type: String,
         default: null
       },
+      icon: {
+        type: String,
+        default: null
+      },
+      iconSize: {
+        type: String,
+        default: null
+      },
       type: {
         type: String,
         default: 'none'
@@ -147,6 +154,12 @@
           default:
             return '<i class="fas fa-exclamation"></i>';
         }
+      }, 
+      iconStyle() {
+        if (this.iconSize) {
+          return `fa-${this.iconSize}`;
+        }
+        return '';
       }
     }
   }
@@ -186,8 +199,6 @@
     .icon-wrapper {
         display: flex;
         margin-right: .5em;
-        width: 22px;
-        height: 22px;
     }
 
     .contents {