Emoji Helper (Copy-Paste Safe Icons)

December 17, 2025

Use emojis reliably in posts by choosing one of these lightweight approaches: Unicode (simple), HTML entities (extra safe), or inline SVG icons (consistent style).

  • Best practice: keep emojis in the HTML description area, and keep the script section clean.
  • Safest: use HTML entities so nothing gets mangled by editors.

Quick-safe HTML entities:

  • ⚡ = ⚡
  • ✅ = ✅
  • 🔥 = 🔥
  • ⭐ = ⭐
  • 💡 = 💡
  • 🔧 = 🔧
  • ➡ = ➡
<?php
/**
 * Emoji Helper (Copy-Paste Safe)
 * Drop-in helpers for:
 *  1) HTML entity mapping (safest)
 *  2) Plain unicode (simplest)
 *  3) Optional inline SVG icons (consistent look)
 *
 * Usage (PHP):
 *   echo emj('bolt');                 // prints ⚡ (or entity string if you want)
 *   echo emj_entity('check');         // prints &#9989;
 *   echo emj_span('fire', 'Hot');     // prints <span ...>🔥</span> (escaped)
 *   echo icon_svg('bolt', 16);        // prints inline SVG
 */

declare(strict_types=1);

/** Map names to unicode emoji */
function emj(string $name): string {
    static $map = [
        'bolt'  => "⚡",
        'check' => "✅",
        'fire'  => "🔥",
        'star'  => "⭐",
        'idea'  => "💡",
        'tool'  => "🔧",
        'arrow' => "➡️",
    ];
    return $map[$name] ?? "";
}

/** Map names to HTML numeric entities (safest in HTML output) */
function emj_entity(string $name): string {
    static $map = [
        'bolt'  => "&#9889;",
        'check' => "&#9989;",
        'fire'  => "&#128293;",
        'star'  => "&#11088;",
        'idea'  => "&#128161;",
        'tool'  => "&#128295;",
        'arrow' => "&#10145;",
    ];
    return $map[$name] ?? "";
}

/**
 * Output a safe HTML span containing the emoji + optional label.
 * Good for consistent spacing/alignment in your HTML description blocks.
 */
function emj_span(string $name, string $label = '', array $opts = []): string {
    $emoji = emj($name);
    if ($emoji === '') return '';

    $class = $opts['class'] ?? 'emj';
    $title = $opts['title'] ?? ($label !== '' ? $label : $name);

    $emoji_esc = htmlspecialchars($emoji, ENT_QUOTES, 'UTF-8');
    $title_esc = htmlspecialchars($title, ENT_QUOTES, 'UTF-8');

    $out = '<span class="' . htmlspecialchars($class, ENT_QUOTES, 'UTF-8') . '" title="' . $title_esc . '" aria-hidden="true">' . $emoji_esc . '</span>';
    if ($label !== '') {
        $out .= '<span class="' . htmlspecialchars($class . '-label', ENT_QUOTES, 'UTF-8') . '">' . htmlspecialchars($label, ENT_QUOTES, 'UTF-8') . '</span>';
    }
    return $out;
}

/**
 * Optional: Inline SVG icons (consistent style across platforms).
 * Returns a minimal SVG string you can style with CSS (currentColor).
 */
function icon_svg(string $name, int $size = 16): string {
    $s = max(10, min(64, $size));
    $svg_open = '<svg xmlns="http://www.w3.org/2000/svg" width="'.$s.'" height="'.$s.'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">';
    $svg_close = '</svg>';

    // Minimal set (add more if you want)
    switch ($name) {
        case 'bolt':
            $path = '<path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/>';
            break;
        case 'check':
            $path = '<path d="M20 6L9 17l-5-5"/>';
            break;
        case 'star':
            $path = '<path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/>';
            break;
        case 'arrow':
            $path = '<path d="M5 12h14"/><path d="M13 5l7 7-7 7"/>';
            break;
        default:
            return '';
    }

    return $svg_open . $path . $svg_close;
}

/**
 * Tiny CSS snippet (optional) for consistent emoji spacing.
 * Echo this inside your HTML description if you want, or add to site CSS.
 */
function emj_css(): string {
    return '<style>
.emj{display:inline-block;line-height:1;vertical-align:-0.12em;margin-right:.35em}
.emj-label{margin-right:.6em}
</style>';
}
?>

Comments (0)

No comments yet — be the first.

← Back to all scripts