Add a utility function to generate SVG web component

This commit is contained in:
pheralb 2025-02-04 18:06:12 +00:00
parent c2c876a0c2
commit 21cbb24f17

View File

@ -0,0 +1,28 @@
interface WebComponentParams {
name: string;
content: string;
}
export const getWebComponent = (params: WebComponentParams) => {
return `
class Icon${params.name} extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
}
connectedCallback() {
this.shadowRoot.innerHTML = /* html */ \`
<style>
svg {
width: var(--size, 128px);
color: var(--color, currentColor);
}
</style>
${params.content}
\`;
}
}
customElements.define("icon-${params.name.toLowerCase()}", Icon${params.name});
`;
};