Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

fix(overlay): Fix SVG icons not showing properly in the overflow menu (#9235)

Browse source
This commit is contained in:
Erika 2023-11-30 11:27:26 +01:00 committed by GitHub
parent 60cfa49e44
commit 9c2342c327
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 22 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/green-impalas-fetch.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix SVG icons not showing properly in the extended dropdown menu of the dev overlay

16
packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
View file

@ -2,7 +2,6 @@ import type { DevOverlayPlugin as DevOverlayPluginDefinition } from '../../../@t
import { type AstroDevOverlay, type DevOverlayPlugin } from './overlay.js';
import { settings } from './settings.js';
import type { Icon } from './ui-library/icons.js';
let overlay: AstroDevOverlay;
@ -13,7 +12,7 @@ document.addEventListener('DOMContentLoaded', async () => {
{ default: astroAuditPlugin },
{ default: astroXrayPlugin },
{ default: astroSettingsPlugin },
{ AstroDevOverlay, DevOverlayCanvas },
{ AstroDevOverlay, DevOverlayCanvas, getPluginIcon },
{
DevOverlayCard,
DevOverlayHighlight,
@ -188,8 +187,9 @@ document.addEventListener('DOMContentLoaded', async () => {
button.setAttribute('data-plugin-id', plugin.id);
const iconContainer = document.createElement('div');
const iconElement = getPluginIcon(plugin.icon);
iconContainer.append(iconElement);
const iconElement = document.createElement('template');
iconElement.innerHTML = getPluginIcon(plugin.icon);
iconContainer.append(iconElement.content.cloneNode(true));
const notification = document.createElement('div');
notification.classList.add('notification');
@ -224,14 +224,6 @@ document.addEventListener('DOMContentLoaded', async () => {
}
canvas.append(dropdown);
function getPluginIcon(icon: Icon) {
if (isDefinedIcon(icon)) {
return getIconElement(icon)!;
}
return icon;
}
}
},
} satisfies DevOverlayPluginDefinition;

18
packages/astro/src/runtime/client/dev-overlay/overlay.ts
View file

@ -386,19 +386,11 @@ export class AstroDevOverlay extends HTMLElement {
getPluginTemplate(plugin: DevOverlayPlugin) {
return `<button class="item" data-plugin-id="${plugin.id}">
<div class="icon">${this.getPluginIcon(plugin.icon)}<div class="notification"></div></div>
<div class="icon">${getPluginIcon(plugin.icon)}<div class="notification"></div></div>
<span class="item-tooltip">${plugin.name}</span>
</button>`;
}
getPluginIcon(icon: Icon) {
if (isDefinedIcon(icon)) {
return getIconElement(icon)?.outerHTML;
}
return icon;
}
getPluginById(id: string) {
return this.plugins.find((plugin) => plugin.id === id);
}
@ -525,3 +517,11 @@ export class DevOverlayCanvas extends HTMLElement {
</style>`;
}
}
export function getPluginIcon(icon: Icon) {
if (isDefinedIcon(icon)) {
return getIconElement(icon).outerHTML;
}
return icon;
}

6
packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts
View file

@ -5,10 +5,12 @@ export function isDefinedIcon(icon: Icon): icon is DefinedIcon {
return icon in icons;
}
export function getIconElement(name: DefinedIcon): SVGElement;
export function getIconElement(name: string & NonNullable<unknown>): undefined;
export function getIconElement(
name: keyof typeof icons | (string & NonNullable<unknown>)
name: DefinedIcon | (string & NonNullable<unknown>)
): SVGElement | undefined {
const icon = icons[name as keyof typeof icons];
const icon = icons[name as DefinedIcon];
if (!icon) {
return undefined;