jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-01 13:37:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

adjust

Browse Source
This commit is contained in:
Ludeeus 2021-11-18 21:04:16 +00:00
parent 25f90f5453
commit a8adf17f9d
2 changed files with 22 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
gallery/src/demos/demo-ha-svg-icon.ts
View File

@ -1,12 +1,7 @@
import {
mdiRocketLaunch,
mdiHomeAssistant,
mdiDocker,
mdiExclamationThick,
mdiFlask,
} from "@mdi/js";
import { css, html, LitElement, TemplateResult } from "lit"; import { css, html, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import { getColorByIndex } from "../../../src/common/color/colors";
import { FIXED_DOMAIN_ICONS } from "../../../src/common/const";
import "../../../src/components/ha-card"; import "../../../src/components/ha-card";
import "../../../src/components/ha-svg-icon"; import "../../../src/components/ha-svg-icon";
@ -16,26 +11,22 @@ export class DemoHaSvgIcon extends LitElement {
return html` return html`
<ha-card header="ha-svg-icon demo"> <ha-card header="ha-svg-icon demo">
<div class="card-content"> <div class="card-content">
<div class="icon"> ${Object.values(FIXED_DOMAIN_ICONS).map(
<ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon> (icon) => html`
<ha-svg-icon .path=${mdiHomeAssistant} background></ha-svg-icon> <div class="icon">
</div> <ha-svg-icon .path=${icon}></ha-svg-icon>
<div class="icon"> <ha-svg-icon
<ha-svg-icon .path=${mdiRocketLaunch}></ha-svg-icon> .path=${icon}
<ha-svg-icon .path=${mdiRocketLaunch} background></ha-svg-icon> .backgroundColor=${getColorByIndex(icon.length)}
</div> ></ha-svg-icon>
<div class="icon"> <ha-svg-icon
<ha-svg-icon .path=${mdiDocker}></ha-svg-icon> class="background"
<ha-svg-icon .path=${mdiDocker} background></ha-svg-icon> .path=${icon}
</div> .backgroundColor=${getColorByIndex(icon.length)}
<div class="icon"> ></ha-svg-icon>
<ha-svg-icon .path=${mdiExclamationThick}></ha-svg-icon> </div>
<ha-svg-icon .path=${mdiExclamationThick} background></ha-svg-icon> `
</div> )}
<div class="icon">
<ha-svg-icon .path=${mdiFlask}></ha-svg-icon>
<ha-svg-icon .path=${mdiFlask} background></ha-svg-icon>
</div>
</div> </div>
</ha-card> </ha-card>
`; `;
@ -50,7 +41,7 @@ export class DemoHaSvgIcon extends LitElement {
ha-svg-icon { ha-svg-icon {
margin: 4px; margin: 4px;
} }
ha-svg-icon[background] { .background {
color: var(--card-background-color); color: var(--card-background-color);
} }
.icon { .icon {

7
src/components/ha-svg-icon.ts
View File

@ -1,6 +1,5 @@
import { css, CSSResultGroup, LitElement, svg, SVGTemplateResult } from "lit"; import { css, CSSResultGroup, LitElement, svg, SVGTemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { getColorByIndex } from "../common/color/colors";
@customElement("ha-svg-icon") @customElement("ha-svg-icon")
export class HaSvgIcon extends LitElement { export class HaSvgIcon extends LitElement {
@ -8,14 +7,14 @@ export class HaSvgIcon extends LitElement {
@property() public viewBox?: string; @property() public viewBox?: string;
@property({ type: Boolean }) public background = false; @property({ attribute: "background-color" }) public backgroundColor?: string;
protected render(): SVGTemplateResult { protected render(): SVGTemplateResult {
return svg` return svg`
<svg <svg
class="${this.background ? "background" : ""}" class="${this.backgroundColor ? "background" : ""}"
style="background-color: ${ style="background-color: ${
this.background ? getColorByIndex(this.path?.length || 0) : "undefined" this.backgroundColor ? this.backgroundColor : "undefined"
};" };"
viewBox=${this.viewBox || "0 0 24 24"} viewBox=${this.viewBox || "0 0 24 24"}
preserveAspectRatio="xMidYMid meet" preserveAspectRatio="xMidYMid meet"