Overview
Upload custom SVG icons and insert them inline in the block editor. Icons automatically inherit the font size of surrounding text elements.
Features
- Safe SVG Upload — XSS-protected SVG sanitization
- Inline Insertion — RichText toolbar integration in block editor
- Size Inheritance — Icons scale with parent text size (1em x 1em)
- Dedicated Block — Standalone SVG Icon block with size/color controls
- Zero Frontend Bloat — No CSS/JS loaded unless icons are used
SVG Sanitization
Allowed Elements: svg, g, path, circle, ellipse, rect, line, polyline, polygon, defs, clipPath, mask, use, symbol, title, desc, linearGradient, radialGradient, stop
Blocked: script tags, event handlers (onclick, onload, etc.), javascript: URLs, data: URLs, PHP tags
Usage Methods
1. RichText Toolbar
Click the icon button in any text block, search/select icon from library, and the icon is inserted inline at cursor.
2. Dedicated Block
Add “SVG Icon” block, select icon from sidebar, adjust size (px) and color.
3. Shortcode
[func_icon name="arrow-right" class="my-custom-class"]