What's the best way to integrate Tailwindcss Heroicions into Laravel 9?
This is my workflow. I created a "symbols" folder in my Laravel file structure:
resources > views > components > symbols
Then I download and save each SVG file: arrow-down.blade.php.
In the SVG blade file I empty the class attribute and replace it with {{ $class }}:
<svg xmlns="http://www.w3.org/2000/svg" class="{{ $class }}">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
</svg>
And integrate it like this:
<x-symbols.star class="w-6 h-6"/>
Is there a better way? Can I download Heroicons as Blade files so I don't have to do this manual work?
Related
I am making a pair of custom web components to show notifications. The wc-notifier is the parent, which creates wc-notifications on itself, there maybe multiple notifications shown at the same time, in which case one parent, many children.
Each web component has links to two external stylesheets:
base.mins.css
It's own shadow.mins.css
As you can see below I duplicated the links because I am trying to use the preload functionality of the browser:
I know I could inline the stylesheet, but I would like to link the styles, for the same reason we normally link stylesheets.
<template id="TEMPLATE_wc-notification">
<link rel="stylesheet" type="text/css" href="/static/csslib/base.min.css">
<link rel="preload" as="style" type="text/css" href="/static/csslib/base.min.css">
<link rel="stylesheet" type="text/css" href="/static/wclib/wc-notification/shadow.min.css">
<link rel="preload" as="style" type="text/css" href="/static/wclib/wc-notification/shadow.min.css">
<div id="CONTAINER" class="d:f a-i:s o-y:a max-h:80vh"><div name="icon" class="o-align:c-m h:64"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="INFO"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="SUCCESS"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="WARNING"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="ERROR"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg></div><slot id="SLOT" class="d:b f-s:24 f-w:500 o-w:a m-t:10"></slot><div id="CLOSE" class="o-align:c-m a-r:1/1 c:p bg-c:black|15a#h b-r-r:6 h:64"><svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 0 24 24" width="32px" fill="black" draggable="false" class="p:4"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div></div>
</template><script type="module" async src="/static/wclib/wc-notification/component.min.js"></script>
<template id="TEMPLATE_wc-notifier">
<link rel="stylesheet" type="text/css" href="/static/csslib/base.min.css">
<link rel="preload" as="style" type="text/css" href="/static/csslib/base.min.css">
<link rel="stylesheet" type="text/css" href="/static/wclib/wc-notifier/shadow.min.css">
<link rel="preload" as="style" type="text/css" href="/static/wclib/wc-notifier/shadow.min.css">
<div id="CONTAINER" class="p:f r:0 t:0 d:f f-d:c a-i:e z-i:1000" hidden><slot></slot></div>
</template><script type="module" async src="/static/wclib/wc-notifier/component.min.js"></script>
Say I perform a fetch, and the server does not respond. Then I wish to show a notification that the submission failed. Now the problem comes in that I would like to show a notification about the failed fetch.
However when I try create the notification, the browser then wishes to re-download the stylesheet for the notification, however now there is "no connection", so the notification is not styled.
Heres the response Headers (showing its not set to no-cache etc):
Note I test the failed fetch within about 10 seconds of the page loading:
Cache-Control: max-age=6000
Content-Disposition: inline; filename="component.min.js"
Content-Length: 1105
Content-Type: application/javascript
Date: Wed, 21 Sep 2022 20:47:35 GMT
Last-Modified: Wed, 21 Sep 2022 20:47:35 GMT
Server: WSGIServer/0.2 CPython/3.9.13
Set-Cookie: ... expires=Sat, 22 Oct 2022 20:47:35 GMT; HttpOnly; Max-Age=2678400; Path=/; SameSite=Lax
Vary: Cookie
Why does the browser try to redownload the stylesheet? How do I make it download once at start up, and not again everytime I create an element of wc-notification? The above scenario is the worst case, but even good cases its slow to style the component, because everytime I add a web component, the stylesheet is re-downloaded.
I also tried #import, but it results in the same issue, the stylesheet is downloaded every time.
<template id="TEMPLATE_wc-notification"><style>#import "/static/csslib/base.min.css"</style>
<style>#import "/static/wclib/wc-notification/shadow.min.css"</style>
<div id="CONTAINER" class="d:f a-i:s o-y:a max-h:80vh"><div name="icon" class="o-align:c-m h:64"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="INFO"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="SUCCESS"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="WARNING"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="ERROR"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg></div><slot id="SLOT" class="d:b f-s:24 f-w:500 o-w:a m-t:10"></slot><div id="CLOSE" class="o-align:c-m a-r:1/1 c:p bg-c:black|15a#h b-r-r:6 h:64"><svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 0 24 24" width="32px" fill="black" draggable="false" class="p:4"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div></div>
</template><script type="module" async src="/static/wclib/wc-notification/component.min.js"></script>
<template id="TEMPLATE_wc-notifier"><style>#import "/static/csslib/base.min.css"</style>
<style>#import "/static/wclib/wc-notifier/shadow.min.css"</style>
<div id="CONTAINER" class="p:f r:0 t:0 d:f f-d:c a-i:e z-i:1000" hidden><slot></slot></div>
</template><script type="module" async src="/static/wclib/wc-notifier/component.min.js"></script>
I did come across Constructable Style Sheets when trying to look fo ra solution, but Safari does not support the replace and replaceSync methods, which are the heart of it for web components.
I'm assuming that:
You are including the templates in the HTML of the web page
Since one of your css files is named "shadow.min.css", that you are using a Shadow DOM.
You are wanting to make a single http call for your css files regardless of the number of custom tags in the web page.
Since you are building a web component, you should adhere to the principle of compartmentalization, meaning: A user of the component only has to include a [script] tag in the HTML and everything else gets loaded by the component - and stays in the component.
When you inject a [link] tag into the Shadow DOM from within your component, the browser will cache the file that was retrieved. Usually, that's all you have to do.
For the templates, since we don't have HTML imports at the moment, the easiest way to fetch a template ONLY ONCE in spite of the number of custom tags in the web page is to make use of native Javascript modules. Modern browsers seem to have good support for native JS modules. CAVEAT, your template file must have a .js extension or it won't work ie. template.js. If this doesn't work for your particular situation, then you have to store the content of the template somehow - see the answer to this question: Single HTTP request for HTML template file for multiple instances of the same Web Component
So, assuming a directory structure like this:
Document-root
- index.html
-/static
-- /components
--- /wc-notification
---- component.js
---- template.js
--/csslib
--- base.min.css
--- /wclib
---- /wc-notification
----- shadow.min.css
index.html
<head>
<script type="module" src="/static/components/wc-notification/component.js"></script>
</head>
<body>
<wc-notification>Foo</wc-notification>
<wc-notification>Bar</wc-notification>
<wc-notification>Baz</wc-notification>
</body>
component.js
import { template } from "./template.js";
export class WCNotificaton extends HTMLElement {
#css_file1 = "/static/csslib/base.min.css";
#css_file2 = "/static/wclib/wc-notification/shadow.min.css"
constructor() {
super();
const style = document.createElement('style');
const fragment = document.createRange().createContextualFragment(template);
style.setAttribute("rel", "stylesheet");
this.style1 = style.cloneNode();
this.style1.setAttribute("href", this.css_file1);
this.style2 = style.cloneNode();
this.style2.setAttribute("href", this.css_file2);
this.notification_template = fragment.querySelector('#TEMPLATE_wc-notification').content;
this.notifier_template = fragment.querySelector('#TEMPLATE_wc-notifier').content;
this.shadow = this.attachShadow({ mode: "open" })
}
connectedCallback() {
this.doSomethingwithTheTemplates();
this.render();
}
doSomethingwithTheTemplates() {
this.notify = // the result of processing the templates, should be a DOM Node;
}
render() {
this.shadow.append(this.style1);
this.shadow.append(this.style2);
this.shadow.append(this.notify);
}
document.addEventListener('DOMContentLoaded', customElements.define('wc-notification', WCNotificaton);
template.js (I'm using a template literal here because it's easy)
export const template = `
<template id="TEMPLATE_wc-notification">
<!-- Do not include <link> or #import, <style> is OK -->
</template>
<template id="TEMPLATE_wc-notifier">
<!-- Do not include <link> or #import, <style> is OK -->
</template>
`;
How do play with the different fill variables inside an svg ?
I am trying like this but I don't get any results :
<img class="icon-shop icon-colors" src="#/assets/icon-shop.svg"/>
...
<style>
.icon-colors {
--color-default: #c13127;
--color-dark: #ef5b49;
}
</style>
icon-shop.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="..." fill="var(--color-default)"/><path d="..." fill="var(--color-dark)"/><path d="..." fill="var(--color-default)"/><g><path d="..." fill="var(--color-default)"/></g></svg>
Edit 1 :
When I try to use svg as a .vue file, I get a blank page and this console error :
Failed to execute 'createElement' on 'Document': The tag name provided ('/img/icon-shop.7de319ba.svg') is not a valid name.
edit 2 :
I am not sure how I should export the variable components
<template>
<svg
v-if="name === 'shop'"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M15.6 1.6H8.4c-.4 0-.7.3-.7.7v2.5h8.5V2.3c.1-.4-.2-.7-.6-.7z"
fill="var(--color-default)"
/>
</svg>
</template>
<script>
export default {
props: ["name", "var(--color-default)", "var(--color-black)"],
};
</script>
Component Call
<IconShopVue
color-default="#c0ffee"
color-dark="#c0ffee"
class="w-8 h-8"
name="shop"
></IconShopVue>
UPDATE on how to make this code functional
<template>
<svg
v-if="name === 'shop'"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M15.6 1.6H8.4c-.4 0-.7.3-.7.7v2.5h8.5V2.3c.1-.4-.2-.7-.6-.7z"
:fill="colorDefault"
/>
</svg>
</template>
<script>
export default {
props: ["name", "colorDefault", "colorBlack"],
};
</script>
<IconShopVue
color-default="#c0ffee"
color-dark="#c0ffee"
class="w-8 h-8"
name="shop"
></IconShopVue>
You should put your svg into a .vue file, copy your SVG code into the template section. Then, pass some props to your .vue component and interpolate the actual default/dark colors as you would do with any other kind of props.
<my-cool-svg header-color="#c13127" outline-color="#ef5b49" fill-color="#c0ffee"></my-cool-svg>
This will provide a lot of flexibility overall VS working with a classic .svg file.
This is how the .vue should look like
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="..." :fill="headerColor"/>
<path d="..." :fill="outlineColor"/>
<path d="..." :fill="fillColor"/>
<g>
<path d="..." :fill="fillColor"/>
</g>
</svg>
</template>
<script>
export default {
props: ['headerColor', 'outlineColor', 'fillColor']
}
</script>
Please take a look at my approach and tell me is it a good/correct way to add a complex DOM element inside Fullcalendar header.
viewSkeletonRender(info){
this.$refs.fullCalendar.$el.querySelector('.fc-header-toolbar').insertAdjacentHTML('afterbegin', `
<div class="event_create-wrap">
<div class="event_create-btn">
<div class="event_create-btn-left">
Create
</div>
<div class="event_create-dropdown">
<button class="event_create-btn-dropdown" #click="eventDropdownClicked">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M111 13.8822L3.62734 8.39658C3.23555 8.01742 3.23555 7.40432 3.62734 7.0292L4.5693 6.11762C4.96109 5.73846 5.59462 5.73846 5.98224 6.11762L10.0002 10.006L14.0181 6.11762C14.4099 5.73846 15.0434 5.73846 15.431 6.11762L16.373 7.0292C16.7648 7.40836 16.7648 8.02146 16.373 8.39658L10.7045 13.8822C10.3211 14.2614 9.68756 14.2614 9.29578 13.8822Z" fill="white"/>
</svg>
</button>
<div class="event_create-btn-dropdown-content" :class="{show: isEventListShown}">
1
2
3
</div>
</div>
</div>
</div>
`);
}
I am using "viewSkeletonRender" hook but i am not really sure that using "insertAdjacentHTML" is good, since i've used it first time.
I can't use AppendChild because i need to add so many html code there and it is difficult to create all html objects step by step (what if i need to add 100 html tags...) .
I can't use innerHtml because it will remove all what i have in fc-header-toolbar.
And as i understand i can't bind any VueJs props and methods to this HTML with this approach because i add this html as vanila Js.
Thank you for your advice.
This is probably too broad of a question, but I am trying to recreate a cursomizer with Vuejs as a framework. I got stuck in a position where I have to change the cursors dynamically. These cursors are supposed to be SVG files which are able to be accessed from the next component where the user would be able to modify the size and fill. My concern is can store different cursors in different buttons and update when clicked. The code that I provided contains different list items which are dynamically generated and when clicked, it adds active class to the chosen item. If anyone has any advice on how to approach this problem, jump in.
<template>
<div>
<h1>Choose cursor</h1>
<section class="cursors-wrapper">
<ul class="cursor-list">
<li class="cursor-list-item" #click="activateCursor(cursor.cursorId)" :class="{ active : active_el == cursor.cursorId }" v-for="cursor in cursors" >
<a href="#" class="cursor-list-item-inner">
<!-- SVGG-->
<div v-html="cursor.cursorImage"></div>
</a>
</li>
</ul>
</section>
<div #click="choosenOne"></div>
</div>
<script>
export default {
data () {
return {
cursors: [
{
cursorId: '1',
cursorImage: `<svg class="cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
width="16">
<ellipse class="cursor-svg__main" cx="8" cy="8" rx="8" ry="8" fill="#000"></ellipse>
</svg>`
},
{
cursorId: '2',
cursorImage: `<svg class="cursor-overflow cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
width="16">/* */
<ellipse class="cursor-svg__main" cx="8" cy="8" rx="8" opacity="1" ry="8" fill="none"
stroke-width="3" stroke="#000"></ellipse>
</svg>`
},
{
cursorId: '3',
cursorImage: ` <svg class="cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
width="16">
<path class="cursor-svg__main" d="M 0 0 L 12 10 L 0 16" opacity="1" fill="#000"></path>
</svg>`
}
],
active_el: 0
}
},
methods:{
activateCursor:function(el){
this.active_el = el;
console.log(this.cursorId);
}
}
}
The best solution I can think of is to use style bindings. This way, you can define the cursor in your data object and change it dynamically afterwards ( v-bind:style="{cursor: selectedCursor}").
As for setting the cursor, you can use the method like shown by the top answer of this question.
I've created a fiddle to illustrate what I mean
https://jsfiddle.net/rnab4tep/1/
All you have to do now is set selectedCursor to the cursor of your liking.
There is a bug that I can just see in Chrome, it appears that svg has opacity:
And this is on safari:
So I don't know how to solve this, I tried with opacity but not, also checking the fill-opacity in the SVG.
Here is the pen with the svg code embed (try it with Chrome and Safari):
http://codepen.io/jepser/pen/reNOJZ
This is the example exported by Illustrator, but I also tried with Sketch:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="140px" height="24px"
viewBox="0 0 140 24" enable-background="new 0 0 140 24" xml:space="preserve">
<title>Social media</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" sketch:type="MSPage">
<g id="Footer-Public-Website" transform="translate(-955.000000, -364.000000)" sketch:type="MSArtboardGroup">
<g id="footer-link-col4" transform="translate(952.000000, 179.000000)" sketch:type="MSLayerGroup">
<g id="Social-media" transform="translate(3.000000, 185.000000)" sketch:type="MSBitmapLayer">
<image overflow="visible" enable-background="new " width="48" height="48" id="Bitmap" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAABKZJREFU
aAXtWm1sFEUYnq+9bYuFllqrZ9TWVE1MjBg/fiGCYDQQlIINrSZnUctdaU+shZLww79NWo2RNnIW
otVC1RhPExQSScBoiCE2NWCIUdFUFH+ghkIt9m7nwx0uW5d1b2+ue3e2yW3Sm5nnnXnf5/242d3r
QGBekUjkeqBX9mJCl0OgBSU2Vy8BjN8YJZ+BxPnuWCx2FkryUF90AhNcNVdJu/FilP0pEhfuJKnI
w3lFXjokA05BZS+SZePm4XzAJHc012veK5CSO/KaMB9kRQf+7ywVM1DMgM8IFEvIZwB9Lye+NQDA
KaXHiSAYaOC+TPo4N6Y4g0cFED8KLKqwwKsxxoszrUsn9+UAZXz45zN/7DwU3/urNBDZsq2DlAb6
3YwxzpOC8Z7YwQ97wOnTCWvOw42Ni+uCdcOEkNUWlk0LO7p2imwWyLmcGX8bjLfu6X95v3Nt29Yd
X5sPWkvsuIz6pb+mVgztee0rO271G0Obb6yuqPweaVi3MNU26y+xwcHZqUTifjfy0igT/B27ccMw
hGGwp9KRl3Pff3vwjIDiqH2daj+rEjJL5pfJixeWj7yx+6d0BpIG/TKgaTNiDeHPB3b1fTADpOmY
ZTCRRuQJK2eAM/b7xYnzK73IS0tjx06NmVFnltVpA8af2dL5SOOm6O0W5tYSiK5zwzNh6g4I8dHI
0Os/PNESvqU12vWkqfjfMNusnDz56RTC6DsLwhj0lJaWHqquWHAi1Np+q4Xb29ra2hIOWMYdzL7G
6is7IIR4tm1r97vlCxd+qwf0fe2R7iZLyX9aDk5ZmKbBMtlHCJGSkrKVFm5vlzU0LEVYK7Vjqn1l
BzSTCSZko9liqZwHUCidEbN+xtxkQrBzbngZ1R5zw1UwZQecysyUr2hoCLm+SyeTyWPO+ZTTc4c/
jn/ixJesW1cBAWpx4qrjWTsgM1FzU3Ctm6Gh3a8cN3fPS3YZp/zF8fHxaTsm+3ffXN+GA+gqJ646
nrUD0gARMF3qkwjxmX3dSIixwf6X9jpJrW1uvjrAcJcTz2bsywGO6ENyB3EzSJkRl7gh+HQiOdli
dme2VonLK3hNXZ/f36N8OYCQtmDVmvUPpuhc+Xn4QHyEGvQLnkxuHBoc+OZKKQChzs5VGgEtTjzb
cVZ3YjfliOBHTfygUybrPbard5kTl+OmpqeD5UzfB3yFL6XZtwozivKLDFPqlD61yprq96CGapRm
Z5jk2wH541IkGr03gx1LDCMd3W+Zdb/UAvy2vh2QBATSH1chEn5u+6tEJ80qc1Xn5MQBCIl8rPDS
BdujOwbMe0dUlZjqPC+jqjoAweiGzdFtra4L6uv18Avbh2EAt7vKfYI5cUBygAT2bWrrfMDOR/7v
IbJmwxENavLpNS/XrF4p0zGR772MszcFFUcYBrfpCD/v54U9nR077vs+YFeGEQqYf2FAQNiO57Of
sxLKJ0kv3UUHvKJTCFkxA4WIspeNYga8olMI2fzPgDx7UIhI5cOG5I4uH5zIh/YC6JTckTz1IQ9O
FMBeTk1c5mxyx6Ojo5P33HXHfo5KroWIVkGAy3NqKcfKUsdt0AGQmNggj9v8AxmvdNB0EWB4AAAA
AElFTkSuQmCC" transform="matrix(0.5 0 0 0.5 116 0)">
</image>
<image overflow="visible" enable-background="new " width="48" height="48" id="Bitmap_2_" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAAAcNJREFU
aAXtWr1KxEAQ3r/jbESOsxB9BhHBB7DyBXyJgHaCoA9gcaCVQgSLaxR7myt9gDTWNtecnXjhtAi3
m5i5a8KSHDEbJ1nYVJnJzs433zfZ+2EoSS/P83ZItzfgQh5S0tkGX1uvhMw/lBSvJPo6931/QgE8
7W68ccH7bQWdh0tJ9ZlE4Z5YMk+tAg8FAeGS9AYM2iavQht8gJ21vedXEQnY2aoFNjxzBTStklPA
KWDIgPUtJAwJqBQeKzVVUl6E3z+j56E/ztvk9OwyyfPrPvQC5lKOZ2F49DS8f9fBVLHRWyhl/qQu
8FAwagHwDfLh7mZUhemiGNQCCE0mKZC4CEwVP2oBKfLafyyhvsQdLjaLWC576ujxqAroyeuwXQF1
sGiyB63ae2WT3l5f0bJrs+vK4nItlGWtiXunQBOsZ3Nar8C/n0JZtuC+6FQqe+ro+1mvgCtAlxTb
dgpgM67ncwrojGDbTgFsxvV86J/EOgBT27WQKYOm8U4BUwZN4+1XAGYPTFloKh6ws8XgRFMIDPMC
dgZTH/C3t+Fe6OELzCl2HgTB7GB/9zFma1uUyT4lfB0dzR8SLsdt2AuJpscwbvMLNKCBir53MSAA
AAAASUVORK5CYII=" transform="matrix(0.5 0 0 0.5 29 0)">
</image>
<image overflow="visible" enable-background="new " width="48" height="48" id="Bitmap_3_" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAABHBJREFU
aAXtWl9sFEUYn3+7e9cc1vaaomCURBIJhCAUCaQxnErQFx+MOdIHrKUJ7fEntVegaRoeiUmr/KkK
Xs+GVBJJpW8aEzE+EBLhgUYgEPBBEmNi06iIbWPgbmd2nGktXc7bvZm7W22T2+R638z3m9/3/b6Z
m9vbDgTiSiQSy4FV048JjUFgLJN9C/XiwB5nlFwAmXvdqVTqFyiTh1b1dUxwdKEmnS8vRtldnplc
R2YrDxdV8lKQLDgFNf1ILpt8ChdDn8wdLfQ171dImTvyAywGX0XA/z1LlRmozECJFSAljtcaThm7
wTn7GnAwAZhZh0LONgzQC1okOeCiBFDKzxIHUmCC5hy+vE3Hsf+izOlMf3B0KAfQu3vfwR3IQCcN
TOoooxe5w68ijJoxwjU52LxNuP9AL8/r8egU9yDXPh7oWy/dbV0H+kxodXtAZ7qdrDOVvT+1eWjo
1G0v3KvxeO0zNUvr0+mPfpCYppbEirpo7R1hFtxkCgJygzLmnJnrSx872mNTMDzXzvdOAevxS16O
OT86+sdc8rI9/dvUpFhuTNqFLm0BU7/f/dxFygcH3m21H2R7bNv+V0A7w79Pf/heyoVXMpc/92QP
wdhQAWsJEEX5cWTk9HgOMR88+X7fg6y9lVJ26REft8+JttYSbd3b9ZJYlgcf4fFpaH2IOeVXvLg+
TZ34Tvgam5PJbSFm7EQcb6cOvemF9+o3TWNA+JQLqyWAYednr8Bz/WeOH/9W2PIlLy3+pqbWZWLp
rJ0dqvZXWamkQxTcU6N9iKIPLQXDWhJW2jrdVFoCIKZaFXUHUrGxYdWr4NwYLQEckmfdg8ttIwSC
FYAgaih30m4+jPFqd1vF1poBCNHqhoaGKhXiYjAIwld0x2kJQAiRjY2xnbpBVPCxWCzCAdykgnVj
tATIgQYxk+INuknKYa9ZtekN1W9fdzxtAQDCVe0dhzrcJOWwHQt2FcOjL0BEQRj3t+zeW9J9vDvZ
txKdL4sHVc+7+1TtogRghEyrKnIu3tz2tGogH5wRCVnHfPy+rqIESEaDkBXR6ONX3k50NvpGKOBs
f+fQYbF9risA83QXLcB27GnCyE8GDhf93SDFi19evZ7ZKTi0bw04db74dXyifXR0eEKB3xOyq23f
BjNsfSW3Zk+QgkN7BjIse7bU5Fv2JF8MhSPfGAhXK+ToC9EWECLmHrBypeXL6u0kbR3dRyJV4Qvl
+n+E/vRhtLX9tfgl276///Tgicveuc57ntqyJfz65tgOwJ1kKR/YecZ5S/upxPxQACillynFIzQ7
eXH4k1O3hC/7jx/G4y1Lq+trN4iEt+s8JnHzq9glCXAHED/qOeZ4mhPOxM4i17b28nTzqdr6S8iD
2TAMeX/0mIc7sO7/pEqBZS+IKwKCrK4Kd2UGVKoUJGbxz4A8exBkhYLklrmjmYMTQUYJkFvmjuSp
D3lwIsA4gVDP5Cxyx2NjY9Mb16/9zEGhJyCiUQjwkkAilol09rgN+hJk/nxTHrf5Gw17R+AeyJMq
AAAAAElFTkSuQmCC" transform="matrix(0.5 0 0 0.5 0 0)">
</image>
<image overflow="visible" enable-background="new " width="48" height="48" id="Bitmap_4_" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAAA8pJREFU
aAXtWl9IFEEcnp1ZzzIsLSzLHiR6sCDKCEIKuh6KyqIoKqiHCiKM1B6CInsuy5BCkwykEOoxlKyM
/kA91EEanVf0B4J8yJREMi6Vu5vZaX8nJ8f2m1v3/sgd3MCyM9/vm2++38zc3rKMRsxSVVVVQnIL
G5jO3RrJWQJYuhZJQj8F11+SwO+zra2tAxqY13Ln9TGdLUhX05gvwcWIDPxZrU/OvJZR5iEhmHBO
ChsobBssw0zAwDtN9z0fayLBO41FyISYni4mbzRe0mJ5qT5TJ7F4xq9ANgFsWWcSy67ATM42NlZ2
BbBZmUlMUz1fZ9JEImNlt1Ais5eMvtkVsM6iIUIToVComQf9679/6Z8PF9QBg5iVn2g7qS9zhhDD
Y4HA9vabTe8sxt6a7bdHTta2z8ml3ZSxIks87mZSt1Bwgh9GzE+ZgxhwpoAkVJKWAOf8cdutxmd2
noADXDvedOPKLaR6P68+fb6D6Noe6wBC8NtWTNUGrq7rO6xxaYQ6Wq5d3WvFoa36v3K8AoLKcmyA
oZHBVxiOYSquQdhajB8Lc5yAJmQxJtjV0+PHcAz74PH8xXBDI4swPBbmOAHJyDgmeHTz1hUYjmHu
LTvKMJxK6fgx6zwBKQewwV2z83ZjOIapuFKhjWlEMOcJUNkX6Rx9Zxqr2b7/mO3zHTjAje4bqUuF
diSO3R0noI2z+5gQfCkrLSnqqKw8VIjFAYMYcFSfMVXaKj3AlY9RVaeHfa+e7FznHtRd2mIrhzF9
Q2lZyccTy881B8f9T7zDP/uBs6ZoSakrL38bNWgtY//3Aw4PykHQhrqT4jiBHx7PBFm/qY4Q7Q42
EHwtc+mk3jW3oH7j3AKMgmNM1oW18agSdbyFQKn1+uV2wbnj2VK5EEJ0g6YqHguPKwFTUPp6vxww
B0Z/0LEGtMZAw9fz+SBoWmPTacebAHn9+oHf0//VbRp4NJ2BMA70BQ3QwuLTwRz/BqJFvZ2do15C
dh0/db5Gd4kLOtUXRsdVdW7wXzzILra1XGk2OXHNfEQ77hWICICBtpb6pjcvvMvMeq0IGc+FYQSj
4uEqYBADDnChj1lPyDwIJ7QCIBApPt/TMfOCGW1eWlEx272yvMSVmxN+bwoGQkMvP70fiOcpE9FX
3ZOWQPQAYPSux/PNxOBKaUnGFkqpQTvxbAJ2M5TqeMavQPbbaKq3iJ0+hbMHdqR0jYN3Gj44ka4O
bXyBdwqnPuDghA037cJhz6Z31tvb619XvuqeQWcVa5Qv0AjLTzu3UYYmj9vQLhIY3QfHbf4BU+Bv
zcPEpP8AAAAASUVORK5CYII=" transform="matrix(0.5 0 0 0.5 58 0)">
</image>
<image overflow="visible" enable-background="new " width="48" height="48" id="Bitmap_5_" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAAA5hJREFU
aAXtWk1IVFEUvn9vRsiIGKHQRbUNQsJoPdtWJdFS24QajdqPPxC1DdLCMiMFNyWtgixauJ2toQtX
0soClQqHilzovPvTPW/miUzzc9574szAPEfevHvP+b7vnHvfuW8elxJ79PX1tZH48TEuZJISpxXa
avUwxN1UUqTJ7q+R6enpDQriafzYChc8Uauii+lSUmXM7p92kcs8rSvxEBAkXJLjYwymTbEI66EN
tLNan/PlEgnaWTmDeuhrBFDtUWqMQGMEImagMYUiJjCyuwiL4Lqu4oRJwrUkkisjjKKGSKqpVoZq
HpNGascAvmAuVVlBOTXM+6NEUEk5ERZCMaGIFo7j8DBaAgcglZ778W3zzvz8m0wYwlI+nZ3diROn
WicEZ12lbIq1BwrAldnxmedPRooBRW3LJ6S7d3DouyNiw1g89E2slFqw4kexwGHtgAO4sP7oALYy
mVsW1JvTWPCQdibPhXJHBSCVct/Nza6hEA/ACLiAEwOFCoBRncWA5W2gmqBwy2FiOVE3sSEMHUDq
3n0JwrRLPq6t/0wtvJ9dLye0VF+e80ipfr8dlSlDDGo4fVA4M4dcPt3WstrTP3TbXgau8VhOVACc
GS+r+wVivvMYa47FYhOpu6OL128OdGB8fBssJyoALe2KG+WgvKPJiS/2Dgw/SyaTzRgoLCcqAMLs
Q0LEAx4V7P/g2faLqz2pkSsV4ZCcuAAqsgUz0GYnckJ8RlQVItpQ3yHsGR7+CKUvvqx8fphOp7cr
4gAnIr2oAJjQKLuSooxa3nF3e1+/mlwuaVPQkeOsXLxQwpSmKLsCDURl9bam6sHM5PiU7VOF/eWu
gVMc1AhQQp1yZEX7pPnwdWOrP+xCxgyNFcUtaERllhKNAgPsqaePABNuUg3XoQ+qbdIqTyHEIFkl
hqEDsIJhqkQTDwBITlQAgnPnWteNM6GzGdARuIAT44YKAIBaEomX9hS5nCJE0TwXwjTAYy/n/JL9
ufcYhRrBCDiACwtB7eNvoFWx1n7UBw7Az8x/r1W4kXZ+KdRrFVteqLJrSzVeq/gB5N/j2DrH42R/
jbItudrsEGfvDnOI8GzsiuIDeBXSGnifyuXSdys871EUdtTLdSOAao9UYwQaIxAxAwz2HkTEqJo7
aGfexomqSYhGDNoZ7PqAjRPRoA7f29NstfOlpaW/F86fe6tZ00nKZIISfvTw5eAZc9tt2Cey+/sq
bLf5B4Z7U99vg8qhAAAAAElFTkSuQmCC" transform="matrix(0.5 0 0 0.5 87 0)">
</image>
</g>
</g>
</g>
</g>
</svg>
I recompressed your PNG images and the problem went away. For example:
<svg width="200" height="120" viewBox="0 0 200 120" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="200" height="30" fill="#08f"/>
<rect x="0" y="30" width="200" height="30" fill="#0cf"/>
<rect x="0" y="60" width="200" height="30" fill="#fa0"/>
<rect x="0" y="90" width="200" height="30" fill="#f50"/>
<!-- Original image: -->
<image x="30" y="36" width="48" height="48" xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAABKZJREFU
aAXtWm1sFEUYnq+9bYuFllqrZ9TWVE1MjBg/fiGCYDQQlIINrSZnUctdaU+shZLww79NWo2RNnIW
otVC1RhPExQSScBoiCE2NWCIUdFUFH+ghkIt9m7nwx0uW5d1b2+ue3e2yW3Sm5nnnXnf5/242d3r
QGBekUjkeqBX9mJCl0OgBSU2Vy8BjN8YJZ+BxPnuWCx2FkryUF90AhNcNVdJu/FilP0pEhfuJKnI
w3lFXjokA05BZS+SZePm4XzAJHc012veK5CSO/KaMB9kRQf+7ywVM1DMgM8IFEvIZwB9Lye+NQDA
KaXHiSAYaOC+TPo4N6Y4g0cFED8KLKqwwKsxxoszrUsn9+UAZXz45zN/7DwU3/urNBDZsq2DlAb6
3YwxzpOC8Z7YwQ97wOnTCWvOw42Ni+uCdcOEkNUWlk0LO7p2imwWyLmcGX8bjLfu6X95v3Nt29Yd
X5sPWkvsuIz6pb+mVgztee0rO271G0Obb6yuqPweaVi3MNU26y+xwcHZqUTifjfy0igT/B27ccMw
hGGwp9KRl3Pff3vwjIDiqH2daj+rEjJL5pfJixeWj7yx+6d0BpIG/TKgaTNiDeHPB3b1fTADpOmY
ZTCRRuQJK2eAM/b7xYnzK73IS0tjx06NmVFnltVpA8af2dL5SOOm6O0W5tYSiK5zwzNh6g4I8dHI
0Os/PNESvqU12vWkqfjfMNusnDz56RTC6DsLwhj0lJaWHqquWHAi1Np+q4Xb29ra2hIOWMYdzL7G
6is7IIR4tm1r97vlCxd+qwf0fe2R7iZLyX9aDk5ZmKbBMtlHCJGSkrKVFm5vlzU0LEVYK7Vjqn1l
BzSTCSZko9liqZwHUCidEbN+xtxkQrBzbngZ1R5zw1UwZQecysyUr2hoCLm+SyeTyWPO+ZTTc4c/
jn/ixJesW1cBAWpx4qrjWTsgM1FzU3Ctm6Gh3a8cN3fPS3YZp/zF8fHxaTsm+3ffXN+GA+gqJ646
nrUD0gARMF3qkwjxmX3dSIixwf6X9jpJrW1uvjrAcJcTz2bsywGO6ENyB3EzSJkRl7gh+HQiOdli
dme2VonLK3hNXZ/f36N8OYCQtmDVmvUPpuhc+Xn4QHyEGvQLnkxuHBoc+OZKKQChzs5VGgEtTjzb
cVZ3YjfliOBHTfygUybrPbard5kTl+OmpqeD5UzfB3yFL6XZtwozivKLDFPqlD61yprq96CGapRm
Z5jk2wH541IkGr03gx1LDCMd3W+Zdb/UAvy2vh2QBATSH1chEn5u+6tEJ80qc1Xn5MQBCIl8rPDS
BdujOwbMe0dUlZjqPC+jqjoAweiGzdFtra4L6uv18Avbh2EAt7vKfYI5cUBygAT2bWrrfMDOR/7v
IbJmwxENavLpNS/XrF4p0zGR772MszcFFUcYBrfpCD/v54U9nR077vs+YFeGEQqYf2FAQNiO57Of
sxLKJ0kv3UUHvKJTCFkxA4WIspeNYga8olMI2fzPgDx7UIhI5cOG5I4uH5zIh/YC6JTckTz1IQ9O
FMBeTk1c5mxyx6Ojo5P33HXHfo5KroWIVkGAy3NqKcfKUsdt0AGQmNggj9v8AxmvdNB0EWB4AAAA
AElFTkSuQmCC" />
<!-- Recompressed image: -->
<image x="122" y="36" width="48" height="48" xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAC7ElEQVR4nOyay2sTQRzHt0pV8CLq
SUWCVA+CRRC9iRfxBUqrRNqKMU27u7Pvnc2+EhA8exL1IF4E33jxoOLBiygKHsST/4AoqOjFt/ic
X9qYtM6kTXc208AOfC/tb9vPZ/Y3u7PJShIZCKHVyKlcMcrBK7Nc/TOfA4zACsxSHV5zoneiwdoN
MNckwEY0zFwD7FI3tA0rwC6JhkiaTEB0MgHRyQREJxMQHR4Cv5ATPjbt6pPZ1Os4+ITs8JZqB6cU
7F/S3Oi9MAHkxhf3HhxfI00OpPsmq1bD8XcCfkLq61ssNY3d+fxyMgF3Oiqgu8EX2SofkSiD7BKf
0Wa9KOtbafUw8gVlrW5H3zoioOLqy2OavYUFo9hBOKXeDn7LpneIVd8QD++mLkBa5sVISVvXCqSo
4e1TjnPj+zPBwyBtdC1VAd2N3o4U1fUzgfT371pKZv1n/bhxo2KP6XhPftTa2Oo4EE1VgMzQefhH
IDHZ/70sGA1HzxstVPk8sQ7iHwXZ2ECrz+VyS2BdpSoAvUz69Hp9dg0UHmUKONEN2t9QrECj1Rcw
3jkX+LbXQHM0O77HElCcKKYdw1rMyArPdFwAzsTgYGEFDei/hQwtiMM30CrTazcPDCzTrPhjxwVq
UG5cZJyERfXeb7SPr9IKxzy/koQh2VbCqdxktRHZItz+d7bMylPyo4XTa/YPD69M+pFOIgG4w9La
AoZseaUavBd/LSrmJlqN6lQvJJrAxGegDNd5bx8NDsTI3ucBWbgHaL9PcuXhKqA4wTlWG7HG0FBp
lWHHr+eFQO3DJUnqaYO/l/T9Qx7wXAQgyLK2zRK+B5nhVV7w3ARUxz85G3py7zjNE57fGSC7VMK3
oNXMG1Z0ljc8NwEI60YFT2CqF1xOA56rgIqDD6Ma3tHMPvHFSfQoLXiuAhB47oXLqmz4h0u2fzzp
A3vHBUQkExCdTEB0MgHRyQREp/u/6O76Vw26/mWPxq6xO1+3+QsAAP//AwCs+d8+UC5pPgAAAABJ
RU5ErkJggg==" />
</svg>
The icon on the left uses your original data, and the one on the right was obtained by loading the PNG image into GraphicConverter and re-saving it without changing anything. I've added some coloured bars in the background to show that there is nothing wrong with the alpha channel. Your original icon is just lighter.
This is what the start of your image file looks like:
0000000: 8950 4e47 0d0a 1a0a 0000 000d 4948 4452 .PNG........IHDR
0000010: 0000 0030 0000 0030 0806 0000 0057 02f9 ...0...0.....W..
0000020: 8700 0000 0467 414d 4100 035b 5e5c ff26 .....gAMA..[^\.&
0000030: 7800 0004 a649 4441 5468 05ed 5a6d 6c14 x....IDATh..Zml.
0000040: 4518 9eaf bd6d 8b85 965a ab67 d4d6 544d E....m...Z.g..TM
0000050: 4c8c 183f 7e21 8260 3410 9482 0dad 2667 L..?~!.`4.....&g
0000060: 51cb 5d69 4fac 8592 f0c3 bf4d 5a8d 9136 Q.]iO......MZ..6
0000070: 7216 a2d5 42d5 184f 1314 1249 c068 8821 r...B..O...I.h.!
0000080: 3635 6088 51d1 5414 7fa0 8642 2df6 6ee7 65`.Q.T....B-.n.
0000090: c31d 2e5b 9775 6f6f ae7b 77b6 c96d d29b ...[.uoo.{w..m..
Unlike the re-saved file, yours contains a gAMA chunk with a value of 0x00035b5e (which represents a gamma value of 2.2). Based on this gamma value, Chrome is changing your original RGB colour of (108, 115, 102) into (173, 178, 182), which is much brighter. For reference, the numbers work out as follows:
gamma = 0x00035b5e / 100000 = 219998 / 100000 = 2.19998
r_display = 255 * pow(108/255, 1/gamma) = 173
g_display = 255 * pow(115/255, 1/gamma) = 178
b_display = 255 * pow(122/255, 1/gamma) = 182
To fix your problem, either export your PNG images without gamma information (highly recommended), or try to set the gamma value to 1.0.
(Note: As I'm sure you'e already aware, you would save a lot of bandwidth by storing these icons as SVG vector data instead of PNG files.)
Just for someone looking for the same question.
I had the same problem here and solved it changing the SVG code (fill).
For some reason, I was seeing the image in Explorer and Inkscape fine (all black, no opacity), but the code was
fill="rgba(24, 90, 50, 0.28)"
Which was some kind of green and transparent, so I changed it to:
fill="rgba(0, 0, 0, 1)"
And it worked just fine (maybe you will have to clear your cache files).