#9 Rename icon class

src/assets/form-wizard/_navs-pagination.scss

@@ -38,7 +38,7 @@
         @include transition-font-size(.2s, linear);
 
 
-        .icon{
+        .wizard-icon{
             color: $white-color;
             font-size: 24px;
             display:flex;

src/assets/form-wizard/_wizard-card.scss

@@ -38,14 +38,14 @@
         border-radius: 0;
       }
     }
-    .icon {
+    .wizard-icon {
       display: flex;
       align-items: center;
       justify-content: center;
     }
   }
 
-  .tab-content {
+  .wizard-tab-content {
     min-height: 100px;
     padding: 30px 20px 10px;
   }

src/components/FormWizard.vue

@@ -22,11 +22,11 @@
                 <div v-if="tab.active" class="wizard-icon-container"
                      :class="{square_shape:isStepSquare, tab_shape:isTabShape}"
                      :style="[tab.active ? iconActiveStyle: {}, tab.validationError ? errorStyle : {}]">
-                  <i v-if="tab.icon" :class="tab.icon" class="icon"></i>
+                  <i v-if="tab.icon" :class="tab.icon" class="wizard-icon"></i>
-                  <i v-else class="icon">{{index + 1}}</i>
+                  <i v-else class="wizard-icon">{{index + 1}}</i>
                 </div>
-                <i v-if="!tab.active && tab.icon" :class="tab.icon" class="icon"></i>
+                <i v-if="!tab.active && tab.icon" :class="tab.icon" class="wizard-icon"></i>
-                <i v-if="!tab.active && !tab.icon" class="icon">{{index + 1}}</i>
+                <i v-if="!tab.active && !tab.icon" class="wizard-icon">{{index + 1}}</i>
               </transition>
 
             </div>
@@ -39,7 +39,7 @@
           </a>
         </li>
       </ul>
-      <div class="tab-content">
+      <div class="wizard-tab-content">
         <slot>
         </slot>
       </div>

src/components/TabContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="active" class="tab-container">
+  <div v-if="active" class="wizard-tab-container">
     <slot>
     </slot>
   </div>