Icons & Display

Paste raw SVG markup into the textarea field. The SVG is rendered inline in the portal sidebar, which means it scales perfectly at any size and supports currentColor for theme-aware colouring. If FluentCart switches between light and dark mode, your icon follows along without you lifting a finger.

A live preview appears below the textarea as you type — useful for catching that moment when your hand-crafted SVG turns out to be an invisible 0x0 rectangle.

Example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="2" stroke-linecap="round"
     stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 6v6l4 2"/>
</svg>

Security sanitisation:

Because allowing arbitrary SVG in your admin panel would be a spectacular idea, the plugin strips the following on save:

What survives sanitisation is a clean, inert SVG that renders as a visual element and nothing more. If your SVG relies on JavaScript to function, it will not function. That's the point.

Select from a curated list of 29 WordPress Dashicons via a searchable dropdown. Start typing and the list filters down — no need to memorise the full Dashicon catalogue (all 300+ of them) because the plugin has already picked the ones that make sense for portal navigation.

A live preview renders the actual dashicon next to the dropdown so you can see what you're getting.

Available icons:

Dashicons use WordPress's built-in dashicons font — no additional assets are loaded. The icon renders in the sidebar as a <span class="dashicons dashicons-xxx"> element, which means it inherits WordPress's icon styling and sizing conventions.

Good for quick setups where you just need a recognisable icon and can't be bothered hand-crafting SVG. Perfectly respectable. Nobody's judging. (We're judging a little.)

Enter any image URL — PNG, SVG, ICO, whatever you've got — and the plugin renders it as an <img> tag at 20x20px with object-fit: contain. A live preview appears below the input field.

Good for:

• Brand logos that need to be pixel-perfect
• Custom icon sets hosted on a CDN
• That one icon your designer sent as a PNG and refuses to convert to SVG

Things to know:

The URL is sanitised via WordPress's esc_url_raw() when the endpoint is saved. This strips protocol-relative URLs, JavaScript URIs, and other nonsense — but it won't validate that the URL actually points to an image. If you paste a link to a PDF, you'll get a broken image icon in your sidebar and a valuable life lesson.

The container automatically fills the remaining viewport height, minus a 24px bottom margin for breathing room. No magic numbers to guess, no CSS to write — it measures the container's offset from the top of the viewport and sets max-height dynamically.

How it works:

max-height = window.innerHeight - element.getBoundingClientRect().top - 24px

The minimum height is clamped at 200px, so even on absurdly small viewports the content area doesn't collapse into a unusable sliver.

Recalculation triggers:

• Window resize events
• DOM mutations (content loaded asynchronously, AJAX updates, etc.)

This mode is ideal when you don't know how tall the content will be — which, let's be honest, is most of the time. The content scrolls within the portal frame, and the page itself stays put. Your sidebar navigation remains visible. Order is maintained. Everyone's happy.

Set a specific pixel height and call it a day. Content taller than the specified value shows a vertical scrollbar. Content shorter just sits there with empty space below it. Simple, predictable, and requires zero JavaScript — it's pure CSS max-height plus overflow-y: auto.

Configuration:

Good for when you know exactly how much vertical space your content needs — a fixed-height form, an embedded tool with known dimensions, or a page you've already measured. Less adaptive than auto-fit, but also less clever, which sometimes is exactly what you want.