@roger I just stumbled upon this thread trying to debug an issue with the Plugin SDK contentAreaSidebarItems function. I’m developing a private plugin and want to add an item to the Content Area Sidebar, but the styling is way out of line compared to the Dato-native items. The icon passed is a white SVG, so this doesn’t show on the frontend for me and the alignment of the icon is also off. There is also no hover action unlike the other items in the sidebar. It would also be nice to just add an emoji to the item instead of a fontawesome svg. Hope this gets fixed!
Hi @lander.piessens,
Welcome to the DatoCMS forum! Just FYI, I split your post into a new thread because it wasn’t about the other sidebars.
First, sorry this is such a convoluted (and poorly-documented!) process. There actually is a way to load a custom SVG icon (but not an emoji), but it seems a bit buggy right now (as you noticed). I’ll let the devs know and see if we can update that hook to be easier to use and better documented. And yeah, being able to use an emoji would be a good idea too!
Let me chat with them and I’ll provide updates as soon as I can.
Using a custom SVG icon
In the meantime, here’s at least how to import a custom SVG… sorry it’s a pain right now! (And it still doesn’t look great in the end, as you noticed)
import {connect} from "datocms-plugin-sdk";
import rawSvg from './color_d_icon.svg?raw'; // ?raw parameter is required: https://vite.dev/guide/assets.html#importing-asset-as-string
/**
* Custom function to extract the viewBox and inner content from a Vite-imported raw SVG string.
*
* If the `viewBox` attribute is missing, attempts to derive it from `width` and `height`.
* Falls back to `'0 0 100 100'` if no sizing attributes are found.
*
* @param rawSvg - The full SVG string (e.g., imported using `?raw` in Vite)
* @returns An object containing the `viewport` (viewBox value) and inner `content` of the SVG
*/
const extractSvgBody = (rawSvg: string): { viewBox: string; content: string } => {
const parser = new DOMParser();
const doc = parser.parseFromString(rawSvg, 'image/svg+xml');
const svgEl = doc.documentElement;
const content = svgEl.innerHTML.trim();
const originalViewBox = svgEl.getAttribute('viewBox');
const originalWidth = svgEl.getAttribute('width');
const originalHeight = svgEl.getAttribute('height');
const viewBox =
originalViewBox ||
(originalWidth && originalHeight ? `0 0 ${originalWidth} ${originalHeight}` : '0 0 100 100');
return {
viewBox,
content
};
};
// You need to extract both the body and viewport out of the SVG
const {viewBox, content} = extractSvgBody(rawSvg);
connect({
contentAreaSidebarItems() {
return [
{
label: 'Example menu item',
pointsTo: {
pageId: 'somewhere'
},
icon: { // Typedef for this here: https://github.com/datocms/plugins-sdk/blob/master/packages/sdk/src/icon.ts#L3-L5
type: 'svg', // Must be 'svg'
viewBox: viewBox, // A viewbox string like '0 0 15 15'
content: content, // The innerHTML inside the SVG tag
}
}
]
}
});
This gets you:
(Yes, spacing/hovering/etc. are still off, sorry!)
Hey @lander.piessens, we have fixed a small CSS issue that was affecting the icons, thank you for the report!
Instead, if you want to use SVGs you can follow this example: https://github.com/datocms/plugins/blob/77f0ed3739bc75b268e994fd2e3016cb95f8c524/unsplash/src/main.tsx#L13-L18
We are going to better document the design guidelines for that part, but the idea is that we recommend using font-awesome as it’s visually consistent with the rest of the UI. So we don’t recommend using emojis or SVGs in general.
Let me know if you need more info.
We just added emoji support in the latest version of the plugin SDK. Now you can use emoji in addition to FontAwesome icons and SVGs. Where you’re asked for an icon, you can specify:
icon: {
type: "emoji",
emoji: "🎉"
}
And we’ll display that instead!