Skip to content

Instantly share code, notes, and snippets.

@jacine
Last active November 2, 2016 16:26
Show Gist options
  • Save jacine/d97fdaef19a7cbe60a39b85f90f18740 to your computer and use it in GitHub Desktop.
Save jacine/d97fdaef19a7cbe60a39b85f90f18740 to your computer and use it in GitHub Desktop.
Icons for Menu Item links broke with 8.2 upgrade!
{#
/**
* @file
* Drupal pass-through template for icon theme hook implementation.
*
* @see /themes/THEME/components/icon.twig.
*/
#}
{% embed '@components/icon.twig' %}{% endembed %}
{#
/**
* @file
* SVG Icon template
*
* Variables:
* - icon: Name of the icon; SVG should exist as build/img/icons/{icon}.swg
* - text: Fallback text for screen readers, and when icon is not present.
* - text_class: Provides a class using boolean text_visible, to add a class
* which determines whether fallback text should appear visually or not.
* - location: Location of text in markup: left (default) or right of icon).
*/
#}
{% set text_class, location =
text_visible ? 'icon-text' : 'icon-text-fallback',
location ? location : 'left'
%}
{% if icon %}
{% if text and location == 'right' %}
<span class="{{ text_class }}">{{ text }}</span>
{% endif %}
<svg class="icon icon-{{ icon }}"><use xlink:href="#icon-{{ icon }}"></use></svg>
{% if text and location == 'left' %}
<span class="{{ text_class }}">{{ text }}</span>
{% endif %}
{% endif %}
<div class="search">
<button class="search-toggle">
<span class="search-toggle-icon search-toggle-icon--expand">
{% embed '@components/icon.twig' with { icon: 'search-alt', text: 'Toggle Search' } %}{% endembed %}
</span>
<span class="search-toggle-icon search-toggle-icon--collapse">
{% embed '@components/icon.twig' with { icon: 'close-x', text: 'Toggle Search' } %}{% endembed %}
</span>
</button>
{{ form.search }}
<div class="search-buttons">
<span class="search-submit-icon">
{% embed '@components/icon.twig' with { icon: 'search-alt', text: 'Search' } %}{% endembed %}
</span>
{{ form.actions.submit }}
</div>
{{ children }}
</div>
<?php
use Drupal\Core\Url;
/**
* Implements hook_theme().
*/
function THEME_theme($existing, $type, $theme, $path) {
return array(
// Note: This template (icon.html.twig) is only needed for PHP interactions,
// e.g. anything that needs to rendered/altered via PHP, such as menu links.
// The 'icon.twig' implementation can be used directly inside twig templates
// as opposed to the Drupal hook.
'icon' => array(
'template' => 'content/icon',
'variables' => array(
'icon' => NULL,
'text' => NULL,
'location' => 'left',
'text_visible' => false,
),
),
'search_block_form' => array(
'template' => 'form/search',
'render element' => 'form',
),
);
}
/**
* Implements hook_preprocess_menu().
*/
function THEME_preprocess_menu(&$variables) {
$menu_name = $variables['menu_name'];
$menu_items = &$variables['items'];
/**
* Supported Menus
*
* Defines the menus that should render SVG icons instead of text where
* available.
*/
$menus = array(
'secondary-navigation',
'footer-social',
);
if (in_array($menu_name, $menus)) {
/**
* Supported Services
*
* - key: String to search in the href.
* - value: Corresponding icon name to pass to icon template. SVG icon
* should exist in `build/img/icons/value.svg`.
*/
$icons = array(
'facebook.com' => 'facebook',
'instagram.com' => 'instagram',
'twitter.com' => 'twitter',
'plus.google.com' => 'google-plus',
'youtube.com' => 'youtube-play',
'pinterest.com' => 'pinterest',
'stumbleupon.com' => 'stumbleupon',
'tumblr.com' => 'tumblr',
'rss' => 'rss',
'showfinder' => 'tv',
);
foreach ($menu_items as $key => $item) {
$href = $item['url']->toString();
$text_visible = ($href == '/showfinder') ? true : false;
foreach ($icons as $service => $icon) {
if (stristr($href, $service)) {
$menu_items[$key]['title'] = array(
'icon' => array(
'#theme' => 'icon',
'#icon' => $icon,
'#text' => $item['title'],
'#text_visible' => $text_visible,
),
);
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment