Merge pull request #208 from facade/no-external-resources

Don't rely on external resources
facade · Jan 2, 2020 · 6328b1b · 6328b1b
2 parents 1d2103a + c2174e6
commit 6328b1b
Show file tree

Hide file tree

Showing 18 changed files with 116 additions and 37 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes to `ignition` will be documented in this file
 
+## 1.13.1 - 2019-10-21
+
+-   Remove external reference for icons (#134)
+
 ## 1.13.0 - 2019-11-27
 
 - Allow custom grouping types
@@ -19,37 +23,37 @@ All notable changes to `ignition` will be documented in this file
 
 ## 1.11.2 - 2019-10-13
 
-- simplify default Laravel installation (#198)
+-   simplify default Laravel installation (#198)
 
 ## 1.11.1 - 2019-10-08
 
-- add conditional line number (#182)
+-   add conditional line number (#182)
 
 ## 1.11.0 - 2019-10-08
 
-- add better error messages for missing validation rules (#125)
+-   add better error messages for missing validation rules (#125)
 
 ## 1.10.0 - 2019-10-07
 
-- Add `ignition:make-solution` command
-- Add default for query binding option (Fixes #183)
+-   Add `ignition:make-solution` command
+-   Add default for query binding option (Fixes #183)
 
 ## 1.9.2 - 2019-10-04
 
-- Fix service provider registration (Fixes #177)
+-   Fix service provider registration (Fixes #177)
 
 ## 1.9.1 - 2019-10-01
 
-- collapse vendor frames on windows fix (#176)
+-   collapse vendor frames on windows fix (#176)
 
 ## 1.9.0 - 2019-09-27
 
--  add ability to send logs to flare
--  add `ddd` function
+-   add ability to send logs to flare
+-   add `ddd` function
 
 ## 1.8.4 - 2019-09-27
 
--  Resolve configuration from the injected app instead of the helper ([#168](https://github.com/facade/ignition/pull/168))
+-   Resolve configuration from the injected app instead of the helper ([#168](https://github.com/facade/ignition/pull/168))
 
 ## 1.8.3 - 2019-09-25
 

diff --git a/resources/compiled/ignition.js b/resources/compiled/ignition.js
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -12,6 +12,7 @@
 @import './utilities/layout.css';
 @import './utilities/link.css';
 @import './utilities/grid.css';
+@import './utilities/icon.css';
 @import './utilities/scrollbar.css';
 @import './utilities/stack.css';
 @import './utilities/solution.css';

diff --git a/resources/css/utilities/checkbox.css b/resources/css/utilities/checkbox.css
@@ -30,17 +30,15 @@
 
 .checkbox:after {
     @apply absolute;
-    width: 1.5em;
-    height: 1.5em;
-    @apply grid;
-    @apply place-center;
+    top: 50%;
+    left: 50%;
     @apply text-purple-500;
-    font-size: 1em;
-    font-family: 'Font Awesome 5 Free';
+    font-size: 1.2em;
     font-weight: 900;
-    content: '\f00c';
+    line-height: 1;
+    content: '✓';
     transition: transform 0.1s;
-    transform: scale(0);
+    transform: translate(-50%, -50%) scale(0);
 }
 
 .checkbox:focus,
@@ -58,7 +56,7 @@
 }
 
 .checkbox:checked:after {
-    transform: scale(1);
+    transform: translate(-50%, -50%) scale(1);
 }
 
 .checkbox:disabled {

diff --git a/resources/css/utilities/icon.css b/resources/css/utilities/icon.css
@@ -0,0 +1,8 @@
+.icon {
+    fill: currentColor;
+    height: 1em;
+    line-height: 1;
+    width: 1em;
+    display: inline-block;
+    vertical-align: initial;
+}
diff --git a/resources/css/utilities/stack.css b/resources/css/utilities/stack.css
@@ -250,7 +250,7 @@
 
 .stack-code-line .editor-link {
     @apply inline-block;
-    @apply px-4;
+    @apply px-2;
     @apply opacity-0;
     @apply text-purple-400;
 }

diff --git a/resources/js/Ignition.js b/resources/js/Ignition.js
@@ -8,6 +8,10 @@ export default class Ignition {
         this.tabCallbacks = [];
     }
 
+    registerIcons() {
+        Vue.component('Icon', require('./components/Icons/Icon').default);
+    }
+
     registerBuiltinTabs() {
         Vue.component('AppTab', require('./components/Tabs/AppTab').default);
         Vue.component('ContextTab', require('./components/Tabs/ContextTab').default);
@@ -28,6 +32,8 @@ export default class Ignition {
     }
 
     start() {
+        this.registerIcons();
+
         this.registerBuiltinTabs();
 
         this.registerCustomTabs();

diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        <IconSymbols />
         <Summary />
         <div class="layout-col mt-12">
             <div class="tabs">
@@ -13,6 +14,7 @@
 </template>
 
 <script>
+import IconSymbols from './Icons/IconSymbols.vue';
 import Summary from './Summary.vue';
 import Tabs from './Tabs.vue';
 import Details from './Details.vue';
@@ -53,6 +55,7 @@ export default {
         Summary,
         Tabs,
         Details,
+        IconSymbols,
     },
 
     methods: {

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/IconSymbols.vue b/resources/js/components/Icons/IconSymbols.vue
@@ -0,0 +1,45 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+        <symbol id="arrow-down-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <path
+                d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z"
+            />
+        </symbol>
+
+        <symbol id="arrow-up-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <path
+                d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"
+            />
+        </symbol>
+
+        <symbol id="clipboard-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+            <path
+                d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z"
+            />
+        </symbol>
+
+        <symbol id="lightbulb-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
+            <path
+                d="M176 80c-52.94 0-96 43.06-96 96 0 8.84 7.16 16 16 16s16-7.16 16-16c0-35.3 28.72-64 64-64 8.84 0 16-7.16 16-16s-7.16-16-16-16zM96.06 459.17c0 3.15.93 6.22 2.68 8.84l24.51 36.84c2.97 4.46 7.97 7.14 13.32 7.14h78.85c5.36 0 10.36-2.68 13.32-7.14l24.51-36.84c1.74-2.62 2.67-5.7 2.68-8.84l.05-43.18H96.02l.04 43.18zM176 0C73.72 0 0 82.97 0 176c0 44.37 16.45 84.85 43.56 115.78 16.64 18.99 42.74 58.8 52.42 92.16v.06h48v-.12c-.01-4.77-.72-9.51-2.15-14.07-5.59-17.81-22.82-64.77-62.17-109.67-20.54-23.43-31.52-53.15-31.61-84.14-.2-73.64 59.67-128 127.95-128 70.58 0 128 57.42 128 128 0 30.97-11.24 60.85-31.65 84.14-39.11 44.61-56.42 91.47-62.1 109.46a47.507 47.507 0 0 0-2.22 14.3v.1h48v-.05c9.68-33.37 35.78-73.18 52.42-92.16C335.55 260.85 352 220.37 352 176 352 78.8 273.2 0 176 0z"
+            />
+        </symbol>
+
+        <symbol id="pencil-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path
+                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+            />
+        </symbol>
+
+        <symbol id="plus-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path
+                d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
+            />
+        </symbol>
+
+        <symbol id="share-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path
+                d="M503.691 189.836L327.687 37.851C312.281 24.546 288 35.347 288 56.015v80.053C127.371 137.907 0 170.1 0 322.326c0 61.441 39.581 122.309 83.333 154.132 13.653 9.931 33.111-2.533 28.077-18.631C66.066 312.814 132.917 274.316 288 272.085V360c0 20.7 24.3 31.453 39.687 18.164l176.004-152c11.071-9.562 11.086-26.753 0-36.328z"
+            />
+        </symbol>
+    </svg>
+</template>
diff --git a/resources/js/components/Shared/CopyButton.vue b/resources/js/components/Shared/CopyButton.vue
@@ -1,9 +1,9 @@
 <template>
     <button title="Copy to clipboard" @click="copy(text)">
-        <i
-            class="far fa-clipboard"
-            :class="copied ? 'text-green-300' : 'text-gray-200 hover:text-white'"
-        ></i>
+        <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,8 +16,8 @@
             v-if="editable && editorUrl"
             :href="editorUrl"
             class="ml-2 inline-block text-sm text-purple-400 hover:text-purple-500"
-            ><i class="fas fa-pencil-alt"></i
-        ></a>
+            ><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
-            <i class="ml-2 fas fa-share"></i>
+            <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"
-                ><i class="far fa-lightbulb text-xs mr-1"></i> 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">
-                <i class="fas fa-plus-circle 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"><i class="fa fa-pencil-alt"></i></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"
                     >
-                        <i class="fas fa-arrow-up" />
+                        <Icon name="arrow-up" />
                     </button>
                     <button
                         @click="selectNextFrame"
                         title="Frame down (Key:J)"
                         class="stack-nav-arrow"
                     >
-                        <i class="fas fa-arrow-down" />
+                        <Icon name="arrow-down" />
                     </button>
                 </div>
                 <div class="px-4">

diff --git a/resources/views/errorPage.php b/resources/views/errorPage.php
@@ -23,7 +23,6 @@
         <link rel="stylesheet" href="<?=$housekeepingEndpoint?>/styles/<?=$script?>">
     <?php endforeach; ?>
 
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
 </head>
 <body class="scrollbar-lg">