From 8ee0634cf69a614c1bf6efaa719f05fbe4ab2415 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Thu, 19 Sep 2024 19:05:46 +0200 Subject: [PATCH 1/3] Use inline SVG for Baseline icons --- baseline-icon.js | 86 +++++++++++++++++++++++++++++++----------------- 1 file changed, 56 insertions(+), 30 deletions(-) diff --git a/baseline-icon.js b/baseline-icon.js index 3e46e5f..2f4d265 100644 --- a/baseline-icon.js +++ b/baseline-icon.js @@ -1,5 +1,41 @@ import {LitElement, html, css} from 'lit'; +const icons = { + 'limited': html` + + + + + + + + `, + 'widely': html` + + + + + + + `, + 'newly': html` + + + + + + + `, + 'no_data': html` + + + + + + + `, +}; + /** * Web component rendering baseline support icon. * @see https://web.dev/baseline @@ -8,43 +44,35 @@ export default class BaselineIcon extends LitElement { static get styles() { return css` :host { - --baseline-icon-limited: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M10 0L16 6L14 8L8 2L10 0Z' fill='%23F09409'/%3E%3Cpath d='M28 2L36 10L28 18L26 16L32 10L26 4L28 2Z' fill='%23C6C6C6'/%3E%3Cpath d='M22 12L20 14L26 20L28 18L22 12Z' fill='%23F09409'/%3E%3Cpath d='M8 2L10 4L4 10L10 16L8 18L0 10L8 2Z' fill='%23C6C6C6'/%3E%3Cpath d='M26 0L28 2L10 20L8 18L26 0Z' fill='%23F09409'/%3E%3C/svg%3E"); - --baseline-icon-widely: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M18 8L20 10L18 12L16 10L18 8Z' fill='%231EA446'/%3E%3Cpath d='M28 2L26 4L32 10L26 16L22 12L20 14L26 20L36 10L28 2Z' fill='%23C4EED0'/%3E%3Cpath d='M10 0L2 8L4 10L10 4L14 8L16 6L10 0Z' fill='%23C4EED0'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%231EA446'/%3E%3C/svg%3E"); - --baseline-icon-newly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M10 0L12 2L10 4L8 2L10 0Z' fill='%23A8C7FA'/%3E%3Cpath d='M14 4L16 6L14 8L12 6L14 4Z' fill='%23A8C7FA'/%3E%3Cpath d='M30 4L32 6L30 8L28 6L30 4Z' fill='%23A8C7FA'/%3E%3Cpath d='M34 8L36 10L34 12L32 10L34 8Z' fill='%23A8C7FA'/%3E%3Cpath d='M30 12L32 14L30 16L28 14L30 12Z' fill='%23A8C7FA'/%3E%3Cpath d='M26 16L28 18L26 20L24 18L26 16Z' fill='%23A8C7FA'/%3E%3Cpath d='M22 12L24 14L22 16L20 14L22 12Z' fill='%23A8C7FA'/%3E%3Cpath d='M6 4L8 6L6 8L4 6L6 4Z' fill='%23A8C7FA'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%231B6EF3'/%3E%3C/svg%3E"); - --baseline-icon-no_data : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M18 8L20 10L18 12L16 10L18 8Z' fill='%23909090'/%3E%3Cpath d='M28 2L26 4L32 10L26 16L22 12L20 14L26 20L36 10L28 2Z' fill='%23909090'/%3E%3Cpath d='M10 0L2 8L4 10L10 4L14 8L16 6L10 0Z' fill='%23909090'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%23909090'/%3E%3C/svg%3E"); - height: 20px; + --baseline-icon-limited-front: #f09409; + --baseline-icon-limited-back: #c6c6c6; + --baseline-icon-widely-front: #1ea446; + --baseline-icon-widely-back: #c4eed0; + --baseline-icon-newly-front: #1b6ef3; + --baseline-icon-newly-back: #a8c7fa; + --baseline-icon-no_data: #909090; } @media (prefers-color-scheme: dark) { :host { - --baseline-icon-limited: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M10 0L16 6L14 8L8 2L10 0Z' fill='%23F09409'/%3E%3Cpath d='M28 2L36 10L28 18L26 16L32 10L26 4L28 2Z' fill='%23565656'/%3E%3Cpath d='M22 12L20 14L26 20L28 18L22 12Z' fill='%23F09409'/%3E%3Cpath d='M8 2L10 4L4 10L10 16L8 18L0 10L8 2Z' fill='%23565656'/%3E%3Cpath d='M26 0L28 2L10 20L8 18L26 0Z' fill='%23F09409'/%3E%3C/svg%3E%0A"); - --baseline-icon-widely: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M18 8L20 10L18 12L16 10L18 8Z' fill='%231EA446'/%3E%3Cpath d='M28 2L26 4L32 10L26 16L22 12L20 14L26 20L36 10L28 2Z' fill='%23125225'/%3E%3Cpath d='M10 0L2 8L4 10L10 4L14 8L16 6L10 0Z' fill='%23125225'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%231EA446'/%3E%3C/svg%3E"); - --baseline-icon-newly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M10 0L12 2L10 4L8 2L10 0Z' fill='%232D509E'/%3E%3Cpath d='M14 4L16 6L14 8L12 6L14 4Z' fill='%232D509E'/%3E%3Cpath d='M30 4L32 6L30 8L28 6L30 4Z' fill='%232D509E'/%3E%3Cpath d='M34 8L36 10L34 12L32 10L34 8Z' fill='%232D509E'/%3E%3Cpath d='M30 12L32 14L30 16L28 14L30 12Z' fill='%232D509E'/%3E%3Cpath d='M26 16L28 18L26 20L24 18L26 16Z' fill='%232D509E'/%3E%3Cpath d='M22 12L24 14L22 16L20 14L22 12Z' fill='%232D509E'/%3E%3Cpath d='M6 4L8 6L6 8L4 6L6 4Z' fill='%232D509E'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%234185FF'/%3E%3C/svg%3E"); - --baseline-icon-no_data : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M18 8L20 10L18 12L16 10L18 8Z' fill='%23666666'/%3E%3Cpath d='M28 2L26 4L32 10L26 16L22 12L20 14L26 20L36 10L28 2Z' fill='%23666666'/%3E%3Cpath d='M10 0L2 8L4 10L10 4L14 8L16 6L10 0Z' fill='%23666666'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%23666666'/%3E%3C/svg%3E"); + --baseline-icon-limited-front: #f09409; + --baseline-icon-limited-back: #565656; + --baseline-icon-widely-front: #1ea446; + --baseline-icon-widely-back: #125225; + --baseline-icon-newly-front: #4185ff; + --baseline-icon-newly-back: #2d509e; + --baseline-icon-no_data: #666666; } } - div { - background-repeat: no-repeat; - width: 36px; + :host { height: 20px; - display: inline-block; - } - - .support-limited { - background-image: var(--baseline-icon-limited); } - .support-widely { - background-image: var(--baseline-icon-widely); - } - - .support-newly { - background-image: var(--baseline-icon-newly); - } - - .support-no_data { - background-image: var(--baseline-icon-no_data); + svg { + width: 36px; + height: 20px; + display: inline-block; } `; } @@ -60,9 +88,7 @@ export default class BaselineIcon extends LitElement { } render() { - return html` -
- ` + return icons[this.support]; } } From af786a5a0fa371087f2551cfe9aa0d84880215de Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Fri, 25 Oct 2024 21:51:11 +0200 Subject: [PATCH 2/3] Use light-dark for colors --- baseline-icon.js | 26 +++++++------------------- 1 file changed, 7 insertions(+), 19 deletions(-) diff --git a/baseline-icon.js b/baseline-icon.js index 2f4d265..b1d56fd 100644 --- a/baseline-icon.js +++ b/baseline-icon.js @@ -44,25 +44,13 @@ export default class BaselineIcon extends LitElement { static get styles() { return css` :host { - --baseline-icon-limited-front: #f09409; - --baseline-icon-limited-back: #c6c6c6; - --baseline-icon-widely-front: #1ea446; - --baseline-icon-widely-back: #c4eed0; - --baseline-icon-newly-front: #1b6ef3; - --baseline-icon-newly-back: #a8c7fa; - --baseline-icon-no_data: #909090; - } - - @media (prefers-color-scheme: dark) { - :host { - --baseline-icon-limited-front: #f09409; - --baseline-icon-limited-back: #565656; - --baseline-icon-widely-front: #1ea446; - --baseline-icon-widely-back: #125225; - --baseline-icon-newly-front: #4185ff; - --baseline-icon-newly-back: #2d509e; - --baseline-icon-no_data: #666666; - } + --baseline-icon-limited-front: light-dark(#f09409, #f09409); + --baseline-icon-limited-back: light-dark(#c6c6c6, #565656); + --baseline-icon-widely-front: light-dark(#1ea446, #1ea446); + --baseline-icon-widely-back: light-dark(#c4eed0, #125225); + --baseline-icon-newly-front: light-dark(#1b6ef3, #4185ff); + --baseline-icon-newly-back: light-dark(#a8c7fa, #2d509e); + --baseline-icon-no_data: light-dark(#909090, #666666); } :host { From 4af130fa7e6389d63bb5b2500bb87cd5a6bee41e Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Fri, 25 Oct 2024 21:51:44 +0200 Subject: [PATCH 3/3] Update newly icon, remove xmlns --- baseline-icon.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/baseline-icon.js b/baseline-icon.js index b1d56fd..fc3e4f5 100644 --- a/baseline-icon.js +++ b/baseline-icon.js @@ -2,7 +2,7 @@ import {LitElement, html, css} from 'lit'; const icons = { 'limited': html` - + @@ -11,7 +11,7 @@ const icons = { `, 'widely': html` - + @@ -19,15 +19,13 @@ const icons = { `, 'newly': html` - - - - - + + + `, 'no_data': html` - +