Merge branch 'main' into logo/motion

2025-12-29 08:01:36 +08:00 · 2025-01-19 11:47:43 +00:00
parent ab436304f9 974cf4b3b0
commit c0e7b697b1
63 changed files with 457 additions and 40 deletions
@@ -72,3 +72,12 @@
  src: url('/fonts/GeistMonoVariableVF.woff2') format('woff2');
  font-display: swap;
 }
+
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: transparent !important;
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
@@ -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,27 @@
          </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>
+    <div
+      class="mt-1 flex w-full items-center text-center text-[12px] text-neutral-600 dark:text-neutral-400"
+    >
+      <p>
+        Remember to request permission from the creators for the use of the SVG. Modification is not
+        allowed.
+      </p>
+    </div>
  </Popover.Content>
 </Popover.Root>
@@ -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
+>
@@ -13,7 +13,8 @@
    Sparkles,
    EllipsisIcon,
    TagIcon,
-    XIcon
+    XIcon,
+    PaletteIcon
  } from 'lucide-svelte';

  // Components & styles:
@@ -57,8 +58,10 @@
  let maxVisibleCategories = 1;
  let moreTagsOptions = false;

-  // Global Images Styles:
+  // Global Styles:
  const globalImageStyles = 'mb-4 mt-2 h-10 select-none pointer-events-none';
+  const btnStyles =
+    'flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40';
 </script>

 <div
@@ -175,7 +178,7 @@
              : svgInfo.route
          );
        }}
-        class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+        class={btnStyles}
      >
        <ChevronsRight size={iconSize} strokeWidth={iconStroke} />
      </button>
@@ -200,7 +203,7 @@
      title="Website"
      target="_blank"
      rel="noopener noreferrer"
-      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+      class={btnStyles}
    >
      <LinkIcon size={iconSize} strokeWidth={iconStroke} />
    </a>
@@ -210,7 +213,7 @@
        on:click={() => {
          wordmarkSvg = !wordmarkSvg;
        }}
