diff --git a/components/_patterns/01-atoms/04-images/00-image/01-image~logo.yml b/components/_patterns/01-atoms/04-images/00-image/image~logo.yml similarity index 100% rename from components/_patterns/01-atoms/04-images/00-image/01-image~logo.yml rename to components/_patterns/01-atoms/04-images/00-image/image~logo.yml diff --git a/components/_patterns/01-atoms/04-images/icons/_icon.twig b/components/_patterns/01-atoms/04-images/icons/_icon.twig new file mode 100644 index 00000000..87a380fc --- /dev/null +++ b/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 %} #} + + + + diff --git a/components/_patterns/01-atoms/04-images/icons/_icon_sprite.scss b/components/_patterns/01-atoms/04-images/icons/_icon_sprite.scss deleted file mode 100644 index 7c583568..00000000 --- a/components/_patterns/01-atoms/04-images/icons/_icon_sprite.scss +++ /dev/null @@ -1,14 +0,0 @@ -@mixin svg-common { - background: url("svg/sprite.css.svg") no-repeat; -} - -@mixin sprite-menu { - @include svg-common; - - background-position: 0 0; -} - -.sprite-menu { - @include sprite-menu; -} - diff --git a/components/_patterns/01-atoms/04-images/icons/_icons.scss b/components/_patterns/01-atoms/04-images/icons/_icons.scss deleted file mode 100644 index d651f192..00000000 --- a/components/_patterns/01-atoms/04-images/icons/_icons.scss +++ /dev/null @@ -1,17 +0,0 @@ -// Icon Styling -.sprite-icon { - background-size: 100% 100%; - display: block; - height: 0; - padding: 40%; - width: 100%; -} - -.icon-inline-menu { - display: flex; - - &::before { - @include sprite-menu; - @include with-icon; - } -} diff --git a/components/_patterns/01-atoms/04-images/icons/icons.md b/components/_patterns/01-atoms/04-images/icons/icons.md index a51c6ee7..68d28414 100644 --- a/components/_patterns/01-atoms/04-images/icons/icons.md +++ b/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... + +``` + + + +``` + +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; -} + + + ``` diff --git a/components/_patterns/01-atoms/04-images/icons/icons.twig b/components/_patterns/01-atoms/04-images/icons/icons.twig index eafa9296..137bdaa5 100644 --- a/components/_patterns/01-atoms/04-images/icons/icons.twig +++ b/components/_patterns/01-atoms/04-images/icons/icons.twig @@ -1,13 +1,14 @@
{% for item in items %} -

{{ item.name }}

+
+ {% include "@atoms/04-images/icons/_icon.twig" with { + icon_name: item.value, + } %} +

{{ item.value }}

+
{% endfor %}

- -

Inline icon examples

- -

Menu

diff --git a/components/_patterns/01-atoms/04-images/icons/icons.yml b/components/_patterns/01-atoms/04-images/icons/icons.yml index 39937fdd..e47476ca 100644 --- a/components/_patterns/01-atoms/04-images/icons/icons.yml +++ b/components/_patterns/01-atoms/04-images/icons/icons.yml @@ -1,4 +1,4 @@ items: 1: - name: "Menu" - value: "menu" + name: "Bars" + value: "bars" diff --git a/components/_patterns/02-molecules/menus/main-menu/_03-main-menu-toggle.scss b/components/_patterns/02-molecules/menus/main-menu/_03-main-menu-toggle.scss index 01a36e64..e6670c80 100644 --- a/components/_patterns/02-molecules/menus/main-menu/_03-main-menu-toggle.scss +++ b/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; } diff --git a/components/_patterns/02-molecules/menus/main-menu/main-menu.twig b/components/_patterns/02-molecules/menus/main-menu/main-menu.twig index 2aca050d..ca90c3cd 100644 --- a/components/_patterns/02-molecules/menus/main-menu/main-menu.twig +++ b/components/_patterns/02-molecules/menus/main-menu/main-menu.twig @@ -1,10 +1,10 @@ - - - + {% include "@atoms/04-images/icons/_icon.twig" with { + icon_base_class: 'icon', + icon_blockname: 'toggle-expand', + icon_name: 'bars', + } %} Main Menu diff --git a/components/_patterns/05-pages/_styleguide-specific.scss b/components/_patterns/05-pages/_styleguide-specific.scss index e5cd87e9..240aa43a 100644 --- a/components/_patterns/05-pages/_styleguide-specific.scss +++ b/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; } } } diff --git a/components/js/svgxuse.min.js b/components/js/svgxuse.min.js new file mode 100644 index 00000000..ce2099f3 --- /dev/null +++ b/components/js/svgxuse.min.js @@ -0,0 +1,12 @@ +/*! + * @copyright Copyright (c) 2017 IcoMoon.io + * @license Licensed under MIT license + * See https://github.com/Keyamoon/svgxuse + * @version 1.2.6 + */ +(function(){if("undefined"!==typeof window&&window.addEventListener){var e=Object.create(null),l,d=function(){clearTimeout(l);l=setTimeout(n,100)},m=function(){},t=function(){window.addEventListener("resize",d,!1);window.addEventListener("orientationchange",d,!1);if(window.MutationObserver){var k=new MutationObserver(d);k.observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0});m=function(){try{k.disconnect(),window.removeEventListener("resize",d,!1),window.removeEventListener("orientationchange", +d,!1)}catch(v){}}}else document.documentElement.addEventListener("DOMSubtreeModified",d,!1),m=function(){document.documentElement.removeEventListener("DOMSubtreeModified",d,!1);window.removeEventListener("resize",d,!1);window.removeEventListener("orientationchange",d,!1)}},u=function(k){function e(a){if(void 0!==a.protocol)var c=a;else c=document.createElement("a"),c.href=a;return c.protocol.replace(/:/g,"")+c.host}if(window.XMLHttpRequest){var d=new XMLHttpRequest;var m=e(location);k=e(k);d=void 0=== +d.withCredentials&&""!==k&&k!==m?XDomainRequest||void 0:XMLHttpRequest}return d};var n=function(){function d(){--q;0===q&&(m(),t())}function l(a){return function(){!0!==e[a.base]&&(a.useEl.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#"+a.hash),a.useEl.hasAttribute("href")&&a.useEl.setAttribute("href","#"+a.hash))}}function p(a){return function(){var c=document.body,b=document.createElement("x");a.onload=null;b.innerHTML=a.responseText;if(b=b.getElementsByTagName("svg")[0])b.setAttribute("aria-hidden", +"true"),b.style.position="absolute",b.style.width=0,b.style.height=0,b.style.overflow="hidden",c.insertBefore(b,c.firstChild);d()}}function n(a){return function(){a.onerror=null;a.ontimeout=null;d()}}var a,c,q=0;m();var f=document.getElementsByTagName("use");for(c=0;c