diff --git a/src/components/copySvg.svelte b/src/components/copySvg.svelte index 80f0746..4f3ecaa 100644 --- a/src/components/copySvg.svelte +++ b/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; + }; (optionsOpen = isOpen)}> @@ -185,6 +214,7 @@ React Vue Svelte + Angular
@@ -265,6 +295,19 @@
+ +
+ +
+ diff --git a/src/components/icons/angularIcon.svelte b/src/components/icons/angularIcon.svelte new file mode 100644 index 0000000..361850a --- /dev/null +++ b/src/components/icons/angularIcon.svelte @@ -0,0 +1,46 @@ + + + + + diff --git a/src/data/svgs.ts b/src/data/svgs.ts index c20cc5a..61e7c2b 100644 --- a/src/data/svgs.ts +++ b/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/' }, @@ -1070,11 +1073,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', @@ -3057,5 +3066,93 @@ export const svgs: iSVG[] = [ 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: '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/' } ]; diff --git a/src/types/categories.ts b/src/types/categories.ts index cbb184a..51ceba1 100644 --- a/src/types/categories.ts +++ b/src/types/categories.ts @@ -25,4 +25,7 @@ export type tCategory = | 'Vercel' | 'Google' | 'Payment' - | 'void(0)'; + | 'void(0)' + | 'Authentication' + | 'IoT' + | 'Home Automation'; diff --git a/src/ui/tabs/tabs-list.svelte b/src/ui/tabs/tabs-list.svelte index f3c0672..bacbcf4 100644 --- a/src/ui/tabs/tabs-list.svelte +++ b/src/ui/tabs/tabs-list.svelte @@ -9,7 +9,7 @@ diff --git a/src/utils/generateAngularComponent.ts b/src/utils/generateAngularComponent.ts new file mode 100644 index 0000000..1644c88 --- /dev/null +++ b/src/utils/generateAngularComponent.ts @@ -0,0 +1,28 @@ +export function generateAngularComponent(svgContent: string, componentName: string): string { + const updatedSvgContent = svgContent.replace( + /]*)>/, + `` + ); + + 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 }; +} +`; +} diff --git a/static/library/aws.svg b/static/library/aws.svg deleted file mode 100644 index aa22f43..0000000 --- a/static/library/aws.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - diff --git a/static/library/aws_dark.svg b/static/library/aws_dark.svg new file mode 100644 index 0000000..25ea3b0 --- /dev/null +++ b/static/library/aws_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/aws_light.svg b/static/library/aws_light.svg new file mode 100644 index 0000000..b2d9005 --- /dev/null +++ b/static/library/aws_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/clerk-dark.svg b/static/library/clerk-dark.svg new file mode 100644 index 0000000..4b66bd3 --- /dev/null +++ b/static/library/clerk-dark.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/library/clerk-light.svg b/static/library/clerk-light.svg new file mode 100644 index 0000000..294837b --- /dev/null +++ b/static/library/clerk-light.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/library/css_old.svg b/static/library/css_old.svg new file mode 100644 index 0000000..c2f6209 --- /dev/null +++ b/static/library/css_old.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/home-assistant-wordmark-dark.svg b/static/library/home-assistant-wordmark-dark.svg new file mode 100644 index 0000000..f4ab146 --- /dev/null +++ b/static/library/home-assistant-wordmark-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/home-assistant-wordmark.svg b/static/library/home-assistant-wordmark.svg new file mode 100644 index 0000000..4fcb416 --- /dev/null +++ b/static/library/home-assistant-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/home-assistant.svg b/static/library/home-assistant.svg new file mode 100644 index 0000000..f7ffe8b --- /dev/null +++ b/static/library/home-assistant.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/json.svg b/static/library/json.svg new file mode 100644 index 0000000..d334daa --- /dev/null +++ b/static/library/json.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/mermaid-logo-dark.svg b/static/library/mermaid-logo-dark.svg new file mode 100644 index 0000000..23ff457 --- /dev/null +++ b/static/library/mermaid-logo-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/mermaid-logo-light.svg b/static/library/mermaid-logo-light.svg new file mode 100644 index 0000000..1af8d88 --- /dev/null +++ b/static/library/mermaid-logo-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/nuqs-wordmark.svg b/static/library/nuqs-wordmark.svg new file mode 100644 index 0000000..1c52695 --- /dev/null +++ b/static/library/nuqs-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/nuqs-wordmark_dark.svg b/static/library/nuqs-wordmark_dark.svg new file mode 100644 index 0000000..e1f1e7b --- /dev/null +++ b/static/library/nuqs-wordmark_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/nuqs.svg b/static/library/nuqs.svg new file mode 100644 index 0000000..5824bb5 --- /dev/null +++ b/static/library/nuqs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/nuqs_dark.svg b/static/library/nuqs_dark.svg new file mode 100644 index 0000000..10335d2 --- /dev/null +++ b/static/library/nuqs_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/posthog-wordmark.svg b/static/library/posthog-wordmark.svg new file mode 100644 index 0000000..ec55c78 --- /dev/null +++ b/static/library/posthog-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/posthog-wordmark_dark.svg b/static/library/posthog-wordmark_dark.svg new file mode 100644 index 0000000..0ed6861 --- /dev/null +++ b/static/library/posthog-wordmark_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/posthog.svg b/static/library/posthog.svg new file mode 100644 index 0000000..8a3fcab --- /dev/null +++ b/static/library/posthog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/soundcloud-logo.svg b/static/library/soundcloud-logo.svg new file mode 100644 index 0000000..f8f4cec --- /dev/null +++ b/static/library/soundcloud-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/soundcloud-logo_dark.svg b/static/library/soundcloud-logo_dark.svg new file mode 100644 index 0000000..4014e90 --- /dev/null +++ b/static/library/soundcloud-logo_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/soundcloud-wordmark.svg b/static/library/soundcloud-wordmark.svg new file mode 100644 index 0000000..43c05a2 --- /dev/null +++ b/static/library/soundcloud-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/soundcloud-wordmark_dark.svg b/static/library/soundcloud-wordmark_dark.svg new file mode 100644 index 0000000..2bd0c89 --- /dev/null +++ b/static/library/soundcloud-wordmark_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/uxanarangel-dark.svg b/static/library/uxanarangel-dark.svg new file mode 100644 index 0000000..19b463c --- /dev/null +++ b/static/library/uxanarangel-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/uxanarangel-light.svg b/static/library/uxanarangel-light.svg new file mode 100644 index 0000000..dad5e79 --- /dev/null +++ b/static/library/uxanarangel-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/uxcorprangel-dark.svg b/static/library/uxcorprangel-dark.svg new file mode 100644 index 0000000..7ee9022 --- /dev/null +++ b/static/library/uxcorprangel-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/uxcorprangel-light.svg b/static/library/uxcorprangel-light.svg new file mode 100644 index 0000000..3e4a0c9 --- /dev/null +++ b/static/library/uxcorprangel-light.svg @@ -0,0 +1 @@ + \ No newline at end of file