✨ Add new templates for Angular, React, Svelte, and Vue components; refactor existing React code

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

@@ -1,11 +1,11 @@
-interface iComponentCode {
+interface ReactComponentParams {
   code: string;
   name: string;
   typescript: boolean;
 }
 
-export const getReactComponentCode = async (
-  params: iComponentCode
+export const getReactCode = async (
+  params: ReactComponentParams
 ): Promise<{ data?: string; error?: string }> => {
   try {
     const getCode = await fetch('/api/svgs/svgr', {
@@ -18,6 +18,6 @@ export const getReactComponentCode = async (
     const data = await getCode.json();
     return data;
   } catch (error) {
-    return { error: 'An error has ocurred. Try again.' };
+    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/utils/componentTemplate.ts

@@ -1,21 +0,0 @@
-import { parseSvgContent } from './parseSvgContent';
-
-export const componentTemplate = (lang: string, content: string, framework: 'Vue' | 'Svelte') => {
-  const { templateContent, componentStyle } = parseSvgContent(content, framework);
-
-  if (framework === 'Vue') {
-    return `<script setup${lang ? ` lang="${lang}"` : ''}></script>
-<template>
- ${templateContent}
-</template>
-  
-    ${componentStyle}
-    `;
-  } else {
-    return `<script${lang ? ` lang="${lang}"` : ''}></script>
- ${templateContent}
-  
-${componentStyle}
-    `;
-  }
-};

src/utils/generateAngularComponent.ts

@@ -1,28 +0,0 @@
-export function generateAngularComponent(svgContent: string, componentName: string): string {
-  const updatedSvgContent = svgContent.replace(
-    /<svg([^>]*)>/,
-    `<svg$1 [attr.width]="size.width" [attr.height]="size.height">`
-  );
-
-  return `
-/**
- * -------------------------------------------------------------------------
- * This Angular standalone component was generated by svgl.app
- * 🧩 A beautiful library with SVG logos
- * -------------------------------------------------------------------------
- */
-
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'svg-${componentName}',
-  standalone: true,
-  template: \`
-    ${updatedSvgContent.trim()}
-  \`,
-})
-export class ${componentName}Component {
-  @Input({ required: true }) size: { width: number; height: number };
-}
-`;
-}

src/utils/getSvgContent.ts

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