SVG Icons
Upload custom SVG icons and insert them inline in the block editor.
Overview
Upload custom SVG icons and insert them inline in the block editor. Icons automatically inherit the font size of surrounding text elements.
Features
| Feature | Description |
|---|---|
| Safe SVG Upload | XSS-protected SVG sanitization |
| Inline Insertion | RichText toolbar integration in block editor |
| Size Inheritance | Icons scale with parent text size (1em × 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
Shortcode usage
[func_icon name="arrow-right" class="my-custom-class"]