Display SVG social icons in menu

navigation.php

/**
 * Display SVG icons in social links menu.
 *
 * @param  string  $item_output The menu item output.
 * @param  WP_Post $item        Menu item object.
 * @param  int     $depth       Depth of the menu.
 * @param  array   $args        wp_nav_menu() arguments.
 * @return string  $item_output The menu item output with social icon.
 */
function ea_nav_menu_social_icons( $item_output, $item, $depth, $args ) {
	// Change SVG icon inside social links menu if there is supported URL.
	if ( 'site-footer' === $args->theme_location ) {
		$svg = ea_get_social_link_svg( $item->url, 16 );
		if ( ! empty( $svg ) ) {
			$item_output = $svg . $item_output;
		}
	}

	return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'ea_nav_menu_social_icons', 10, 4 );

social-icons.php

<?php
/**
 * Social Icons
 *
 * @package      ClientName
 * @author       Bill Erickson
 * @since        1.0.0
 * @license      GPL-2.0+
**/
/**
 * Detects the social network from a URL and returns the SVG code for its icon.
 *
 */
function ea_get_social_link_svg( $uri, $size = 24 ) {
	return EA_Social_Icons::get_social_link_svg( $uri, $size );
}
class EA_Social_Icons {
	/**
	 * Detects the social network from a URL and returns the SVG code for its icon.
	 */
	public static function get_social_link_svg( $uri, $size ) {
		static $regex_map; // Only compute regex map once, for performance.
		if ( ! isset( $regex_map ) ) {
			$regex_map = array();
			$map       = &self::$social_icons_map; // Use reference instead of copy, to save memory.
			$icons = scandir( get_template_directory() . '/assets/icons/social' );
			$icons = array_diff( $icons, array( '..', '.' ) );
			$icons = array_values( $icons );
			foreach( $icons as $i => $icon ) {
				$icons[ $i ] = substr( $icon, 0, -4 );
			}
			foreach ( $icons as $icon ) {
				$domains            = array_key_exists( $icon, $map ) ? $map[ $icon ] : array( sprintf( '%s.com', $icon ) );
				$domains            = array_map( 'trim', $domains ); // Remove leading/trailing spaces, to prevent regex from failing to match.
				$domains            = array_map( 'preg_quote', $domains );
				$regex_map[ $icon ] = sprintf( '/(%s)/i', implode( '|', $domains ) );
			}
		}
		foreach ( $regex_map as $icon => $regex ) {
			if ( preg_match( $regex, $uri ) ) {
				return ea_icon( array( 'icon' => $icon, 'size' => $size, 'group' => 'social' ) );
			}
		}
		return null;
	}
	/**
	 * Social Icons – domain mappings.
	 *
	 * By default, each Icon ID is matched against a .com TLD. To override this behavior,
	 * specify all the domains it covers (including the .com TLD too, if applicable).
	 *
	 * @var array
	 */
	static $social_icons_map = array(
		'facebook'    => array(
			'facebook.com',
			'fb.me',
		),
		'feed'    => array(
			'feed',
		),
	);
}
Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk