Merge pull request #472 from rperezll/main

Add functionality to copy SVG as a fully functional Angular standalone component

src/components/copySvg.svelte

@@ -15,11 +15,13 @@
   import { buttonStyles } from '@/ui/styles';
   import { cn } from '@/utils/cn';
   import { componentTemplate } from '@/utils/componentTemplate';
+  import { generateAngularComponent } from '@/utils/generateAngularComponent';
 
   //Icons:
   import ReactIcon from './icons/reactIcon.svelte';
   import VueIcon from './icons/vueIcon.svelte';
   import SvelteIcon from './icons/svelteIcon.svelte';
+  import AngularIcon from './icons/angularIcon.svelte';
 
   // Props:
   export let iconSize = 24;
@@ -163,6 +165,33 @@
       toast.error(`Failed to copy ${framework} component`);
     }
   };
+
+  // Copy SVG as Standalone Angular component:
+  const convertSvgAngularComponent = async () => {
+    isLoading = true;
+    optionsOpen = false;
+
+    const title = svgInfo.title.split(' ').join('');
+    const svgUrlToCopy = getSvgUrl();
+    const content = await getSvgContent(svgUrlToCopy);
+
+    if (!content) {
+      toast.error('Failed to fetch the SVG content', {
+        duration: 5000
+      });
+      isLoading = false;
+      return;
+    }
+
+    const angularComponent = generateAngularComponent(content, title);
+    await clipboard(angularComponent);
+
+    toast.success(`Copied as Standalone Angular component`, {
+      description: `${svgInfo.title} - ${svgInfo.category}`
+    });
+
+    isLoading = false;
+  };
 </script>
 
 <Popover.Root open={optionsOpen} onOpenChange={(isOpen) => (optionsOpen = isOpen)}>
@@ -185,6 +214,7 @@
         <Tabs.Trigger value="react">React</Tabs.Trigger>
         <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
         <Tabs.Trigger value="svelte">Svelte</Tabs.Trigger>
+        <Tabs.Trigger value="angular">Angular</Tabs.Trigger>
       </Tabs.List>
       <Tabs.Content value="source">
         <section class="flex flex-col space-y-2">
@@ -265,6 +295,19 @@
           </button>
         </section>
       </Tabs.Content>
+      <Tabs.Content value="angular">
+        <section class="flex flex-col space-y-2">
+          <button
+            class={cn(buttonStyles, 'w-full rounded-md')}
+            title="Copy as Standalone Component"
+            disabled={isLoading}
+            on:click={() => convertSvgAngularComponent()}
+          >
+            <AngularIcon iconSize={18} />
+            <span>Copy Standalone Component</span>
+          </button>
+        </section>
+      </Tabs.Content>
     </Tabs.Root>
   </Popover.Content>
 </Popover.Root>

src/components/icons/angularIcon.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  export let iconSize: number;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={iconSize || 16}
+  height={iconSize || 16}
+  viewBox="0 0 242 256"
+  ><g clip-path="url(#a)"
+    ><mask
+      id="b"
+      width="242"
+      height="256"
+      x="0"
+      y="0"
+      maskUnits="userSpaceOnUse"
+      style="mask-type:luminance"><path fill="#fff" d="M0 0h242v256H0V0Z" /></mask
+    ><g mask="url(#b)"
+      ><path
+        fill="url(#c)"
+        d="m241 43-9 136L149 0l92 43Zm-58 176-62 36-63-36 12-31h101l12 31ZM121 68l32 80H88l33-80ZM9 179 0 43 92 0 9 179Z"
+      /><path
+        fill="url(#d)"
+        d="m241 43-9 136L149 0l92 43Zm-58 176-62 36-63-36 12-31h101l12 31ZM121 68l32 80H88l33-80ZM9 179 0 43 92 0 9 179Z"
+      /></g
+    ></g
+  ><defs
+    ><linearGradient id="c" x1="53.2" x2="245" y1="231.9" y2="140.7" gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#E40035" /><stop offset=".2" stop-color="#F60A48" /><stop
+        offset=".4"
+        stop-color="#F20755"
+      /><stop offset=".5" stop-color="#DC087D" /><stop offset=".7" stop-color="#9717E7" /><stop
+        offset="1"
+        stop-color="#6C00F5"
+      /></linearGradient
+    >
+    <linearGradient id="d" x1="44.5" x2="170" y1="30.7" y2="174" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FF31D9" /><stop
+        offset="1"
+        stop-color="#FF5BE1"
+        stop-opacity="0"
+      /></linearGradient
+    ><clipPath id="a"><path fill="#fff" d="M0 0h242v256H0z" /></clipPath></defs
+  ></svg
+>

src/ui/tabs/tabs-list.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <TabsPrimitive.List
-  class={cn('inline-flex h-9 items-center justify-center space-x-1 rounded-lg', className)}
+  class={cn('mb-2 flex flex-wrap items-center justify-center space-x-1 rounded-lg', className)}
   {...$$restProps}
 >
   <slot />

src/utils/generateAngularComponent.ts

@@ -0,0 +1,28 @@
+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 };
+}
+`;
+}