Merge pull request #4 from Polyfrost/website/icon-fix

1 files changed, 45 insertions, 40 deletions

diff --git a/apps/website/src/components/logos/Logo.astro b/apps/website/src/components/logos/Logo.astro
index 2fd6bea..cd780ad 100644
--- a/apps/website/src/components/logos/Logo.astro
+++ b/apps/website/src/components/logos/Logo.astro
@@ -1,52 +1,57 @@
 ---
-import type { LogoType } from "@webtypes/Config";
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import type { HTMLAttributes } from "astro/types";
-
-export interface Props extends HTMLAttributes<"svg"> {
-    logo: LogoType,
-    size?: number | [number, number],
-    silent?: boolean,
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import type { LogoType } from '@webtypes/Config';
+import type { HTMLAttributes } from 'astro/types';
+
+export interface Props extends HTMLAttributes<'svg'> {
+	logo: LogoType
+	size?: number | [number, number]
+	silent?: boolean
 }
 
 const {
-    logo,
-    silent = false,
-    size = undefined,
-    ...attr
+	logo,
+	size = undefined,
+	...attr
 } = Astro.props;
 let svg: string | undefined;
 
 try {
-    if (logo == undefined) return;
-    const dir = dirname(fileURLToPath(import.meta.url)) + "/../../../public/media";
-    svg = (await import(`${dir}/${logo.replaceAll(".", "/")}.svg?raw` /* @vite-ignore */)).default;
-
-    if (svg == undefined) return;
-
-    if (typeof size == "number" || Array.isArray(size)) {
-        // SVG main element regex
-        const svgElementRegex = /<svg[^>]*>/;
-
-        svg = svg.replace(svgElementRegex, (match) => {
-            let newMatch = match;
-            if (typeof size == "number") {
-                newMatch = newMatch.replace(/width="[^"]*"/, `width="${size}"`);
-                newMatch = newMatch.replace(/height="[^"]*"/, `height="${size}"`);
-            } else if (Array.isArray(size)) {
-                newMatch = newMatch.replace(/width="[^"]*"/, `width="${size[0]}"`);
-                newMatch = newMatch.replace(/height="[^"]*"/, `height="${size[1]}"`);
-            }
-            return newMatch;
-        });
-    }
-
-    svg = svg.replace(/<svg/, `<svg ${Object.entries(attr).map(([key, value]) => `${key}="${value}"`).join(" ")}`);
-} catch (err) {
-
+	if (logo === '' || logo === undefined)
+		return;
+
+	const dir = new URL(join('..', '..', '..', 'public', 'media'), import.meta.url).pathname;
+	svg = (await readFile(`${dir}/${logo.replaceAll('.', '/')}.svg`)).toString();
+
+	if (svg === undefined)
+		return;
+
+	if (typeof size == 'number' || Array.isArray(size)) {
+		// SVG main element regex
+		const svgElementRegex = /<svg[^>]*>/;
+
+		svg = svg.replace(svgElementRegex, (match) => {
+			let newMatch = match;
+			if (typeof size == 'number') {
+				newMatch = newMatch.replace(/width="[^"]*"/, `width="${size}"`);
+				newMatch = newMatch.replace(/height="[^"]*"/, `height="${size}"`);
+			}
+			else if (Array.isArray(size)) {
+				newMatch = newMatch.replace(/width="[^"]*"/, `width="${size[0]}"`);
+				newMatch = newMatch.replace(/height="[^"]*"/, `height="${size[1]}"`);
+			}
+			return newMatch;
+		});
+	}
+
+	svg = svg.replace(/<svg/, `<svg ${Object.entries(attr).map(([key, value]) => `${key}="${value}"`).join(' ')}`);
+}
+catch (err) {
+	console.error(`Error occurred while loading SVG. Logo name is ${logo}.`);
+	console.error(err);
 }
 
 ---
 
-<Fragment set:html={svg} />
+<Fragment set:html={svg}/>