Skip to content
Snippets Groups Projects
Unverified Commit 95c0c1ec authored by Bekerle, Patrizio's avatar Bekerle, Patrizio :fire:
Browse files

Add more CSS icon implementation with background-image and mask-image

parent 83443c57
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/common/src/icon.js
+ 32
− 41
View file @ 95c0c1ec
......@@ -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>
`;
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment