remove dt-icon from keyboard shortcut

dialpad · Sep 2, 2024 · 377daa3 · 377daa3
1 parent 58581f1
commit 377daa3
Showing 1 changed file with 25 additions and 7 deletions.
diff --git a/packages/dialtone-vue3/components/keyboard_shortcut/keyboard_shortcut.vue b/packages/dialtone-vue3/components/keyboard_shortcut/keyboard_shortcut.vue
@@ -15,10 +15,10 @@
     <template
       v-for="(item, i) in formattedShortcutSplit"
     >
-      <dt-icon
+      <component
         v-if="icons[item]"
         :key="`${i}-${item}`"
-        :name="icons[item]"
+        :is="icons[item]"
         size="100"
         aria-hidden="true"
         :class="[
@@ -42,7 +42,15 @@
 
 <script>
 import { DtIcon } from '@/components/icon';
-import { SHORTCUTS_ICON_ALIASES, SHORTCUTS_ICON_SEPARATOR } from './keyboard_shortcut_constants';
+import {
+  DtIconLayoutGrid,
+  DtIconArrowRight,
+  DtIconArrowLeft,
+  DtIconArrowUp,
+  DtIconArrowDown,
+  DtIconCommand,
+  DtIconPlus,
+} from '@dialpad/dialtone-icons/vue3';
 
 /**
  * This component displays a visual representation of a keyboard shortcut to the user.
@@ -85,23 +93,33 @@ export default {
 
   data () {
     return {
-      SHORTCUTS_ICON_ALIASES,
+      SHORTCUTS_ICON_ALIASES: {
+        '{win}': DtIconLayoutGrid,
+        '{arrow-right}': DtIconArrowRight,
+        '{arrow-left}': DtIconArrowLeft,
+        '{arrow-up}': DtIconArrowUp,
+        '{arrow-down}': DtIconArrowDown,
+        '{cmd}': DtIconCommand,
+      },
       separator: /\+/gi,
     };
   },
 
   computed: {
     icons () {
-      return { ...SHORTCUTS_ICON_ALIASES, ...SHORTCUTS_ICON_SEPARATOR };
+      return {
+        ...this.SHORTCUTS_ICON_ALIASES,
+        '{plus}': DtIconPlus,
+      };
     },
 
     shortcutWithSeparator () {
       return this.shortcut.replace(this.separator, '{plus}');
     },
 
     formattedShortcut () {
-      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {
-        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);
+      return Object.keys(this.SHORTCUTS_ICON_ALIASES).reduce((result, key) => {
+        return result.replace(new RegExp('{' + key + '}', 'gi'), this.SHORTCUTS_ICON_ALIASES[key]);
       }, this.shortcutWithSeparator);
     },