Adding a Icon to External Links

Adding a Icon to External Links

<?php // For implementation instructions see: https://aceplugins.com/how-to-add-a-code-snippet/	

/**
 * Add link icons.
 *
 * Adds a external-link icon to external links only.
 */
function ace_add_external_link_icon(  ) {
	wp_register_script( 'external-link-icon', false );
	wp_enqueue_script( 'external-link-icon' );
	
	wp_add_inline_script( 'external-link-icon', "
		function externalLinkIcon() {
			var icon = '<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 20 20\">' +
				'<path d=\"M9 3h8v8l-2-1V6.92l-5.6 5.59l-1.41-1.41L14.08 5H10zm3 12v-3l2-2v7H3V6h8L9 8H5v7h7z\" fill=\"currentColor\"/>' +
				'</svg>';

			// Check if content is available
			if (!document.querySelector('.entry-content')) return;

			var links = document.querySelector('.entry-content').querySelectorAll('a');
			[...links].forEach(function (link) {
				if (link.host !== window.location.host) {
					link.innerHTML += ' ' + icon;
				}
			});
		}
		window.addEventListener('load', externalLinkIcon, false);
	" );
}
add_action( 'wp_enqueue_scripts', 'ace_add_external_link_icon' );