diff options
Diffstat (limited to 'apps/website/src/components/logos/Logo.astro')
-rw-r--r-- | apps/website/src/components/logos/Logo.astro | 78 |
1 files changed, 41 insertions, 37 deletions
diff --git a/apps/website/src/components/logos/Logo.astro b/apps/website/src/components/logos/Logo.astro index 0b72b91..ad41aad 100644 --- a/apps/website/src/components/logos/Logo.astro +++ b/apps/website/src/components/logos/Logo.astro @@ -1,51 +1,55 @@ --- -import type { LogoType } from "@webtypes/Config"; -import type { HTMLAttributes } from "astro/types"; +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, +export interface Props extends HTMLAttributes<'svg'> { + logo: LogoType + size?: number | [number, number] + silent?: boolean } const { - logo, - silent = false, - size = undefined, - ...attr + logo, + silent = false, + size = undefined, + ...attr } = Astro.props; let svg: string | undefined; try { - if (logo == undefined) return; - const dir = "../../../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) { - console.error(`Error occurred while loading SVG. Logo name is ${logo}.`) + if (logo == undefined) + return; + const dir = '../../../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) { + console.error(`Error occurred while loading SVG. Logo name is ${logo}.`); console.error(err); } --- -<Fragment set:html={svg} /> + <Fragment set:html={svg} /> |