Pictograme inteligente în WordPress

S-a întâmplat de câteva ori să am nevoie de afișarea rapidă a unor pictograme (icons) ori într-un post ori într-un comentariu WordPress. Pentru că <img src... este prea mult și potențial inconsistent, am făcut ce face orice om normal: un plugin. Mă rog… plugin 🙂

Parsăm the_content și get_comment_text și căutăm un pattern de forma icon:nume, apoi îl înlocuim cu ce avem nevoie. În cazul de față, svg-uri.

<?php

/*
Plugin Name: Custom SVG Icons
Description: Hot strings that are replaced with svg icons
Author: Ionuț Staicu
Version: 1.0.0
Author URI: http://ionutstaicu.com
Slug: Custom_SVG_Icons
 */

namespace iamntz\svgIcons;

if (!defined('ABSPATH')) {
	exit;
}

function cutom_svg_icons($content)
{
	$content = preg_replace('/icon:([a-z]+)/', '<svg class="icon custom-svg-icon icon-$1"><use xlink:href="#icon-$1"></use></svg>', $content);
	$content = preg_replace('/icon\\\:([a-z]+)/', 'icon:$1', $content);
	return $content;
}

add_filter('get_comment_text', '\iamntz\svgIcons\cutom_svg_icons');
add_filter('the_content', '\iamntz\svgIcons\cutom_svg_icons');

add_action('wp_footer', function () {
	require_once 'icons.php';
});

Aceste SVG-uri le-am luat de pe icomoon.io și le-am copiat sursa.

<div style="position:absolute; left: -99999px; height:0; width:0; overflow: hidden;">
  <style type="text/css" media="screen">
    .custom-svg-icon {
      display: inline-block;
      width: 1em;
      height: 1em;
      stroke-width: 0;
      stroke: currentColor;
      fill: currentColor;
      vertical-align: middle;
    }
  </style>

  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="icon-windows" viewBox="0 0 32 32">
      <title>windows</title>
      <path fill="#0078d6" style="fill: var(--color8, #0078d6)" d="M0 4.6l13-1.8v12.6h-13zM14.6 2.6l17.4-2.6v15.2h-17.4zM0 16.8h13v12.6l-13-1.8zM14.6 16.8h17.4v15.2l-17.2-2.4z"></path>
    </symbol>

    <symbol id="icon-apple" viewBox="0 0 32 32">
      <title>apple</title>
      <path fill="#999" style="fill: var(--color1, #999)" d="M16.224 9.18c1.080 0 3.088-1.486 5.7-1.486 4.5 0 6.27 3.2 6.27 3.2s-3.46 1.77-3.46 6.064c0 4.84 4.31 6.5 4.31 6.5s-3.014 8.48-7.084 8.48c-1.87 0-3.324-1.26-5.294-1.26-2.008 0-4 1.3-5.296 1.3-3.72 0-8.414-8.060-8.414-14.52 0-6.38 3.976-9.7 7.704-9.7 2.42 0 4.304 1.38 5.564 1.38zM17.35 2.784c2.1-2.77 5.026-2.784 5.026-2.784s0.434 2.606-1.654 5.116c-2.22 2.68-4.76 2.24-4.76 2.24s-0.48-2.108 1.4-4.572z"></path>
    </symbol>

    <!-- restul simbolurilor -->
  </svg>
</div>

Cam asta e tot. Exemple: .

Probabil s-ar putea duce la un alt nivel dacă facem verificări să ne asigurăm că respectiva pictogramă există, să adăugăm și setări, gen icon:microsoft@2x,#c00 etc. Dar ăsta e un subiect pentru altă zi 🙂