Convert icon fonts over to unicode and SVGs

waynestate · May 18, 2018 · 23a8f03 · 23a8f03
1 parent 3487402
commit 23a8f03
Show file tree

Hide file tree

Showing 26 changed files with 98 additions and 164 deletions.
diff --git a/README.md b/README.md
@@ -205,6 +205,15 @@ $menus = [
         * If the page is NOT within then menu then you need to specify the path to the page. Set `var $path = '/path/to/your/page'` inside your `styleguide/Pages/` class.
     1. Set controller to the one you created in step #4.
 
+## Adding SVG icons
+
+1. Load the fontello-config.json file into http://fontello.com/
+1. Select the new icons and download the set.
+1. Load the waynestate.svg file into https://icomoon.io/app/#/select
+1. Select all the icons and download the set.
+1. Open the new SVG icon(s) in the editor of your choice.
+1. Save each file under resources/views/svg as a blade partial.
+
 ## Contributing
 
 Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
@@ -32,6 +32,10 @@ public function boot()
 
             return "<?php echo view('components.image-lazy', ['src' => $params[0], 'alt' => $params[1], 'class' => $params[2]])->render(); ?>";
         });
+
+        Blade::directive('svg', function ($title) {
+            return "<?php if(view()->exists('svg.'.".$title.")) { echo view('svg.'.".$title."); echo '<p class=\"visually-hidden\">'.".$title.".'</p>'; } ?>";
+        });
     }
 
     /**

diff --git a/factories/FooterSocial.php b/factories/FooterSocial.php
@@ -51,10 +51,6 @@ public function create($limit = 1)
                 'link' => $this->faker->url,
                 'title' => 'youtube',
             ],
-            8 => [
-                'link' => $this->faker->url,
-                'title' => 'chat',
-            ],
         ];
 
         // Make sure they aren't requesting more icons that we have available

diff --git a/resources/fonts/config.json → fontello-config.json b/resources/fonts/config.json → fontello-config.json
@@ -48,53 +48,11 @@
       "code": 59406,
       "src": "entypo"
     },
-    {
-      "uid": "004882ab2d5c418c5b2060e80596279b",
-      "css": "right-open-big",
-      "code": 59392,
-      "src": "entypo"
-    },
-    {
-      "uid": "884cfc3e6e2d456dd2a2ca0dbb9e6337",
-      "css": "left-open-big",
-      "code": 59393,
-      "src": "entypo"
-    },
-    {
-      "uid": "37f6cfbb4062ed0d01b351ec35c334ff",
-      "css": "right-open-mini",
-      "code": 59394,
-      "src": "entypo"
-    },
-    {
-      "uid": "f11c9e95ae5eaa84d193e8fa1d38c6f9",
-      "css": "down-open-mini",
-      "code": 59395,
-      "src": "entypo"
-    },
-    {
-      "uid": "592717bd601645d61517d2a584d04127",
-      "css": "left-open-mini",
-      "code": 59396,
-      "src": "entypo"
-    },
     {
       "uid": "d7271d490b71df4311e32cdacae8b331",
       "css": "home",
       "code": 59397,
       "src": "fontawesome"
-    },
-    {
-      "uid": "c709da589c923ba3c2ad48d9fc563e93",
-      "css": "cancel-1",
-      "code": 59416,
-      "src": "entypo"
-    },
-    {
-      "uid": "dcedf50ab1ede3283d7a6c70e2fe32f3",
-      "css": "chat",
-      "code": 59398,
-      "src": "fontawesome"
     }
   ]
 }
diff --git a/resources/fonts/waynestate.eot b/resources/fonts/waynestate.eot
diff --git a/resources/fonts/waynestate.svg b/resources/fonts/waynestate.svg
diff --git a/resources/fonts/waynestate.ttf b/resources/fonts/waynestate.ttf
diff --git a/resources/fonts/waynestate.woff b/resources/fonts/waynestate.woff
diff --git a/resources/fonts/waynestate.woff2 b/resources/fonts/waynestate.woff2
diff --git a/resources/js/modules/offcanvas.js b/resources/js/modules/offcanvas.js
@@ -37,7 +37,7 @@ import Slideout from 'slideout/dist/slideout.js';
             var childNode = document.createElement('span');
 
             if(parentNode != null) {
-                childNode.classList.add('expand-icons', 'icon-right-open-mini', 'float-right', 'text-2xl', 'flex');
+                childNode.classList.add('expand-icons', 'icon-right-open', 'float-right');
                 parentNode.prepend(childNode);
             }
 
@@ -47,11 +47,11 @@ import Slideout from 'slideout/dist/slideout.js';
                     document.querySelector('.offcanvas-main-menu ul ul').classList.toggle('hidden');
 
                     if(document.querySelector('.offcanvas-main-menu ul ul').offsetParent === null) {
-                        document.querySelector('a.main-menu-toggle .expand-icons').classList.toggle('icon-right-open-mini');
-                        document.querySelector('a.main-menu-toggle .expand-icons').classList.toggle('icon-down-open-mini');
+                        document.querySelector('a.main-menu-toggle .expand-icons').classList.toggle('icon-right-open');
+                        document.querySelector('a.main-menu-toggle .expand-icons').classList.toggle('icon-down-open');
                     } else {
-                        document.querySelector('a.main-menu-toggle .expand-icons').classList.toggle('icon-down-open-mini');
-                        document.querySelector('a.main-menu-toggle .expand-icons').classList.toggle('icon-right-open-min');
+                        document.querySelector('a.main-menu-toggle .expand-icons').classList.toggle('icon-down-open');
+                        document.querySelector('a.main-menu-toggle .expand-icons').classList.toggle('icon-right-open');
                     }
 
                     // Return false so it does not complete the click through
@@ -81,7 +81,7 @@ import Slideout from 'slideout/dist/slideout.js';
             window.WayneState.modules.slideout.on('close', function () {
                  // Swap icon and adjust screen size
                  document.querySelector('#panel').classList.remove('min-h-screen');
-                 document.querySelector('.menu-toggle').classList.remove('icon-cancel-1');
+                 document.querySelector('.menu-toggle').classList.remove('icon-cancel');
                  document.querySelector('.menu-toggle').classList.add('menu-icon');
                  document.querySelector('#menu').classList.add('hidden');
                  document.querySelector('#menu').setAttribute('aria-hidden', 'true');
@@ -91,7 +91,7 @@ import Slideout from 'slideout/dist/slideout.js';
             window.WayneState.modules.slideout.on('beforeopen', function () {
                 // Swap icon and adjust screen size
                 document.querySelector('#panel').classList.add('min-h-screen');
-                document.querySelector('.menu-toggle').classList.add('icon-cancel-1');
+                document.querySelector('.menu-toggle').classList.add('icon-cancel');
                 document.querySelector('.menu-toggle').classList.remove('menu-icon');
                 document.querySelector('#menu').classList.remove('hidden');
                 document.querySelector('#menu').setAttribute('aria-hidden', 'false');

diff --git a/resources/scss/components/_font-icons.scss b/resources/scss/components/_font-icons.scss
diff --git a/resources/scss/components/_icons.scss b/resources/scss/components/_icons.scss
@@ -0,0 +1,17 @@
+.icon-cancel {
+    &::after {
+        content: "×";
+    }
+}
+
+.icon-right-open {
+    &::after {
+        content: ">";
+    }
+}
+
+.icon-down-open {
+    &::after {
+        content: "∨";
+    }
+}
diff --git a/resources/scss/components/_menu-icon.scss b/resources/scss/components/_menu-icon.scss
@@ -22,7 +22,3 @@
 .menu-icon:hover::after {
     @apply .bg-grey .shadow-grey;
 }
-
-.icon-cancel-1 {
-    @apply .text-white;
-}
diff --git a/resources/scss/components/_menu-offcanvas.scss b/resources/scss/components/_menu-offcanvas.scss
@@ -22,6 +22,7 @@
 
             text-transform: uppercase;
             font-size: 1rem;
+            cursor: pointer;
         }
 
         // Menu Header top level (MAIN MENU)
@@ -69,4 +70,13 @@
             padding-left: 3em;
         }
     }
+
+    .icon-right-open {
+        font-size: 1.1em;
+    }
+
+    .icon-down-open {
+        font-size: 1em;
+        font-weight: bold;
+    }
 }
diff --git a/resources/scss/components/_menu-top.scss b/resources/scss/components/_menu-top.scss
@@ -98,7 +98,11 @@
             font-size: 2em;
         }
 
-        .icon-cancel-1::before {
+        .icon-cancel {
+            @apply .text-white;
+        }
+
+        .icon-cancel::before {
             text-align: right;
         }
     }

diff --git a/resources/scss/main.scss b/resources/scss/main.scss
@@ -15,8 +15,8 @@
 @import "components/banner";
 @import "components/button";
 @import "components/content";
-@import "components/font-icons";
 @import "components/formy";
+@import "components/icons";
 @import "components/menu-icon";
 @import "components/menu-main";
 @import "components/menu-offcanvas";

diff --git a/resources/views/components/breadcrumbs.blade.php b/resources/views/components/breadcrumbs.blade.php
@@ -6,15 +6,15 @@
         @foreach($breadcrumbs as $key=>$crumb)
             @if($key == 0)
                 <li class="inline">
-                    <a href="/"><span class="icon-home text-black text-lg"></span><span class="visually-hidden">{{ strip_tags($crumb['display_name']) }}</span></a>
-                    <span class="icon-right-open-mini"></span>
+                    <a href="/"><span class="text-black align-middle">@svg('home')</span><span class="visually-hidden">{{ strip_tags($crumb['display_name']) }}</span></a>
+                    <span class="icon-right-open px-2"></span>
             @elseif($key == (count($breadcrumbs) - 1))
                 <li class="font-bold text-green-dark inline">
                     {{ $crumb['display_name'] }}
             @else
                 <li class="inline">
                 <a href="{{ $crumb['relative_url'] }}" class="text-green-dark hover:underline">{{ $crumb['display_name'] }}</a>
-                <span class="icon-right-open-mini"></span>
+                <span class="icon-right-open px-2"></span>
             @endif
             </li>
         @endforeach

diff --git a/resources/views/components/footer-social.blade.php b/resources/views/components/footer-social.blade.php
@@ -5,8 +5,8 @@
     <ul class="row list-reset text-center">
         @foreach($social as $item)
             <li class="inline{{ $loop->last !== true ? ' mr-8' : '' }}">
-                <a href="{{ $item['link'] }}" target="_blank" rel="noopener" class="inline-block text-grey hover:text-white">
-                    <span class="icon-{{ strtolower($item['title']) }} table-cell align-middle text-3xl h-14 w-14 bg-grey-darkest rounded-full transition transition-property-bg transition-delay-none hover:bg-green-lightest"></span><p class="visually-hidden">{{ $item['title'] }}</p>
+                <a href="{{ $item['link'] }}" target="_blank" rel="noopener" class="inline-block pt-1 text-grey fill-current table-cell align-middle h-14 w-14 bg-grey-darkest rounded-full transition transition-property-bg transition-delay-none hover:bg-green-lightest hover:text-white">
+                    @svg($item['title'])
                 </a>
             </li>
         @endforeach

diff --git a/resources/views/svg/facebook.blade.php b/resources/views/svg/facebook.blade.php
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="32" viewBox="0 0 16 32">
+    <title>facebook</title>
+    <path d="M16 6.592h-4.544q-0.448 0-0.8 0.48t-0.352 1.184v3.264h5.696v4.736h-5.696v14.144h-5.44v-14.144h-4.864v-4.736h4.864v-2.752q0-3.008 1.888-5.088t4.704-2.080h4.544v4.992z"></path>
+</svg>
diff --git a/resources/views/svg/flickr.blade.php b/resources/views/svg/flickr.blade.php
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="27" height="32" viewBox="0 0 27 32">
+    <title>flickr</title>
+    <path d="M22.272 2.272q2.144 0 3.648 1.536t1.504 3.616v17.152q0 2.112-1.504 3.616t-3.648 1.536h-17.12q-2.144 0-3.648-1.536t-1.504-3.616v-17.152q0-2.112 1.504-3.616t3.648-1.536h17.12zM12.48 16q0-1.568-1.12-2.688t-2.688-1.088-2.656 1.088-1.12 2.688 1.12 2.688 2.656 1.088 2.688-1.088 1.12-2.688zM22.528 16q0-1.568-1.088-2.688t-2.688-1.088-2.688 1.088-1.088 2.688 1.088 2.688 2.688 1.088 2.688-1.088 1.088-2.688z"></path>
+</svg>
diff --git a/resources/views/svg/home.blade.php b/resources/views/svg/home.blade.php
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 30 32">
+    <title>home</title>
+    <path d="M25.152 17.728v8.544q0 0.48-0.352 0.8t-0.8 0.352h-6.848v-6.848h-4.576v6.848h-6.848q-0.48 0-0.8-0.352t-0.352-0.8v-8.544q0-0.032 0-0.064t0-0.064l10.272-8.448 10.272 8.448q0.032 0.032 0.032 0.128zM29.12 16.48l-1.088 1.312q-0.16 0.16-0.384 0.192h-0.064q-0.224 0-0.384-0.096l-12.352-10.304-12.352 10.304q-0.224 0.128-0.416 0.096-0.224-0.032-0.384-0.192l-1.12-1.312q-0.128-0.192-0.096-0.416t0.192-0.384l12.832-10.688q0.576-0.48 1.344-0.48t1.376 0.48l4.352 3.616v-3.456q0-0.256 0.16-0.416t0.416-0.16h3.424q0.256 0 0.416 0.16t0.16 0.416v7.264l3.904 3.264q0.192 0.128 0.192 0.384t-0.128 0.416z"></path>
+</svg>
diff --git a/resources/views/svg/instagram.blade.php b/resources/views/svg/instagram.blade.php
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="32" viewBox="0 0 28 32">
+    <title>instagram</title>
+    <path d="M22.080 16q0-0.832-0.192-1.6h5.632v11.008q0 1.792-1.248 3.072t-3.040 1.28h-18.944q-1.792 0-3.040-1.28t-1.248-3.072v-11.008h5.568q-0.128 1.024-0.128 1.6 0 3.392 2.432 5.856t5.888 2.464q3.392 0 5.856-2.464t2.464-5.856zM23.232 2.24q1.792 0 3.040 1.248t1.248 3.040v4.672h-6.976q-2.496-3.52-6.784-3.52-4.416 0-6.784 3.52h-6.976v-4.672q0-1.792 1.248-3.040t3.040-1.248h18.944zM25.28 7.552v-2.304q0-0.768-0.768-0.768h-2.304q-0.768 0-0.768 0.768v2.304q0 0.256 0.224 0.512t0.544 0.256h2.304q0.768 0 0.768-0.768zM18.88 16q0 2.112-1.504 3.616t-3.616 1.504-3.616-1.504-1.504-3.616q0-2.176 1.504-3.648t3.616-1.472 3.616 1.472 1.504 3.648z"></path>
+</svg>
diff --git a/resources/views/svg/linkedin.blade.php b/resources/views/svg/linkedin.blade.php
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="29" height="32" viewBox="0 0 29 32">
+    <title>linkedin</title>
+    <path d="M6.528 4.864q0 1.28-0.928 2.176t-2.4 0.896q-1.408 0-2.304-0.896t-0.896-2.176q0-1.344 0.896-2.208t2.368-0.864 2.336 0.864 0.928 2.208zM0.192 30.144v-19.776h6.144v19.776h-6.144zM9.984 16.704q0-2.752-0.128-6.336h5.312l0.32 2.752h0.128q1.92-3.2 6.080-3.2 3.2 0 5.152 2.144t1.952 6.368v11.712h-6.144v-10.944q0-4.288-3.136-4.288-2.24 0-3.136 2.304-0.192 0.384-0.192 1.536v11.392h-6.208v-13.44z"></path>
+</svg>