Madmin
/
its-personal
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Obfuscated Email fix, provides width and height for the parent svg of another icon svg with a link

This commit is contained in:
matthieu42morin 2024-04-29 02:13:31 +02:00
parent 3519242c06
commit 851cf69ecf
2 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/assets/Envelope.svelte Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. -->
<path class="fill-current text-base-content"
d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 602 B

14
src/lib/components/main/ObfuscatedEmail.svelte
View File

@ -1,24 +1,24 @@
<script lang="ts"> <script lang="ts">
import socials from '$lib/socialsObjects'; import socials from '$lib/config/socialsObjects';
import Envelope from '$lib/assets/Envelope.svelte'
export let mail: string = socials[0].href; export let mail: string = socials[0].href;
export let clazz: string = ''; export let clazz: string = '';
export let iconClazz: string = ''; export let w: number = 24;
export let h: number = 16; export let h: number = 24;
export let w: number = 16;
</script> </script>
<div class={` ${clazz}`}> <div class={` ${clazz}`}>
<svg xmlns="http://www.w3.org/2000/svg" lang="en-GB" aria-labelledby="title"> <svg xmlns="http://www.w3.org/2000/svg" lang="en-GB" aria-labelledby="title" class="w-[{w}px] h-[{h}px]">
<title id="title">Send me a mail!</title> <title id="title">Send me a mail!</title>
<defs /> <defs />
<a href="mailto:{mail}" target="" rel="noreferrer" aria-label="Send me a mail!"> <a href={mail} target="_blank" rel="noreferrer" aria-label="Send me a mail!">
<rect class="fill-current text-transparent" width="100%" height="100%" /> <rect class="fill-current text-transparent" width="100%" height="100%" />
<foreignObject x="0" y="0" width="100%" height="100%"> <foreignObject x="0" y="0" width="100%" height="100%">
<div class="email-icon-wrapper"> <div class="email-icon-wrapper">
<i class={`${iconClazz} `} /> <Envelope />
</div> </div>
</foreignObject> </foreignObject>
</a> </a>