Emoji Helper (Copy-Paste Safe Icons)
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 ✅
* 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' => "⚡",
'check' => "✅",
'fire' => "🔥",
'star' => "⭐",
'idea' => "💡",
'tool' => "🔧",
'arrow' => "➡",
];
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.