Add @ICON Blade helper

Also fix heading hierarchy in README.

Author: tannerhodges

CHANGELOG.md

@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 - Syntax highlighting in README
 - Add example markup to starter kit (replaces default Laravel welcome view)
+- `@icon` Blade helper (see install notes in `resources/views/elements/icon.blade.php`)
 
 ### Changed
 

README.md

@@ -244,7 +244,7 @@ var dom = require('mode-front-end/resources/assets/js/dom');
 - `Visibility`
 - `window`
 
-## Event
+### Event
 
 - `animationEvents`
 - `clearStack`
@@ -253,31 +253,37 @@ var dom = require('mode-front-end/resources/assets/js/dom');
 - `throttle`
 - `transitionEvents`
 
-## General
+### General
 
 - `menuAim`
 
-## HTTP
+### HTTP
 
 - `ajax`
 
-## Object
+### Object
 
 - `extend`
 
-## Shim
+### Shim
 
 - `requestAnimationFrame`
 
-## Typography
+### Typography
 
 - `balanceText`
 - `shorten`
 
-## Video
+### Video
 
 - `youTubeReady`
 
+## Laravel
+
+### Blade Helpers
+
+- `@icon` (see install notes in `resources/views/elements/icon.blade.php`)
+
 ---
 
 ## TODO

laravel/Providers/IconServiceProvider.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\ServiceProvider;
+
+class IconServiceProvider extends ServiceProvider
+{
+    /**
+     * Perform post-registration booting of services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        Blade::directive('icon', function ($expression) {
+            return "<?php echo icon({$expression}); ?>";
+        });
+    }
+
+    /**
+     * Register bindings in the container.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+}

laravel/Support/helpers.php

@@ -0,0 +1,3 @@
+<?php
+
+require_once('helpers/icon.php');

laravel/Support/helpers/icon.php

@@ -0,0 +1,32 @@
+<?php
+
+if (!function_exists('icon')) {
+
+    /**
+     * Render icons.
+     * @param  string $name
+     * @param  array  $data
+     * @return string
+     */
+    function icon($name = '', array $data = [])
+    {
+        $data['sprite'] = empty($data['sprite']) ? 'global' : $data['sprite'];
+        $data['icon'] = $name;
+
+        if (!empty($data['attributes'])) {
+            $attributes = [];
+
+            foreach ($data['attributes'] as $attributeName => $attributeValue) {
+                if (empty($attributeValue)) {
+                    $attributes[] = $attributeName;
+                    continue;
+                }
+                $attributes[] = sprintf("%s=\"%s\"", $attributeName, addcslashes($attributeValue, '"'));
+            }
+
+            $data['attributes'] = $attributes;
+        }
+
+        return view('elements.icon', $data)->render();
+    }
+}

resources/views/elements/icon.blade.php

@@ -0,0 +1,76 @@
+<?php
+/**
+ * ## App Config
+ *
+ * In `config/app.php`:
+ *
+ * ```php
+ * // Application Service Providers...
+ * App\Providers\IconServiceProvider::class,
+ * ```
+ *
+ * In `composer.json`:
+ *
+ * ```php
+ * "autoload": {
+ *     "files": [
+ *         "app/Support/helpers.php"
+ *     ]
+ * }
+ * ```
+ *
+ * Then copy the helper functions, the service provider, and update the autoloader:
+ *
+ * ```bash
+ * # Provider
+ * cp node_modules/mode-front-end/laravel/Providers/IconServiceProvider.php app/Providers/IconServiceProvider.php
+ * # Helper
+ * mkdir -p app/Support/helpers
+ * cp node_modules/mode-front-end/laravel/Support/helpers.php app/Support/helpers.php
+ * cp node_modules/mode-front-end/laravel/Support/helpers/icon.php app/Support/helpers/icon.php
+ * # View
+ * mkdir -p resources/views/elements
+ * cp node_modules/mode-front-end/resources/views/elements/icon.blade.php resources/views/elements/icon.blade.php
+ * # Autoloader
+ * php artisan optimize
+ * ```
+ *
+ * ## Markup
+ *
+ * ```php
+ * Example:
+ * @icon('mode-logo')
+ *
+ * Example with verbose options:
+ * @icon('mode-logo', [
+ *   'sprite' => 'global',
+ *   'class' => 'u-display-block  /  u-text-align-center',
+ *   'attributes' => ['data-name' => 'Example Icon']
+ * ])
+ * ```
+ *
+ * ## Variables
+ *
+ * Required:
+ *
+ * - $icon
+ * - $sprite
+ *
+ * Optional:
+ *
+ * - $class
+ * - $attributes
+ */
+
+$class = empty($class) ? [] : [$class];
+array_unshift($class, 'o-icon  o-icon--' . $icon);
+$class = implode('  /  ', $class);
+
+$attributes = empty($attributes) ? [] : $attributes;
+$attributes = implode(' ', $attributes);
+
+?><i class="{{ $class }}" {!! $attributes !!}>
+  <svg>
+    <use xlink:href="{{ asset('img/svg/sprites/' . $sprite . '.svg') . '#' . $icon }}"></use>
+  </svg>
+</i>

starter-kit/assets/sass/app.scss

@@ -14,6 +14,7 @@
 
 // Objects
 @import 'objects/grid';
+@import 'objects/icon';
 
 // Components
 @import 'components/browser-upgrade';

starter-kit/assets/sass/objects/_icon.scss

@@ -0,0 +1,16 @@
+@include o-icon();
+
+// Sizes
+@include o-icon--size(70, 70);
+
+
+
+// ------------------------------
+// Responsive
+// ------------------------------
+
+// Max-width
+// @include o-icon--size(70, 70, 'lt-sm');
+
+// Min-width
+// @include o-icon--size(70, 70, 'sm');