Add multi-path icon support and path attributes (#18189)
This commit is contained in:
parent
feb371839c
commit
49f88a98a5
|
@ -1,9 +1,9 @@
|
|||
import {
|
||||
css,
|
||||
CSSResultGroup,
|
||||
html,
|
||||
LitElement,
|
||||
PropertyValues,
|
||||
css,
|
||||
html,
|
||||
nothing,
|
||||
} from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
|
@ -11,12 +11,12 @@ import { fireEvent } from "../common/dom/fire_event";
|
|||
import { debounce } from "../common/util/debounce";
|
||||
import { CustomIcon, customIcons } from "../data/custom_icons";
|
||||
import {
|
||||
checkCacheVersion,
|
||||
Chunks,
|
||||
findIconChunk,
|
||||
getIcon,
|
||||
Icons,
|
||||
MDI_PREFIXES,
|
||||
checkCacheVersion,
|
||||
findIconChunk,
|
||||
getIcon,
|
||||
writeCache,
|
||||
} from "../data/iconsets";
|
||||
import "./ha-svg-icon";
|
||||
|
@ -47,6 +47,8 @@ export class HaIcon extends LitElement {
|
|||
|
||||
@state() private _path?: string;
|
||||
|
||||
@state() private _secondaryPath?: string;
|
||||
|
||||
@state() private _viewBox?: string;
|
||||
|
||||
@state() private _legacy = false;
|
||||
|
@ -55,6 +57,7 @@ export class HaIcon extends LitElement {
|
|||
super.willUpdate(changedProps);
|
||||
if (changedProps.has("icon")) {
|
||||
this._path = undefined;
|
||||
this._secondaryPath = undefined;
|
||||
this._viewBox = undefined;
|
||||
this._loadIcon();
|
||||
}
|
||||
|
@ -70,6 +73,7 @@ export class HaIcon extends LitElement {
|
|||
}
|
||||
return html`<ha-svg-icon
|
||||
.path=${this._path}
|
||||
.secondaryPath=${this._secondaryPath}
|
||||
.viewBox=${this._viewBox}
|
||||
></ha-svg-icon>`;
|
||||
}
|
||||
|
@ -175,6 +179,7 @@ export class HaIcon extends LitElement {
|
|||
return;
|
||||
}
|
||||
this._path = icon.path;
|
||||
this._secondaryPath = icon.secondaryPath;
|
||||
this._viewBox = icon.viewBox;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,10 +1,19 @@
|
|||
import { css, CSSResultGroup, LitElement, svg, SVGTemplateResult } from "lit";
|
||||
import {
|
||||
css,
|
||||
CSSResultGroup,
|
||||
LitElement,
|
||||
nothing,
|
||||
svg,
|
||||
SVGTemplateResult,
|
||||
} from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
|
||||
@customElement("ha-svg-icon")
|
||||
export class HaSvgIcon extends LitElement {
|
||||
@property() public path?: string;
|
||||
|
||||
@property() public secondaryPath?: string;
|
||||
|
||||
@property() public viewBox?: string;
|
||||
|
||||
protected render(): SVGTemplateResult {
|
||||
|
@ -13,11 +22,20 @@ export class HaSvgIcon extends LitElement {
|
|||
viewBox=${this.viewBox || "0 0 24 24"}
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
focusable="false"
|
||||
role="img"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<g>
|
||||
${this.path ? svg`<path d=${this.path}></path>` : ""}
|
||||
${
|
||||
this.path
|
||||
? svg`<path class="primary-path" d=${this.path}></path>`
|
||||
: nothing
|
||||
}
|
||||
${
|
||||
this.secondaryPath
|
||||
? svg`<path class="secondary-path" d=${this.secondaryPath}></path>`
|
||||
: nothing
|
||||
}
|
||||
</g>
|
||||
</svg>`;
|
||||
}
|
||||
|
@ -30,7 +48,7 @@ export class HaSvgIcon extends LitElement {
|
|||
justify-content: center;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
fill: currentcolor;
|
||||
fill: var(--icon-primary-color, currentcolor);
|
||||
width: var(--mdc-icon-size, 24px);
|
||||
height: var(--mdc-icon-size, 24px);
|
||||
}
|
||||
|
@ -40,6 +58,13 @@ export class HaSvgIcon extends LitElement {
|
|||
pointer-events: none;
|
||||
display: block;
|
||||
}
|
||||
path.primary-path {
|
||||
opacity: var(--icon-primary-opactity, 1);
|
||||
}
|
||||
path.secondary-path {
|
||||
fill: var(--icon-secondary-color, currentcolor);
|
||||
opacity: var(--icon-secondary-opactity, 0.5);
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,6 +2,7 @@ import { customIconsets } from "./custom_iconsets";
|
|||
|
||||
export interface CustomIcon {
|
||||
path: string;
|
||||
secondaryPath?: string;
|
||||
viewBox?: string;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue