Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use inline SVG for Baseline icons #22

Merged
merged 3 commits into from
Nov 15, 2024
Merged

Use inline SVG for Baseline icons #22

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8ee0634
Use inline SVG for Baseline icons
pepelsbey Sep 19, 2024
af786a5
Use light-dark for colors
pepelsbey Oct 25, 2024
4af130f
Update newly icon, remove xmlns
pepelsbey Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 45 additions & 33 deletions baseline-icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,39 @@
import {LitElement, html, css} from 'lit';

const icons = {
'limited': html`
<svg viewBox="0 0 36 20">
<path fill="var(--baseline-icon-limited-front)" d="M10 0L16 6L14 8L8 2L10 0Z"/>
<path fill="var(--baseline-icon-limited-front)" d="M22 12L20 14L26 20L28 18L22 12Z"/>
<path fill="var(--baseline-icon-limited-front)" d="M26 0L28 2L10 20L8 18L26 0Z"/>
<path fill="var(--baseline-icon-limited-back)" d="M8 2L10 4L4 10L10 16L8 18L0 10L8 2Z"/>
<path fill="var(--baseline-icon-limited-back)" d="M28 2L36 10L28 18L26 16L32 10L26 4L28 2Z"/>
</svg>
`,
'widely': html`
<svg viewBox="0 0 36 20">
<path fill="var(--baseline-icon-widely-front)" d="M18 8L20 10L18 12L16 10L18 8Z"/>
<path fill="var(--baseline-icon-widely-front)" d="M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z"/>
<path fill="var(--baseline-icon-widely-back)" d="M28 2L26 4L32 10L26 16L22 12L20 14L26 20L36 10L28 2Z"/>
<path fill="var(--baseline-icon-widely-back)" d="M10 0L2 8L4 10L10 4L14 8L16 6L10 0Z"/>
</svg>
`,
'newly': html`
<svg viewBox="0 0 36 20">
<path fill="var(--baseline-icon-newly-back)" d="m10 0 2 2-2 2-2-2 2-2Zm4 4 2 2-2 2-2-2 2-2Zm16 0 2 2-2 2-2-2 2-2Zm4 4 2 2-2 2-2-2 2-2Zm-4 4 2 2-2 2-2-2 2-2Zm-4 4 2 2-2 2-2-2 2-2Zm-4-4 2 2-2 2-2-2 2-2ZM6 4l2 2-2 2-2-2 2-2Z"/>
<path fill="var(--baseline-icon-newly-front)" d="m26 0 2 2-18 18L0 10l2-2 8 8L26 0Z"/>
</svg>
`,
'no_data': html`
<svg viewBox="0 0 36 20">
<path fill="var(--baseline-icon-no_data)" d="M18 8L20 10L18 12L16 10L18 8Z"/>
<path fill="var(--baseline-icon-no_data)" d="M28 2L26 4L32 10L26 16L22 12L20 14L26 20L36 10L28 2Z"/>
<path fill="var(--baseline-icon-no_data)" d="M10 0L2 8L4 10L10 4L14 8L16 6L10 0Z"/>
<path fill="var(--baseline-icon-no_data)" d="M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z"/>
</svg>
`,
};

/**
* Web component rendering baseline support icon.
* @see https://web.dev/baseline
Expand All @@ -8,44 +42,24 @@ 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: light-dark(#f09409, #f09409);
pepelsbey marked this conversation as resolved.
Show resolved Hide resolved
--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);
}

@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");
}
:host {
height: 20px;
}

div {
background-repeat: no-repeat;
svg {
width: 36px;
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);
}
`;
}

Expand All @@ -60,9 +74,7 @@ export default class BaselineIcon extends LitElement {
}

render() {
return html`
<div class="support-${this.support}"></div>
`
return icons[this.support];
}
}

Expand Down