rename icon to baseicon

src/components/my-table.vue

@@ -12,9 +12,9 @@
                 <div @click="orderBy(col.orderBy)" v-if="col.orderBy">
                     {{ col.heading }}
 
-                    <i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
-                    <i class="icon icon-angle-circled-down" aria-hidden="true" v-else-if="currentOrderDesc"></i>
-                    <i class="icon icon-angle-circled-up" aria-hidden="true" v-else></i>
+                    <i class="icon baseicon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
+                    <i class="icon baseicon-angle-circled-down" aria-hidden="true" v-else-if="currentOrderDesc"></i>
+                    <i class="icon baseicon-angle-circled-up" aria-hidden="true" v-else></i>
                 </div>
 
                 <!-- Column without sorting -->
@@ -45,7 +45,7 @@
                         </li>
                     </ul>
                     <div title="Open actions" class="actions_btn" @click="toggleActions">
-                        <i class="icon icon-cog" aria-hidden="true"></i>
+                        <i class="icon baseicon-cog" aria-hidden="true"></i>
                     </div>
                 </div>
             </div>

src/components/topbar.vue

@@ -6,9 +6,9 @@
         <!-- User Profile -->
         <div class="user_profile" ref="user_profile">
             <a class="trigger" @click.prevent="toggleMenu">
-                <div class="image"><i class="icon icon-user" aria-hidden="true"></i></div>
+                <div class="image"><i class="icon baseicon-user" aria-hidden="true"></i></div>
 <!--                <div class="text"> {{ loginDisplay }} <div class="role"> {{ loginType }}</div></div> -->
-                <div class="trigger_btn"><i class="icon icon-arrow-down" aria-hidden="true"></i></div>
+                <div class="trigger_btn"><i class="icon baseicon-arrow-down" aria-hidden="true"></i></div>
             </a>
             <nav class="user_menu">
                 <ul>

src/fonts/config.json

@@ -1,6 +1,6 @@
 {
   "name": "basefont",
-  "css_prefix_text": "icon-",
+  "css_prefix_text": "baseicon-",
   "css_use_suffix": false,
   "hinting": true,
   "units_per_em": 1000,

src/icons.less

@@ -11,42 +11,43 @@
   text-rendering: optimizeLegibility;
 }
 
-.icon:before {
+[class^="baseicon-"]::before,
+[class*=" baseicon-"]::before {
   .iconStyles("basefont");
 }
 
-.icon-search:before { content: '\e800'; } /* '' */
-.icon-user:before { content: '\e801'; } /* '' */
-.icon-key:before { content: '\e802'; } /* '' */
-.icon-cog:before { content: '\e803'; } /* '' */
-.icon-pencil:before { content: '\e804'; } /* '' */
-.icon-eye-off:before { content: '\e805'; } /* '' */
-.icon-cancel:before { content: '\e806'; } /* '' */
-.icon-ok:before { content: '\e807'; } /* '' */
-.icon-trash-empty:before { content: '\e808'; } /* '' */
-.icon-docs:before { content: '\f0c5'; } /* '' */
-.icon-menu:before { content: '\f0c9'; } /* '' */
-.icon-angle-left:before { content: '\f104'; } /* '' */
-.icon-angle-right:before { content: '\f105'; } /* '' */
-.icon-angle-up:before { content: '\f106'; } /* '' */
-.icon-angle-down:before { content: '\f107'; } /* '' */
-.icon-chatbox:before { content: '\f11b'; } /* '' */
-.icon-document-text:before { content: '\f12e'; } /* '' */
-.icon-angle-circled-left:before { content: '\f137'; } /* '' */
-.icon-angle-circled-right:before { content: '\f138'; } /* '' */
-.icon-angle-circled-up:before { content: '\f139'; } /* '' */
-.icon-angle-circled-down:before { content: '\f13a'; } /* '' */
-.icon-gear:before { content: '\f13d'; } /* '' */
-.icon-images:before { content: '\f148'; } /* '' */
-.icon-log-out:before { content: '\f29f'; } /* '' */
-.icon-pie-graph:before { content: '\f2a5'; } /* '' */
-.icon-paper-airplane:before { content: '\f2c3'; } /* '' */
-.icon-contacts:before { content: '\f2d9'; } /* '' */
-.icon-cube:before { content: '\f318'; } /* '' */
-.icon-compass:before { content: '\f37c'; } /* '' */
-.icon-arrow-down:before { content: '\f3d0'; } /* '' */
-.icon-arrow-left:before { content: '\f3d2'; } /* '' */
-.icon-arrow-right:before { content: '\f3d3'; } /* '' */
-.icon-arrow-up:before { content: '\f3d8'; } /* '' */
-.icon-color-wand:before { content: '\f416'; } /* '' */
-.icon-navigate:before { content: '\f46e'; } /* '' */
+.baseicon-search:before { content: '\e800'; } /* '' */
+.baseicon-user:before { content: '\e801'; } /* '' */
+.baseicon-key:before { content: '\e802'; } /* '' */
+.baseicon-cog:before { content: '\e803'; } /* '' */
+.baseicon-pencil:before { content: '\e804'; } /* '' */
+.baseicon-eye-off:before { content: '\e805'; } /* '' */
+.baseicon-cancel:before { content: '\e806'; } /* '' */
+.baseicon-ok:before { content: '\e807'; } /* '' */
+.baseicon-trash-empty:before { content: '\e808'; } /* '' */
+.baseicon-docs:before { content: '\f0c5'; } /* '' */
+.baseicon-menu:before { content: '\f0c9'; } /* '' */
+.baseicon-angle-left:before { content: '\f104'; } /* '' */
+.baseicon-angle-right:before { content: '\f105'; } /* '' */
+.baseicon-angle-up:before { content: '\f106'; } /* '' */
+.baseicon-angle-down:before { content: '\f107'; } /* '' */
+.baseicon-chatbox:before { content: '\f11b'; } /* '' */
+.baseicon-document-text:before { content: '\f12e'; } /* '' */
+.baseicon-angle-circled-left:before { content: '\f137'; } /* '' */
+.baseicon-angle-circled-right:before { content: '\f138'; } /* '' */
+.baseicon-angle-circled-up:before { content: '\f139'; } /* '' */
+.baseicon-angle-circled-down:before { content: '\f13a'; } /* '' */
+.baseicon-gear:before { content: '\f13d'; } /* '' */
+.baseicon-images:before { content: '\f148'; } /* '' */
+.baseicon-log-out:before { content: '\f29f'; } /* '' */
+.baseicon-pie-graph:before { content: '\f2a5'; } /* '' */
+.baseicon-paper-airplane:before { content: '\f2c3'; } /* '' */
+.baseicon-contacts:before { content: '\f2d9'; } /* '' */
+.baseicon-cube:before { content: '\f318'; } /* '' */
+.baseicon-compass:before { content: '\f37c'; } /* '' */
+.baseicon-arrow-down:before { content: '\f3d0'; } /* '' */
+.baseicon-arrow-left:before { content: '\f3d2'; } /* '' */
+.baseicon-arrow-right:before { content: '\f3d3'; } /* '' */
+.baseicon-arrow-up:before { content: '\f3d8'; } /* '' */
+.baseicon-color-wand:before { content: '\f416'; } /* '' */
+.baseicon-navigate:before { content: '\f46e'; } /* '' */