Add padding control setting for custom SVG menu icons

Impact: 65 · Confidence: 95 · Complexity: 30

Description

Problem: Custom SVG icons added via the 'Custom icon image' feature can render clipped or cropped at their outer edges in navigation menus because there is no native padding/spacing control available in the plugin UI.\n\nDesired Behavior: Add a padding setting alongside existing SVG controls (SVG Width, Vertical Align) in the WP Menu Icons item settings panel, allowing users to define inner padding for custom SVG icons directly from the UI.\n\nAcceptance Criteria:\n- Add a padding input control (e.g., in px) to the custom SVG display settings in the menu item editor.\n- Apply the specified padding to custom SVG menu icon elements (img._mi._svg) with box-sizing: border-box.\n- Default to 0px padding so existing menu icon rendering remains unchanged unless configured.

Customer Context

Thorsten Hoeppner (pro user) requested a padding setting for the 'Custom icon image' feature to prevent SVG icons from being cut off along the edges in navigation menus.

Root Cause Analysis

SVG graphics added via custom menu icon image settings often extend to the bounding box edge. Without padding controls, navigation menu styling and container boundaries cause outer SVG edges to clip or truncate. Current display controls only cover width and vertical alignment, leaving padding adjustment to manual CSS overrides (padding and box-sizing: border-box). Adding a native padding option directly in the plugin controls eliminates the need for manual CSS customization.

Reasoning

The customer requested a padding control setting for custom SVG menu icons uploaded via the 'Custom icon image' feature. Currently, Menu Icons provides SVG Width and Vertical Align controls, but lacks a padding control, causing SVGs to clip at the edges unless custom CSS is added. Documentation and GitHub issue searches confirm no existing setting or reported issue exists for this feature.

Source: HelpScout #3417537260
Generated by feature-request-triage workflow (ID: feature-request-triage_6a7da3d1aa3799.26384753)