mirror of
https://github.com/pheralb/svgl.git
synced 2025-02-05 22:48:17 +08:00
✨ Add a utility function to generate SVG web component
This commit is contained in:
parent
c2c876a0c2
commit
21cbb24f17
28
src/templates/getWebComponent.ts
Normal file
28
src/templates/getWebComponent.ts
Normal 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});
|
||||
`;
|
||||
};
|
Loading…
x
Reference in New Issue
Block a user