From 95c0c1ec0309aa3929be13ccfffb4ebd451fa2da Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio@bekerle.com>
Date: Mon, 7 Jun 2021 09:55:22 +0200
Subject: [PATCH] Add more CSS icon implementation with background-image and
mask-image
---
packages/common/src/icon.js | 73 ++++++++++++++++---------------------
1 file changed, 32 insertions(+), 41 deletions(-)
diff --git a/packages/common/src/icon.js b/packages/common/src/icon.js
index 2ab258f8..e1d3f85a 100644
--- a/packages/common/src/icon.js
+++ b/packages/common/src/icon.js
@@ -29,26 +29,26 @@ function getCSSVariable(name) {
}
export function getIconSVGURL(name) {
- const varName = '--dbp-override-icon-' + name;
- const cssVarValue = getCSSVariable(varName);
- const iconBasePath = getCSSVariable('--dbp-icon-base-path');
- // console.log("varName", varName);
- // console.log("cssVarValue", cssVarValue);
- // console.log("iconBasePath", iconBasePath);
-
- // check if we want to override the icon
- if (cssVarValue) {
- let path = cssVarValue;
-
- // try to take care of relative paths
- if (!path.startsWith('/') && !path.startsWith('http://') && !path.startsWith('https://') && iconBasePath) {
- path = iconBasePath + path;
- }
-
- // console.log("path", path);
-
- return path;
- }
+ // const varName = '--dbp-override-icon-' + name;
+ // const cssVarValue = getCSSVariable(varName);
+ // const iconBasePath = getCSSVariable('--dbp-icon-base-path');
+ // // console.log("varName", varName);
+ // // console.log("cssVarValue", cssVarValue);
+ // // console.log("iconBasePath", iconBasePath);
+ //
+ // // check if we want to override the icon
+ // if (cssVarValue) {
+ // let path = cssVarValue;
+ //
+ // // try to take care of relative paths
+ // if (!path.startsWith('/') && !path.startsWith('http://') && !path.startsWith('https://') && iconBasePath) {
+ // path = iconBasePath + path;
+ // }
+ //
+ // // console.log("path", path);
+ //
+ // return path;
+ // }
return commonUtils.getAssetURL(pkgName, 'icons/' + encodeURI(name) + '.svg');
}
@@ -121,51 +121,42 @@ export class Icon extends LitElement {
}
static get styles() {
+ // language=css
return css`
:host {
display: inline-block;
height: 1em;
+ width: 1em;
top: .125em;
position: relative;
}
- svg {
- height: 100%;
-<!-- background-image: url(/dist/icons/nextcloud.svg);-->
-<!-- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='black'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");-->
-<!-- background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97.6 81.74'%3E%3Cg%3E%3Cpath d='M89.8,22.7a28.51,28.51,0,0,0-16.9-9.1,27.84,27.84,0,0,0-14.8-12A24,24,0,0,0,48.9,0,28.36,28.36,0,0,0,20.6,27.4,22.42,22.42,0,0,0,13,70.11v-6.3A16.7,16.7,0,0,1,5.5,50a17,17,0,0,1,17-17h3.6V28.5A23,23,0,0,1,49,5.6a19.75,19.75,0,0,1,7.2,1.2h.1A22.48,22.48,0,0,1,68.9,17.5l.6,1.3,1.4.2a23.07,23.07,0,0,1,14.9,7.5,23.85,23.85,0,0,1-1.23,33.74v7A29.56,29.56,0,0,0,89.8,22.7Z'/%3E%3Cg%3E%3Cpath d='M16.39,71.61H36.65V51.36H16.39Z' style='fill: %23e4154b'/%3E%3Cpath d='M38.67,71.61H58.93V51.36H38.67Z' style='fill: %23e4154b'/%3E%3Cpath d='M61,71.61H81.21V51.36H61Z' style='fill: %23e4154b'/%3E%3Cpath d='M26.52,81.74H46.78V61.49H26.52Z' style='fill: %23e4154b'/%3E%3Cpath d='M50.83,61.49H71.08V41.23H50.83Z' style='fill: %23e4154b'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");-->
-<!-- mask-image: url(/dist/icons/nextcloud.svg);-->
-<!-- content: url(/dist/icons/nextcloud.svg);-->
- }
-
#svg {
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: center;
-<!-- background-image: url(/dist/icons/nextcloud.svg);-->
-<!-- content: url(/dist/icons/nextcloud.svg);-->
-<!-- content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='black'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");-->
-<!-- content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97.6 81.74'%3E%3Cg%3E%3Cpath d='M89.8,22.7a28.51,28.51,0,0,0-16.9-9.1,27.84,27.84,0,0,0-14.8-12A24,24,0,0,0,48.9,0,28.36,28.36,0,0,0,20.6,27.4,22.42,22.42,0,0,0,13,70.11v-6.3A16.7,16.7,0,0,1,5.5,50a17,17,0,0,1,17-17h3.6V28.5A23,23,0,0,1,49,5.6a19.75,19.75,0,0,1,7.2,1.2h.1A22.48,22.48,0,0,1,68.9,17.5l.6,1.3,1.4.2a23.07,23.07,0,0,1,14.9,7.5,23.85,23.85,0,0,1-1.23,33.74v7A29.56,29.56,0,0,0,89.8,22.7Z'/%3E%3Cg%3E%3Cpath d='M16.39,71.61H36.65V51.36H16.39Z' style='fill: %23e4154b'/%3E%3Cpath d='M38.67,71.61H58.93V51.36H38.67Z' style='fill: %23e4154b'/%3E%3Cpath d='M61,71.61H81.21V51.36H61Z' style='fill: %23e4154b'/%3E%3Cpath d='M26.52,81.74H46.78V61.49H26.52Z' style='fill: %23e4154b'/%3E%3Cpath d='M50.83,61.49H71.08V41.23H50.83Z' style='fill: %23e4154b'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");-->
- }
-
- svg * {
- fill: currentColor;
+ background-color: currentColor;
+ mask-repeat: no-repeat;
+ mask-position: center;
}
`;
}
render() {
const iconURL = getIconSVGURL(this.name);
- console.log("iconURL", iconURL);
- let svg = getSVGTextElementCached(this.name);
+ const iconPart = this.name.trim().replaceAll(" ", "");
+ // console.log("iconURL", iconURL);
+ // console.log("iconPart", iconPart);
+
return html`
<style>
#svg {
- background-image: url(${iconURL});
+ /*background-image: var(--dbp-override-icon-${iconPart}, url(${iconURL}));*/
+ -webkit-mask-image: var(--dbp-override-icon-${iconPart}, url(${iconURL}));
+ mask-image: var(--dbp-override-icon-${iconPart}, url(${iconURL}));
}
</style>
-<!-- ${until(svg)}-->
<div id="svg"></div>
`;
}
--
GitLab