diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts
index b0db5de94f05..951101bae8b2 100644
--- a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts
@@ -47,9 +47,9 @@ export default {
.then((res) => res.json())
.then((data) => {
integrationData = data;
- integrationData.data = integrationData.data.map(integration => {
+ integrationData.data = integrationData.data.map((integration) => {
return integration;
- })
+ });
refreshIntegrationList();
});
}
@@ -78,7 +78,7 @@ export default {
link: 'https://github.com/withastro/astro',
},
{
- icon: '',
+ icon: '',
name: 'Our Discord',
link: 'https://astro.build/chat',
},
@@ -401,9 +401,12 @@ export default {
const icon = document.createElement('astro-dev-overlay-icon');
icon.icon = iconForIntegration(integration);
integrationImage.append(icon);
- integrationImage.style.setProperty('--integration-image-background', colorForIntegration());
+ integrationImage.style.setProperty(
+ '--integration-image-background',
+ colorForIntegration()
+ );
}
-
+
integrationContainer.append(integrationImage);
let integrationTitle = document.createElement('h3');
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/icon.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/icon.ts
index 9ae7f28e6efa..65ef7c27028d 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/icon.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/icon.ts
@@ -9,9 +9,7 @@ export class DevOverlayIcon extends HTMLElement {
}
set icon(name: Icon | undefined) {
this._icon = name;
- this.shadowRoot.innerHTML = `\n${this.getIconHTML(
- this._icon
- )}`;
+ this.buildTemplate();
}
constructor() {
@@ -19,7 +17,11 @@ export class DevOverlayIcon extends HTMLElement {
this.shadowRoot = this.attachShadow({ mode: 'open' });
- if (this.hasAttribute('icon')) this.icon = this.getAttribute('icon') as Icon;
+ if (this.hasAttribute('icon')) {
+ this.icon = this.getAttribute('icon') as Icon;
+ } else {
+ this.buildTemplate();
+ }
}
getIconHTML(icon: Icon | undefined) {
@@ -30,4 +32,10 @@ export class DevOverlayIcon extends HTMLElement {
// If the icon that was passed isn't one of the predefined one, assume that they're passing it in as a slot
return '';
}
+
+ buildTemplate() {
+ this.shadowRoot.innerHTML = `\n${this.getIconHTML(
+ this._icon
+ )}`;
+ }
}