Added image-mask to contact element

src/lib/HeaderContact.svelte

@@ -1,7 +1,7 @@
 <script>
 import HeaderContactElement from "./HeaderContactElement.svelte";
-import phone_icon from '$lib/assets/phone.svg'
+import phone_icon from '/phone.svg'
-import mail_icon from '$lib/assets/mail.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>

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{
+    div{
-        width: 1.5em;
+        display: flex;
-        height: 1.5em;
+        gap: 0.75em;
-        filter: drop-shadow(0 0 0 var(--icon-color));
+        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>

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>

src/lib/assets/mail.svg

@@ -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>

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>