From 29ddf6d2ac2478125cd3e1a6b32208aac10a2a38 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 12 Dec 2019 16:12:59 +0100
Subject: [PATCH] Fix information icon not being fully re-colored
It contains an ellipsis element and we only changed path and circle.
Just set the fill color for all SVG sub elements.
Fixes #4
---
packages/common/vpu-common-demo.js | 1 +
packages/common/vpu-icon.js | 2 +-
2 files changed, 2 insertions(+), 1 deletion(-)
diff --git a/packages/common/vpu-common-demo.js b/packages/common/vpu-common-demo.js
index bea4a3d8..c2ad0542 100644
--- a/packages/common/vpu-common-demo.js
+++ b/packages/common/vpu-common-demo.js
@@ -118,6 +118,7 @@ class VpuCommonDemo extends VPULitElement {
<p style="font-size: 2em;">Foo <vpu-icon name="cloudnetwork"></vpu-icon> bar</p>
<p style="font-size: 2em; color: orange">Foo <vpu-icon name="cloudnetwork"></vpu-icon> bar</p>
<span style="background-color: #000"><a href="#" style=" color: #fff">foobar</a></span>
+ <p style="font-size: 2em; color: orange">Foo <vpu-icon name="information"></vpu-icon> bar</p>
<br>
${(new Array(100).fill(0)).map(i => html`<vpu-icon style="color: green; width: 50px; height: 50px; border: #000 solid 1px"name="happy"></vpu-icon>`)}
diff --git a/packages/common/vpu-icon.js b/packages/common/vpu-icon.js
index deff95c1..af0e4487 100644
--- a/packages/common/vpu-icon.js
+++ b/packages/common/vpu-icon.js
@@ -100,7 +100,7 @@ class Icon extends LitElement {
height: 100%;
}
- svg path, svg circle {
+ svg * {
fill: currentColor;
}
`;
--
GitLab