Generic Icon component

facade · Oct 21, 2019 · 2731e12 · 2731e12
1 parent 9fddf6f
commit 2731e12
Show file tree

Hide file tree

Showing 17 changed files with 31 additions and 54 deletions.
diff --git a/resources/compiled/ignition.js b/resources/compiled/ignition.js
diff --git a/resources/js/Ignition.js b/resources/js/Ignition.js
@@ -9,13 +9,7 @@ export default class Ignition {
     }
 
     registerIcons() {
-        Vue.component('ArrowDownIcon', require('./components/Icons/ArrowDownIcon').default);
-        Vue.component('ArrowUpIcon', require('./components/Icons/ArrowUpIcon').default);
-        Vue.component('ClipboardIcon', require('./components/Icons/ClipboardIcon').default);
-        Vue.component('LightbulbIcon', require('./components/Icons/LightbulbIcon').default);
-        Vue.component('PencilIcon', require('./components/Icons/PencilIcon').default);
-        Vue.component('PlusIcon', require('./components/Icons/PlusIcon').default);
-        Vue.component('ShareIcon', require('./components/Icons/ShareIcon').default);
+        Vue.component('Icon', require('./components/Icons/Icon').default);
     }
 
     registerBuiltinTabs() {

diff --git a/resources/js/components/Icons/ArrowDownIcon.vue b/resources/js/components/Icons/ArrowDownIcon.vue
diff --git a/resources/js/components/Icons/ArrowUpIcon.vue b/resources/js/components/Icons/ArrowUpIcon.vue
diff --git a/resources/js/components/Icons/ClipboardIcon.vue b/resources/js/components/Icons/ClipboardIcon.vue
diff --git a/resources/js/components/Icons/Icon.vue b/resources/js/components/Icons/Icon.vue
@@ -0,0 +1,15 @@
+<template>
+    <svg class="icon">
+        <use :xlink:href="'#' + name + '-icon'" />
+    </svg>
+</template>
+
+<script>
+export default {
+    props: {
+        name: {
+            required: true,
+        },
+    },
+};
+</script>
diff --git a/resources/js/components/Icons/LightbulbIcon.vue b/resources/js/components/Icons/LightbulbIcon.vue
diff --git a/resources/js/components/Icons/PencilIcon.vue b/resources/js/components/Icons/PencilIcon.vue
diff --git a/resources/js/components/Icons/PlusIcon.vue b/resources/js/components/Icons/PlusIcon.vue
diff --git a/resources/js/components/Icons/ShareIcon.vue b/resources/js/components/Icons/ShareIcon.vue
diff --git a/resources/js/components/Shared/CopyButton.vue b/resources/js/components/Shared/CopyButton.vue
@@ -1,6 +1,9 @@
 <template>
     <button title="Copy to clipboard" @click="copy(text)">
-        <ClipboardIcon :class="copied ? 'fill-green-300' : 'fill-gray-200 hover:fill-white'" />
+        <Icon
+            name="clipboard"
+            :class="copied ? 'fill-green-300' : 'fill-gray-200 hover:fill-white'"
+        />
         <div v-if="copied" class="ml-2 absolute top-0 left-full text-green-300">
             Copied!
         </div>

diff --git a/resources/js/components/Shared/FilePath.vue b/resources/js/components/Shared/FilePath.vue
@@ -16,7 +16,7 @@
             v-if="editable && editorUrl"
             :href="editorUrl"
             class="ml-2 inline-block text-sm text-purple-400 hover:text-purple-500"
-            ><PencilIcon />
+            ><Icon name="pencil" />
         </a>
     </span>
 </template>

diff --git a/resources/js/components/Shared/ShareButton.vue b/resources/js/components/Shared/ShareButton.vue
@@ -2,7 +2,7 @@
     <div @click.stop>
         <button class="tab" :class="menuVisible ? 'tab-active' : ''" @click="toggleMenu">
             Share
-            <ShareIcon class="ml-2" />
+            <Icon name="share" class="ml-2" />
         </button>
         <div
             class="dropdown z-10 right-0 top-full p-4 overflow-visible"

diff --git a/resources/js/components/Solutions/SolutionCard.vue b/resources/js/components/Solutions/SolutionCard.vue
@@ -8,7 +8,7 @@
             }"
         >
             <a v-if="isHidingSolutions" class="link-solution" target="_blank"
-                ><LightbulbIcon class="text-xs mr-1" /> Show solutions</a
+                ><Icon name="lightbulb" class="text-xs mr-1" /> Show solutions</a
             >
             <a v-else class="link-solution" target="_blank">Hide solutions</a>
         </div>

diff --git a/resources/js/components/Stack/FrameGroup.vue b/resources/js/components/Stack/FrameGroup.vue
@@ -6,7 +6,7 @@
     >
         <div class="stack-frame | cursor-pointer">
             <button class="stack-frame-number">
-                <PlusIcon class="align-middle text-gray-500" />
+                <Icon name="plus" class="align-middle text-gray-500" />
             </button>
             <div class="span-2 stack-frame-text">
                 <button class="text-left text-gray-500">

diff --git a/resources/js/components/Stack/Snippet.vue b/resources/js/components/Stack/Snippet.vue
@@ -43,7 +43,7 @@
                             'stack-code-line-selected': withinSelectedRange(parseInt(line_number)),
                         }"
                         class="stack-code-line"
-                ><span v-html="highlightedCode(code)"></span><a :href="editorUrl(line_number)" class="editor-link"><PencilIcon /></a></p>
+                ><span v-html="highlightedCode(code)"></span><a :href="editorUrl(line_number)" class="editor-link"><Icon name="pencil" /></a></p>
                 </pre>
             </div>
         </div>

diff --git a/resources/js/components/Stack/Stack.vue b/resources/js/components/Stack/Stack.vue
@@ -8,14 +8,14 @@
                         title="Frame up (Key:K)"
                         class="stack-nav-arrow"
                     >
-                        <ArrowUpIcon />
+                        <Icon name="arrow-up" />
                     </button>
                     <button
                         @click="selectNextFrame"
                         title="Frame down (Key:J)"
                         class="stack-nav-arrow"
                     >
-                        <ArrowDownIcon />
+                        <Icon name="arrow-down" />
                     </button>
                 </div>
                 <div class="px-4">