mirror of
https://github.com/pheralb/svgl.git
synced 2025-02-06 15:17:58 +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