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

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

parent 9835c70b
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
packages/common/src/icon.js
+ 32
− 41
View file @ 9febcd20
...@@ -29,26 +29,26 @@ function getCSSVariable(name) { ...@@ -29,26 +29,26 @@ function getCSSVariable(name) {
} }
export function getIconSVGURL(name) { export function getIconSVGURL(name) {
const varName = '--dbp-override-icon-' + name; // const varName = '--dbp-override-icon-' + name;
const cssVarValue = getCSSVariable(varName); // const cssVarValue = getCSSVariable(varName);
const iconBasePath = getCSSVariable('--dbp-icon-base-path'); // const iconBasePath = getCSSVariable('--dbp-icon-base-path');
// console.log("varName", varName); // // console.log("varName", varName);
// console.log("cssVarValue", cssVarValue); // // console.log("cssVarValue", cssVarValue);
// console.log("iconBasePath", iconBasePath); // // console.log("iconBasePath", iconBasePath);
//
// check if we want to override the icon // // check if we want to override the icon
if (cssVarValue) { // if (cssVarValue) {
let path = cssVarValue; // let path = cssVarValue;
//
// try to take care of relative paths // // try to take care of relative paths
if (!path.startsWith('/') && !path.startsWith('http://') && !path.startsWith('https://') && iconBasePath) { // if (!path.startsWith('/') && !path.startsWith('http://') && !path.startsWith('https://') && iconBasePath) {
path = iconBasePath + path; // path = iconBasePath + path;
} // }
//
// console.log("path", path); // // console.log("path", path);
//
return path; // return path;
} // }
return commonUtils.getAssetURL(pkgName, 'icons/' + encodeURI(name) + '.svg'); return commonUtils.getAssetURL(pkgName, 'icons/' + encodeURI(name) + '.svg');
} }
...@@ -121,51 +121,42 @@ export class Icon extends LitElement { ...@@ -121,51 +121,42 @@ export class Icon extends LitElement {
} }
static get styles() { static get styles() {
// language=css
return css` return css`
:host { :host {
display: inline-block; display: inline-block;
height: 1em; height: 1em;
width: 1em;
top: .125em; top: .125em;
position: relative; 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 { #svg {
height: 100%; height: 100%;
width: 100%; width: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
<!-- background-image: url(/dist/icons/nextcloud.svg);--> background-color: currentColor;
<!-- content: url(/dist/icons/nextcloud.svg);--> mask-repeat: no-repeat;
<!-- 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>");--> mask-position: center;
<!-- 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;
} }
`; `;
} }
render() { render() {
const iconURL = getIconSVGURL(this.name); const iconURL = getIconSVGURL(this.name);
console.log("iconURL", iconURL); const iconPart = this.name.trim().replaceAll(" ", "");
let svg = getSVGTextElementCached(this.name); // console.log("iconURL", iconURL);
// console.log("iconPart", iconPart);
return html` return html`
<style> <style>
#svg { #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> </style>
<!-- ${until(svg)}-->
<div id="svg"></div> <div id="svg"></div>
`; `;
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment