Merge branch 'main' into logo/json

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/data/svgs.ts

@@ -214,7 +214,7 @@ export const svgs: iSVG[] = [
   },
   {
     title: 'JWT',
-    category: 'Library',
+    category: ['Library', 'Authentication'],
     route: '/library/jwt.svg',
     url: 'https://jwt.io/'
   },
@@ -239,7 +239,7 @@ export const svgs: iSVG[] = [
   },
   {
     title: 'WorkOS',
-    category: 'Software',
+    category: ['Software', 'Authentication'],
     route: {
       light: '/library/workos.svg',
       dark: '/library/workos-light.svg'
@@ -575,7 +575,7 @@ export const svgs: iSVG[] = [
   },
   {
     title: 'Twilio',
-    category: 'Software',
+    category: ['Software', 'Authentication'],
     route: '/library/twilio.svg',
     url: 'https://twilio.com'
   },
@@ -615,7 +615,7 @@ export const svgs: iSVG[] = [
   },
   {
     title: 'Authy',
-    category: 'Software',
+    category: ['Software', 'Authentication'],
     route: '/library/authy.svg',
     url: 'https://authy.com/'
   },
@@ -736,7 +736,10 @@ export const svgs: iSVG[] = [
   {
     title: 'Amazon Web Services',
     category: 'Software',
-    route: '/library/aws.svg',
+    route: {
+      light: '/library/aws_light.svg',
+      dark: '/library/aws_dark.svg'
+    },
     url: 'https://aws.amazon.com/'
   },
   {
@@ -810,7 +813,7 @@ export const svgs: iSVG[] = [
   },
   {
     title: 'Auth0',
-    category: 'Library',
+    category: ['Library', 'Authentication'],
     route: '/library/auth0.svg',
     url: 'https://auth0.com/'
   },
@@ -3054,5 +3057,87 @@ export const svgs: iSVG[] = [
     category: 'Language',
     route: '/library/json.svg',
     url: 'https://json.org/'
+  },
+  {
+    title: 'nuqs',
+    category: 'Library',
+    route: {
+      light: '/library/nuqs.svg',
+      dark: '/library/nuqs_dark.svg'
+    },
+    wordmark: {
+      light: '/library/nuqs-wordmark.svg',
+      dark: '/library/nuqs-wordmark_dark.svg'
+    },
+    url: 'https://nuqs.47ng.com/'
+  },
+  {
+    title: 'SoundCloud',
+    category: 'Entertainment',
+    route: {
+      light: '/library/soundcloud-logo.svg',
+      dark: '/library/soundcloud-logo_dark.svg'
+    },
+    wordmark: {
+      light: '/library/soundcloud-wordmark.svg',
+      dark: 'library/soundcloud-wordmark_dark.svg'
+    },
+    url: 'https://soundcloud.com/'
+  },
+  {
+    title: 'Clerk',
+    category: ['Software', 'Authentication'],
+    route: {
+      light: '/library/clerk-light.svg',
+      dark: '/library/clerk-dark.svg'
+    },
+    url: 'https://clerk.com/'
+  },
+  {
+    title: 'Mermaid',
+    category: ['Library'],
+    route: {
+      light: '/library/mermaid-logo-light.svg',
+      dark: '/library/mermaid-logo-dark.svg'
+    },
+    url: 'https://mermaid.js.org/'
+  },
+  {
+    title: 'Home Assistant',
+    category: ['IoT', 'Home Automation', 'Software'],
+    route: '/library/home-assistant.svg',
+    wordmark: {
+      light: '/library/home-assistant-wordmark.svg',
+      dark: '/library/home-assistant-wordmark-dark.svg'
+    },
+    url: 'https://github.com/home-assistant/assets/tree/master/logo'
+  },
+  {
+    title: 'UXAnaRangel',
+    category: ['Community'],
+    route: {
+      light: '/library/uxanarangel-light.svg',
+      dark: '/library/uxanarangel-dark.svg'
+    },
+    url: 'https://uxanarangel.com/'
+  },
+  {
+    title: 'UXCorpRangel',
+    category: ['Community'],
+    route: {
+      light: '/library/uxcorprangel-light.svg',
+      dark: '/library/uxcorprangel-dark.svg'
+    },
+    url: 'https://github.com/UXCorpRangel/'
+  },
+  {
+    title: 'PostHog',
+    category: 'Devtool',
+    route: '/library/posthog.svg',
+    wordmark: {
+      light: '/library/posthog-wordmark.svg',
+      dark: '/library/posthog-wordmark_dark.svg'
+    },
+    url: 'https://posthog.com/'
   }
 ];

src/types/categories.ts

@@ -25,4 +25,7 @@ export type tCategory =
   | 'Vercel'
   | 'Google'
   | 'Payment'
-  | 'void(0)';
+  | 'void(0)'
+  | 'Authentication'
+  | 'IoT'
+  | 'Home Automation';

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