MMM-MyWastePickup

[ashishtank]

@MyMirror you can also try with notepad++, it is xml text only. from file it looks like each image is of 24x24 size. see view box attribute value in symbol.

[MyMirror]

Ok, I have tried but can’t get it to work.
Who can help me that I can transfer the image in the correct size into the Icon_sprite.svg?

Thanks a lot!

[MyMirror]

OK, svg upload does not work - here is a Link …
https://1drv.ms/u/s!ApE0YZ4Ndle9lisnl74TgPwwgUgf?e=drs4kn

[ashishtank]

@MyMirror I tried to edit it but image didn’t work correctly. moreover the image you uploaded contains image data(base64 encoded). While on https://www.svgrepo.com/vectors/bin/4 files are with svg xml only and not image data. Looks like some svg editor needs to be use to combine the images. or you can use below my hacky solution.

1. Edit the icon_sprite.svg and rename recycle to recycle1 for symbol id (this is to load empty svg)

< svg xmlns="http://www.w3.org/2000/svg">

  < !-- recycle -->
  < symbol id="recycle1" viewBox="0 0 24 24"> < --this line

2. add below in custom.css

.waste-pickup-icon.recycle {
  background-image:url('https://www.svgrepo.com/show/270587/recycle-bin-trash.svg');
}

Result

[MyMirror]

Hi ashishtank,

Thanks for your attempts to format the SVG appropriately. I like your way for me, because the result is the way for me here.
Where exactly can I find the custom.css?
Do I have to create this file new in the MMM-MyWastePickup folder?
Is there anything to keep in mind when doing this? Are the 3 lines enough?

[MyMirror]

I have changed the color of the trash can and saved the SVG in the MMM-MyWastePickup directory.
Is this call correct then?

.waste-pickup-icon.recycle {
  background-image:url('file:///home/pi/MagicMirror/modules/MMM-MyWastePickup/recycle-bin2.svg');
}

[ashishtank]

@MyMirror

1. You renamed the recycle to recycle1 in the icon_sprite.svg file right ?
2. You should use relative web url in css, then it will always work even if your Pi’s ip address changes.

Do below in custom.css this file should be in css folder in magicmirror directory

.waste-pickup-icon.recycle {
  background-image:url('../modules/MMM-MyWastePickup/recycle-bin2.svg');
}

[MyMirror]

@ashishtank
works as described and shown.
So I have a workaround for now and can deal with the actual svg problem again later.

Great, thanks a lot!