From 587ca29e84df28c9321633c44daf1080ff0fa62c Mon Sep 17 00:00:00 2001
From: unknown <matic.ivesic@gmail.com>
Date: Fri, 31 Oct 2025 23:06:32 +0100
Subject: [PATCH] Added image-mask to contact element

---
 src/lib/HeaderContact.svelte            |  6 +++---
 src/lib/HeaderContactElement.svelte     | 13 ++++++++-----
 src/lib/SvgImage.svelte                 | 21 +++++++++++++++++++++
 src/lib/assets/mail.svg                 |  7 -------
 {src/lib/assets => static}/location.svg |  0
 static/mail.svg                         |  1 +
 {src/lib/assets => static}/phone.svg    |  0
 7 files changed, 33 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/SvgImage.svelte
 delete mode 100644 src/lib/assets/mail.svg
 rename {src/lib/assets => static}/location.svg (100%)
 create mode 100644 static/mail.svg
 rename {src/lib/assets => static}/phone.svg (100%)

diff --git a/src/lib/HeaderContact.svelte b/src/lib/HeaderContact.svelte
index 5e78c36..9b08429 100644
--- a/src/lib/HeaderContact.svelte
+++ b/src/lib/HeaderContact.svelte
@@ -1,7 +1,7 @@
 <script>
 import HeaderContactElement from "./HeaderContactElement.svelte";
-import phone_icon from '$lib/assets/phone.svg'
-import mail_icon from '$lib/assets/mail.svg'
+import phone_icon from '/phone.svg'
+import mail_icon from '/mail.svg'
 export let customClass = '';
 </script>
 
@@ -24,5 +24,5 @@ export let customClass = '';
 
 <div class="header-contact {customClass}" >
 <HeaderContactElement image_src={mail_icon} image_alt="Mail icon" link="mailto:info@intelidom.si" text="info@intelidom.si"></HeaderContactElement>
-<HeaderContactElement image_src={phone_icon} image_alt="Mail icon" link="tel:+3860771166" text="040 77 11 66"></HeaderContactElement>
+<HeaderContactElement image_src={phone_icon} image_alt="Phone icon" link="tel:+3860771166" text="040 77 11 66"></HeaderContactElement>
 </div>
\ No newline at end of file
diff --git a/src/lib/HeaderContactElement.svelte b/src/lib/HeaderContactElement.svelte
index 4b65a84..9c2edd9 100644
--- a/src/lib/HeaderContactElement.svelte
+++ b/src/lib/HeaderContactElement.svelte
@@ -5,6 +5,8 @@
     export let text;
     export let icon_color = '#bcc0c2';
     export let text_color = '#bcc0c2';
+
+    import SvgImage from "./SvgImage.svelte";
 </script>
 
 <style>
@@ -24,15 +26,16 @@
         font-weight: bold;
     }
 
-    img{
-        width: 1.5em;
-        height: 1.5em;
-        filter: drop-shadow(0 0 0 var(--icon-color));
+    div{
+        display: flex;
+        gap: 0.75em;
+        align-items: center;
     }
 
 </style>
 
 <div>
-    <img src={image_src} alt={image_alt} style="--icon-color: {icon_color}">
+    <SvgImage image_src={image_src} icon_color={icon_color} />
+    
     <a style="--text-color: {text_color}" href={link}>{text}</a>
 </div>
\ No newline at end of file
diff --git a/src/lib/SvgImage.svelte b/src/lib/SvgImage.svelte
new file mode 100644
index 0000000..d0b8045
--- /dev/null
+++ b/src/lib/SvgImage.svelte
@@ -0,0 +1,21 @@
+<script>
+    export let image_src = '';
+    export let width = '1.5em';
+    export let height = '1.5em';
+    export let icon_color = '#bcc0c2';
+</script>
+
+<style>
+    div {
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+    }
+</style>
+
+<div style='
+mask-image: url("{image_src}"); 
+width: {width}; 
+height: {height}; 
+background-color: {icon_color};'>
+</div>
\ No newline at end of file
diff --git a/src/lib/assets/mail.svg b/src/lib/assets/mail.svg
deleted file mode 100644
index 3d5fa27..0000000
--- a/src/lib/assets/mail.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(6.23174,0,0,-6.22835,-179.599,2542.96)">
-        <path d="M44.023,392.574C40.848,392.574 37.906,391.609 35.473,389.961L69.902,370.082L104.328,389.961C101.895,391.613 98.953,392.574 95.781,392.574L44.023,392.574ZM109.586,383.754L71.93,362.012C71.309,361.652 70.629,361.48 69.957,361.473L69.844,361.473C69.172,361.48 68.492,361.652 67.871,362.012L30.215,383.754C29.32,381.816 28.82,379.656 28.82,377.375L28.82,357C28.82,348.578 35.602,341.797 44.023,341.797L95.781,341.797C104.199,341.797 110.98,348.578 110.98,357L110.98,377.375C110.98,379.656 110.48,381.816 109.586,383.754Z" style="fill:white;"/>
-    </g>
-</svg>
diff --git a/src/lib/assets/location.svg b/static/location.svg
similarity index 100%
rename from src/lib/assets/location.svg
rename to static/location.svg
diff --git a/static/mail.svg b/static/mail.svg
new file mode 100644
index 0000000..0b2dc37
--- /dev/null
+++ b/static/mail.svg
@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(6.23174,0,0,-6.22835,-179.599,2542.96)"><path d="M44.023,392.574C40.848,392.574 37.906,391.609 35.473,389.961L69.902,370.082L104.328,389.961C101.895,391.613 98.953,392.574 95.781,392.574L44.023,392.574ZM109.586,383.754L71.93,362.012C71.309,361.652 70.629,361.48 69.957,361.473L69.844,361.473C69.172,361.48 68.492,361.652 67.871,362.012L30.215,383.754C29.32,381.816 28.82,379.656 28.82,377.375L28.82,357C28.82,348.578 35.602,341.797 44.023,341.797L95.781,341.797C104.199,341.797 110.98,348.578 110.98,357L110.98,377.375C110.98,379.656 110.48,381.816 109.586,383.754Z" style="fill:white;"/></g></svg>
\ No newline at end of file
diff --git a/src/lib/assets/phone.svg b/static/phone.svg
similarity index 100%
rename from src/lib/assets/phone.svg
rename to static/phone.svg