Twenty Twenty: Add filter for social icons regex map to facilitate adding new social icons

[msaari]

Since adding new social icons is a heavy process, how about making it easier for developers to add their own social icons? It's already possible by overriding the whole TwentyTwenty_SVG_Icons class with your own, but that's a bit much for adding just an icon or two.

On the other hand, overriding the twentytwenty_get_theme_svg() function with your own version that adds couple of more icons is easy. This works really well with UI icons, but less so with social icons. The social icons use regex mapping to automatically match social media service URLs to the correct icons.

To facilitate adding new social media icons, I propose adding a new filter hook in the social link SVG code in the get_social_link_svg() function in classes/class-twentytwenty-svg-icons.php. Applying a filter to the $regex_map variable would allow developers to add new social link regexes to the list and thus add new social link icons easily.

With the new filter, adding a new social icon is simple once you have your own version of twentytwenty_get_theme_svg() that provides the icon SVG. All you need then is this:

add_filter( 'social_icon_regex_map', 'add_telegram' );
function add_telegram( $regex_map ) {
	$telegram_domains = array(
		'telegram.org',
		'telegram.me',
		't.me',
	);
	array_map( 'preg_quote', $telegram_domains );
	$regex_map[ 'telegram' ] = sprintf( '/(%s)/i', implode( '|', $telegram_domains ) );

	return $regex_map;
}

[msaari]

Adds the filter to the class-twentytwenty-svg-icons.php

[SergeyBiryukov]

Related: #48713

[desrosj]

Hi @msaari,

Thanks for taking the time to patch this! I am going to close this out as a duplicate of #48713 because that was created first. It also includes context from some folks that helped develop the theme initially and links to a GitHub pull request where this was actually added (it just seems like it never made its way over).

Please do hop on over there and feel free to add some additional suggestions or details!