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

Add background to ha-svg-icon

Browse Source
This commit is contained in:
Ludeeus 2021-11-18 18:39:17 +00:00
parent 91b009af79
commit 25f90f5453
2 changed files with 81 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
gallery/src/demos/demo-ha-svg-icon.ts Normal file
View File

@ -0,0 +1,68 @@
import {
mdiRocketLaunch,
mdiHomeAssistant,
mdiDocker,
mdiExclamationThick,
mdiFlask,
} from "@mdi/js";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators";
import "../../../src/components/ha-card";
import "../../../src/components/ha-svg-icon";
@customElement("demo-ha-svg-icon")
export class DemoHaSvgIcon extends LitElement {
protected render(): TemplateResult {
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>
</div>
</ha-card>
`;
}
static get styles() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
ha-svg-icon {
margin: 4px;
}
ha-svg-icon[background] {
color: var(--card-background-color);
}
.icon {
display: flex;
align-items: center;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"demo-ha-svg-icon": DemoHaSvgIcon;
}
}

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

@ -1,5 +1,6 @@
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 {
@ -7,9 +8,15 @@ export class HaSvgIcon extends LitElement {
@property() public viewBox?: string;
@property({ type: Boolean }) public background = false;
protected render(): SVGTemplateResult {
return svg`
<svg
class="${this.background ? "background" : ""}"
style="background-color: ${
this.background ? getColorByIndex(this.path?.length || 0) : "undefined"
};"
viewBox=${this.viewBox || "0 0 24 24"}
preserveAspectRatio="xMidYMid meet"
focusable="false">
@ -28,12 +35,14 @@ export class HaSvgIcon extends LitElement {
position: relative;
vertical-align: middle;
fill: currentcolor;
width: var(--mdc-icon-size, 24px);
height: var(--mdc-icon-size, 24px);
}
.background {
padding: 8px;
border-radius: 50%;
}
svg {
width: 100%;
height: 100%;
width: var(--mdc-icon-size, 24px);
height: var(--mdc-icon-size, 24px);
pointer-events: none;
display: block;
}