jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-31 21:17: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 { 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-svg-icon";
@ -16,26 +11,22 @@ export class DemoHaSvgIcon extends LitElement {
return html`
<ha-card header="ha-svg-icon demo">
<div class="card-content">
<div class="icon">
<ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
<ha-svg-icon .path=${mdiHomeAssistant} background></ha-svg-icon>
</div>
<div class="icon">
<ha-svg-icon .path=${mdiRocketLaunch}></ha-svg-icon>
<ha-svg-icon .path=${mdiRocketLaunch} background></ha-svg-icon>
</div>
<div class="icon">
<ha-svg-icon .path=${mdiDocker}></ha-svg-icon>
<ha-svg-icon .path=${mdiDocker} background></ha-svg-icon>
</div>
<div class="icon">
<ha-svg-icon .path=${mdiExclamationThick}></ha-svg-icon>
<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>
${Object.values(FIXED_DOMAIN_ICONS).map(
(icon) => html`
<div class="icon">
<ha-svg-icon .path=${icon}></ha-svg-icon>
<ha-svg-icon
.path=${icon}
.backgroundColor=${getColorByIndex(icon.length)}
></ha-svg-icon>
<ha-svg-icon
class="background"
.path=${icon}
.backgroundColor=${getColorByIndex(icon.length)}
></ha-svg-icon>
</div>
`
)}
</div>
</ha-card>
`;
@ -50,7 +41,7 @@ export class DemoHaSvgIcon extends LitElement {
ha-svg-icon {
margin: 4px;
}
ha-svg-icon[background] {
.background {
color: var(--card-background-color);
}
.icon {

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

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