🚀 Add new /templates utility + add support for web components

src/templates/getAngularCode.ts

@@ -0,0 +1,26 @@
+interface AngularComponentParams {
+  svgContent: string;
+  componentName: string;
+}
+
+export function getAngularCode(params: AngularComponentParams): string {
+  const updatedSvgContent = params.svgContent.replace(
+    /<svg([^>]*)>/,
+    `<svg$1 [attr.width]="size.width" [attr.height]="size.height">`
+  );
+
+  return `
+  import { Component, Input } from '@angular/core';
+  
+  @Component({
+    selector: 'svg-${params.componentName}',
+    standalone: true,
+    template: \`
+      ${updatedSvgContent.trim()}
+    \`,
+  })
+  export class ${params.componentName}Component {
+    @Input({ required: true }) size: { width: number; height: number };
+  }
+  `;
+}

src/templates/getReactCode.ts

@@ -0,0 +1,23 @@
+interface ReactComponentParams {
+  code: string;
+  name: string;
+  typescript: boolean;
+}
+
+export const getReactCode = async (
+  params: ReactComponentParams
+): Promise<{ data?: string; error?: string }> => {
+  try {
+    const getCode = await fetch('/api/svgs/svgr', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    });
+    const data = await getCode.json();
+    return data;
+  } catch (error) {
+    return { error: `⚠️ getReactCode: An error has ocurred - ${error}` };
+  }
+};

src/templates/getSource.ts

@@ -0,0 +1,9 @@
+interface SourceParams {
+  url: string | undefined;
+}
+
+export const getSource = async (params: SourceParams) => {
+  const response = await fetch(params.url || '');
+  const content = await response.text();
+  return content;
+};

src/templates/getSvelteCode.ts

@@ -0,0 +1,15 @@
+import { parseSvgContent } from '@/utils/parseSvgContent';
+
+interface SvelteComponentParams {
+  lang: string;
+  content: string;
+}
+
+export const getSvelteCode = (params: SvelteComponentParams) => {
+  const { templateContent, componentStyle } = parseSvgContent(params.content, 'Svelte');
+  return `<script${params.lang ? ` lang="${params.lang}"` : ''}></script>
+  ${templateContent}
+   
+ ${componentStyle}
+     `;
+};

src/templates/getVueCode.ts

@@ -0,0 +1,17 @@
+import { parseSvgContent } from '@/utils/parseSvgContent';
+
+interface VueComponentParams {
+  lang: string;
+  content: string;
+}
+
+export const getVueCode = (params: VueComponentParams) => {
+  const { templateContent, componentStyle } = parseSvgContent(params.content, 'Vue');
+  return `<script setup${params.lang ? ` lang="${params.lang}"` : ''}></script>
+<template>
+ ${templateContent}
+</template>
+  
+    ${componentStyle}
+    `;
+};

src/templates/getWebComponent.ts

@@ -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});
+    `;
+};