Merge pull request #206 from fourkitchens/SVG-method-switch

SVG sprite method change

components/_patterns/01-atoms/04-images/icons/_icon.twig

@@ -0,0 +1,23 @@
+{#
+/**
+ * Available variables:
+ * - icon_base_class - base class name
+ * - icon_modifiers - modifiers for icons (array)
+ * - icon_blockname - blockname prepended to the base classname
+ * - icon_name - the name of the icon
+ */
+#}
+{% set icon_base_class = icon_base_class|default('icon') %}
+{% set icon_url = '' %}
+
+{# Drupal #}
+{# {% if attributes or theme_hook_original %}
+  {% set icon_url = '/themes/custom/YOURTHEME/dist/img/sprite/' %}
+  {{ attach_library('emulsify/sprite') }}
+{% else %} #}
+  {% set icon_url = '/dist/img/sprite/' %}
+{# {% endif %} #}
+
+<svg {{ bem(icon_base_class, (icon_modifiers), icon_blockname, (icon_js_class)) }}>
+  <use xlink:href="{{ icon_url }}sprite.svg#{{ icon_name }}"></use>
+</svg>

components/_patterns/01-atoms/04-images/icons/icons.md

@@ -3,15 +3,42 @@ title: Icons
 ---
 ### How to use icons
 
-We are using a gulp SVG sprite generator, which automatically creates the SVG CSS in `_icon_sprite.scss`. Simply add separate SVG files into `images/icons/src/` and they will be added to the sprite the next time `gulp icons` is run.
+We are using a gulp SVG sprite generator (details [here](https://una.im/svg-icons)), which automatically creates the SVG in `/images/icons/sprite/sprite.svg`. Simply run `gulp icons` to add to the sprite.
 
-**Writing Sass**
+**Usage**
 
-If you look in `_icon_sprite.scss`, you will notice there is a mixin and class for each sprite. You can use whatever approach suits your situation. **Note: You will need to tweak the background-size in 04-images/icons/_icons.scss each time a sprite is added.** You can also make use of the following mixins from `00-base/_mixins.scss` to provide inline icons before text:
+The SVG component is found here: `/components/_patterns/01-atoms/04-images/icons/_icon.twig`. See available variables in that file. Examples of usage below:
+
+Simple: (no BEM renaming)
+
+```
+{% include "@atoms/04-images/icons/_icon.twig" with {
+  icon_name: 'bars',
+} %}
+```
+
+... creates...
+
+```
+<svg class="icon">
+  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/sprite/sprite.svg#src--bars"></use>
+</svg>
+```
+
+Complex (BEM classes):
+
+```
+{% include "@atoms/04-images/icons/_icon.twig" with {
+  icon_base_class: 'icon',
+  icon_blockname: 'toggle-expand',
+  icon_name: 'bars',
+} %}
+```
+
+... creates...
 
 ```
-.TEXT_WITH_ICON_BEFORE_IT {
-  @include ICONNAME; // e.g., sprite-chevron-right
-  @include with-icon;
-}
+<svg class="toggle-expand__icon">
+  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/sprite/sprite.svg#src--bars"></use>
+</svg>
 ```

components/_patterns/01-atoms/04-images/icons/icons.twig

@@ -1,13 +1,14 @@
 <div class="icons-demo" id="icons">
 
   {% for item in items %}
-    <div><span class="sprite-{{ item.value }} sprite-icon"></span><p>{{ item.name }}</p></div>
+    <div>
+      {% include "@atoms/04-images/icons/_icon.twig" with {
+        icon_name: item.value,
+      } %}
+      <p>{{ item.value }}</p>
+    </div>
   {% endfor %}
 
 </div>
 
 <br>
-
-<h3 class="h3">Inline icon examples</h3>
-
-<p class="icon-inline-menu">Menu</p>

components/_patterns/01-atoms/04-images/icons/icons.yml

@@ -1,4 +1,4 @@
 items:
   1:
-    name: "Menu"
-    value: "menu"
+    name: "Bars"
+    value: "bars"

components/_patterns/02-molecules/menus/main-menu/_03-main-menu-toggle.scss

@@ -27,9 +27,10 @@
   }
 }
 
+// SVG icon
 .toggle-expand__icon {
-  width: 5rem;
-  padding-bottom: 3rem;
+  height: 3rem;
+  width: 3rem;
   margin: 0 auto;
 }
 

components/_patterns/02-molecules/menus/main-menu/main-menu.twig

@@ -1,10 +1,10 @@
 <a href="#" id="toggle-expand" class="toggle-expand">
   <span class="toggle-expand__open">
-    <span class="toggle-expand__icon sprite-menu sprite-icon">
-      <span class="visually-hidden">
-        Mobile menu expand icon.
-      </span>
-    </span>
+    {% include "@atoms/04-images/icons/_icon.twig" with {
+      icon_base_class: 'icon',
+      icon_blockname: 'toggle-expand',
+      icon_name: 'bars',
+    } %}
     <span class="toggle-expand__text">Main Menu</span>
   </span>
   <span class="toggle-expand__close">

components/_patterns/05-pages/_styleguide-specific.scss

@@ -22,10 +22,14 @@
 
     & > div {
       border: 1px solid #eee;
-      margin-right: 1%;
+      margin-right: 1em;
       padding: 1em;
       text-align: center;
-      width: 10%;
+    }
+
+    .icon {
+      height: 4rem;
+      width: 4rem;
     }
   }
 }

emulsify.libraries.yml

@@ -3,9 +3,12 @@ global:
     theme:
       dist/style.css: {}
 
-# Example of Library syntax
 main_menu:
   js:
     dist/02-molecules/menus/main-menu/main-menu.js: {}
   dependencies:
     - core/drupal
+
+sprite:
+  js:
+    components/js/svgxuse.min.js: { attributes: { defer: true } }