-        class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+        class={btnStyles}
      >
        {#if wordmarkSvg}
          <Sparkles size={iconSize} strokeWidth={iconStroke} />
@@ -219,5 +222,16 @@
        {/if}
      </button>
    {/if}
+    {#if svgInfo.brandUrl !== undefined}
+      <a
+        href={svgInfo.brandUrl}
+        title="Brand Assets"
+        target="_blank"
+        rel="noopener noreferrer"
+        class={btnStyles}
+      >
+        <PaletteIcon size={iconSize} strokeWidth={iconStroke} />
+      </a>
+    {/if}
  </div>
 </div>
@@ -5,28 +5,28 @@
  import { cn } from '@/utils/cn';

  let warning = false;
-  let warningName = 'svgl_warning_message';
+  let warningName = 'svgl_warn_message';
  const initialValue = browser ? window.localStorage.getItem(warningName) : true;
 </script>

 {#if !warning && !initialValue}
  <div
-    class="flex items-center w-full justify-between md:flex-row flex-col md:space-x-2 space-x-0 space-y-2 md:space-y-0 py-2 px-3 bg-neutral-100/60 dark:bg-neutral-800/40 text-neutral-700 dark:text-neutral-300 border-b border-neutral-200 dark:border-neutral-800"
+    class="flex w-full flex-col items-center justify-between space-x-0 space-y-2 border-b border-neutral-200 bg-neutral-100/60 px-3 py-2 text-neutral-700 dark:border-neutral-800 dark:bg-neutral-800/40 dark:text-neutral-300 md:flex-row md:space-x-2 md:space-y-0"
  >
    <div class="flex items-center space-x-2">
      <AlertTriangleIcon
        size={18}
        strokeWidth={2}
-        class="mr-1 flex-shrink-0 text-yellow-600 dark:text-yellow-500 animate-pulse"
+        class="mr-1 flex-shrink-0 animate-pulse text-yellow-600 dark:text-yellow-500"
      />
      <p>
        All SVGs include links to the respective products or companies that own them. <strong
-          >Please contact the owner directly if you intend to use their logo.</strong
+          >Please contact the owner directly if you need to use their logo.</strong
        >
-        If you are the owner of an SVG and prefer it not to be displayed here,
+        If you are the owner of an SVG and would like it removed,
        <a
          target="_blank"
-          class="underline underline-offset-4 decoration-dotted decoration-neutral-500"
+          class="underline decoration-neutral-500 decoration-dotted underline-offset-4"
          href="https://github.com/pheralb/svgl/issues/new">create an issue</a
        > on GitHub.
      </p>
@@ -1,6 +1,13 @@
 import type { iSVG } from '../types/svg';

 export const svgs: iSVG[] = [
+  {
+    title: 'PayPal',
+    category: 'Payment',
+    route: '/library/paypal.svg',
+    wordmark: '/library/paypal-wordmark.svg',
+    url: 'https://paypal.com'
+  },
  {
    title: 'Google Drive',
    category: 'Google',
@@ -214,7 +221,7 @@ export const svgs: iSVG[] = [
  },
  {
    title: 'JWT',
-    category: 'Library',
+    category: ['Library', 'Authentication'],
    route: '/library/jwt.svg',
    url: 'https://jwt.io/'
  },
@@ -239,7 +246,7 @@ export const svgs: iSVG[] = [
  },
  {
    title: 'WorkOS',
-    category: 'Software',
+    category: ['Software', 'Authentication'],
    route: {
      light: '/library/workos.svg',
      dark: '/library/workos-light.svg'
@@ -575,7 +582,7 @@ export const svgs: iSVG[] = [
  },
  {
    title: 'Twilio',
-    category: 'Software',
+    category: ['Software', 'Authentication'],
    route: '/library/twilio.svg',
    url: 'https://twilio.com'
  },
@@ -615,7 +622,7 @@ export const svgs: iSVG[] = [
  },
  {
    title: 'Authy',
-    category: 'Software',
+    category: ['Software', 'Authentication'],
    route: '/library/authy.svg',
    url: 'https://authy.com/'
  },
@@ -736,7 +743,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 +820,7 @@ export const svgs: iSVG[] = [
  },
  {
    title: 'Auth0',
-    category: 'Library',
+    category: ['Library', 'Authentication'],
    route: '/library/auth0.svg',
    url: 'https://auth0.com/'
  },
@@ -1070,11 +1080,17 @@ export const svgs: iSVG[] = [
    url: 'https://es.wikipedia.org/wiki/HTML5'
  },
  {
-    title: 'CSS',
+    title: 'CSS (New)',
    category: 'Language',
    route: '/library/css.svg',
    url: 'https://es.wikipedia.org/wiki/CSS'
  },
+  {
+    title: 'CSS',
+    category: 'Language',
+    route: '/library/css_old.svg',
+    url: 'https://es.wikipedia.org/wiki/CSS'
+  },
  {
    title: 'midudev',
    category: 'Community',
@@ -1399,6 +1415,13 @@ export const svgs: iSVG[] = [
    route: '/library/webkit.svg',
    url: 'https://webkit.org/'
  },
+  {
+    title: 'DuckDuckGo',
+    category: ['Software', 'Browser'],
+    route: '/library/duckduckgo.svg',
+    wordmark: '/library/duckduckgo-wordmark.svg',
+    url: 'https://duckduckgo.com/'
+  },
  {
    title: 'Gemini',
    category: ['Google', 'AI'],
@@ -2644,6 +2667,7 @@ export const svgs: iSVG[] = [
      light: '/library/vercel_wordmark.svg',
      dark: '/library/vercel_wordmark_dark.svg'
    },
+    brandUrl: 'https://vercel.com/geist/brands',
    url: 'https://vercel.com/'
  },
  {
@@ -3049,6 +3073,147 @@ export const svgs: iSVG[] = [
    },
    url: 'https://polar.sh/'
  },
+  {
+    title: 'bolt',
+    category: 'Devtool',
+    route: {
+      light: '/library/bolt-new.svg',
+      dark: '/library/bolt-new_dark.svg'
+    },
+    url: 'https://bolt.new/'
+  },
+  {
+    title: 'JSON',
+    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: 'Music',
+    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/'
+  },
+  {
+    title: 'Lottielab',
+    category: 'Design',
+    route: '/library/lottielab.svg',
+    url: 'https://www.lottielab.com/'
+  },
+  {
+    title: 'TanStack',
+    category: ['Software', 'Library'],
+    route: '/library/tanstack.svg',
+    url: 'https://tanstack.com/'
+  },
+  {
+    title: 'TypeGPU',
+    category: ['Software', 'Library'],
+    route: {
+      light: '/library/typegpu-light.svg',
+      dark: '/library/typegpu-dark.svg'
+    },
+    wordmark: {
+      light: '/library/typegpu-wordmark-light.svg',
+      dark: '/library/typegpu-wordmark-dark.svg'
+    },
+    url: 'https://typegpu.com'
+  },
+  {
+    title: 'dotenv',
+    category: ['Config', 'Library', 'Devtool'],
+    route: '/library/dotenv.svg',
+    url: 'https://github.com/motdotla/dotenv'
+  },
+  {
+    title: 'dotenvx',
+    category: ['Secrets', 'Config', 'Devtool'],
+    route: '/library/dotenvx.svg',
+    url: 'https://dotenvx.com'
+  },
+  {
+    title: 'Apache Kafka',
+    category: 'Software',
+    route: '/library/apache-kafka.svg',
+    wordmark: '/library/apache-kafka-wordmark.svg',
+    url: 'https://kafka.apache.org'
+  },
  {
    title: 'Motion',
    category: 'Library',
@@ -39,17 +39,18 @@ export interface Category {
 - For SVGs:

 ```ts
-type ThemeOptions = {
-  light: string;
+export type ThemeOptions = {
  dark: string;
+  light: string;
 };

 export interface iSVG {
-  id: number;
+  id?: number;
  title: string;
-  category: string | string[];
+  category: tCategory | tCategory[];
  route: string | ThemeOptions;
  wordmark?: string | ThemeOptions;
+  brandUrl?: string;
  url: string;
 }
 ```
@@ -42,7 +42,7 @@
    'prose dark:prose-invert',
    'mx-auto max-w-3xl px-4 py-10',
    'prose-h2:font-medium prose-h2:tracking-tight prose-h2:underline prose-h2:decoration-neutral-300 prose-h2:underline-offset-[6px] prose-h2:transition-opacity hover:prose-h2:opacity-70 dark:prose-h2:decoration-neutral-700/65',
-    'prose-pre:m-0 prose-pre:border-neutral-200 dark:prose-pre:border dark:prose-pre:border-neutral-800/65'
+    'prose-pre:m-0 prose-pre:border prose-pre:border-neutral-200 dark:prose-pre:border dark:prose-pre:border-neutral-800/65'
  )}
 >
  <svelte:component this={data.content} />
@@ -25,4 +25,9 @@ export type tCategory =
  | 'Vercel'
  | 'Google'
  | 'Payment'
-  | 'void(0)';
+  | 'void(0)'
+  | 'Authentication'
+  | 'IoT'
+  | 'Home Automation'
+  | 'Config'
+  | 'Secrets';
@@ -11,5 +11,6 @@ export interface iSVG {
  category: tCategory | tCategory[];
  route: string | ThemeOptions;
  wordmark?: string | ThemeOptions;
+  brandUrl?: string;
  url: string;
 }
@@ -21,7 +21,7 @@
  {sideOffset}
  {...$$restProps}
  class={cn(
-    'z-50 w-auto rounded-md border border-neutral-200 bg-white p-3 shadow-md outline-none dark:border-neutral-800 dark:bg-neutral-900',
+    'z-50 w-auto max-w-96 rounded-md border border-neutral-200 bg-white p-3 shadow-md outline-none dark:border-neutral-800 dark:bg-neutral-900',
    className
  )}
 >
@@ -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 />
@@ -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 };
+}
+`;
+}