SVG Icons - with Matrix Theme

Tags: #<Tag:0x00007f61706aea18>

Hi All

Has anyone been successful in bundling in new icons ? Im struggling to get this icon into AppIcons.svg, other icons load in inside this file.

Using this in HabPanel

<symbol id="ps4">

                <path d="M443.985,280.831c0-1.639-1.328-2.968-2.967-2.969l-14.185-0.009v-53.262c0-6.982-3.867-9.472-7.486-9.472
                        c-4.839,0,0.306-2.32-103.92,61.689c-7.71,4.728-6.111,11.55,3.406,11.55l88.849,0.012v5.559c0,1.641,1.33,2.969,2.971,2.969
                        c17.979,0,16.181,1.49,16.181-8.535C445.542,288.363,443.985,289.775,443.985,280.831z M407.7,277.836h-73.508l73.508-45.259
                        V277.836z"/>
                <path d="M164.474,215.118H71.515c-1.639,0-2.969,1.33-2.969,2.969v4.565c0,1.64,1.33,2.969,2.969,2.969h87.29
                        c6.416,0,10.097,4.35,10.097,11.936s-3.68,11.938-10.097,11.938h-70.17c-11.452,0-20.089,9.581-20.089,22.287l0.006,22.146
                        c0,1.64,1.33,2.968,2.969,2.968H84.68c1.639,0,2.969-1.329,2.969-2.969v-22.146c0-7.045,3.844-11.78,9.564-11.78h67.262
                        c14.509,0,23.522-8.592,23.522-22.424C187.996,223.724,178.983,215.118,164.474,215.118z"/>
                <path d="M319.254,215.972c-0.557-0.557-1.313-0.87-2.102-0.87l-50.739,0.01c-14.509,0-23.522,8.601-23.522,22.445v36.897
                        c0,7.58-3.68,11.929-10.097,11.929h-47.616c-1.639,0-2.969,1.33-2.969,2.969v4.575c0,1.641,1.33,2.969,2.969,2.969h53.276
                        c14.521,0,23.538-8.596,23.538-22.433v-36.918c0-7.587,3.678-11.938,10.089-11.938h45.073c1.639,0,2.969-1.33,2.969-2.969
                        C320.123,217.919,320.356,217.075,319.254,215.972z"/>
                <path d="M492.498,155.046H273.501c-4.143,0-7.5,3.358-7.5,7.5c0,4.142,3.357,7.5,7.5,7.5h218.998c2.482,0,4.5,2.019,4.5,4.5
                        v67.063c0,4.142,3.357,7.5,7.5,7.5c4.142,0,7.5-3.358,7.499-7.5v-67.063C511.999,163.795,503.25,155.046,492.498,155.046z"/>
                <path d="M504.5,269.113c-4.143,0-7.5,3.358-7.5,7.5v60.839c0,2.482-2.018,4.5-4.5,4.5H19.501c-2.481,0-4.5-2.018-4.5-4.5V174.548
                        c0-2.481,2.019-4.5,4.5-4.5h218.997c4.143,0,7.5-3.358,7.5-7.5c0-4.142-3.357-7.5-7.5-7.5H19.501
                        C8.749,155.046,0,163.795,0,174.548v162.905c0,10.754,8.749,19.501,19.501,19.501h472.998c10.753,0,19.501-8.749,19.501-19.501
                        v-60.839C512,272.471,508.643,269.113,504.5,269.113z"/>

</symbol>

To add your own custom icons you need to just drop them into the conf/icons/classic folder. If they are to be dynamic icons they need to follow the rules defined here.

To use SVG icons you need to make sure svg is selected in PaperUI -> Configuration -> Settings.

Hi Rich

Im talking specifically with the custom theme, which combines the svg’s into a another file and references them using xref:

Cheers

I’ve seen no documentation or reference indicating that is possible with OH.

I’ve had issues in the past where I couldn’t get the icon to display after adding it to appicons.svg due to it being out of the viewport that the theme uses. The viewport is kind of like a cropped view, so if your image doesn’t fall into that part of the image file you won’t see it. I’ve also had the old version before the addition being stuck in the browser cache, so clearing the cache might just be the ticket too.

If you open the file in a vector editor like inkscape helps a lot with troubleshooting these kinds of issues, you can then see if it’s showing on top of the pile of other icons and if not you can drag and resize as necessary in a visual way. I always also work on a copy of my appicons.svg file when doing this just in case I accidentally mess something up.

Edit: @rlkoshak, OP is referring to this if you are curious: Matrix theme for Habpanel

1 Like

Added the HABpanel read and moved to the HABpanel section so more of the appropriate people will see it now and in the future.

Hi @zolakk i installed inkcsape, how do you mean you find see if its showing on top of a pile of other icons?

yes ive had cache issues, so thats an easy fix!

Further zolakk, i think i got what you meant about the viewport.

If the code has 0 ,0 , 440, 110 that means its 440 pixels wide by 110 high. If i open a SVG icon, and resize, you can see its far off where it should be. So i adjusted the height etc to effectively centre it like this:

However, when you edit the file to copy the code into the Appicons.svg there so much stuff in there I’m not even sure what I need?

See below of what Inkscape exported when i saved the resized svg

That’s kind of tough, but what I would try is create a new < g > < /g > block with the ID you want in the appicons.svg file and copy and paste everything below the yellow highlighted lines into your new block and test that.

1 Like

Ill give it a go! thanks!

That didnt really do anything. Its not entirely clear to me how to resize these things or make them work!

What happens if you open the appicons.svg with the newly added icon in inkscape? You should see it there as a layer and may have to relocate/resize it there too

Hmm i dont see any layers in there :slight_smile: I downloaded the github version again, opened it, i dont see layers

Sorry, after double checking I misspoke because I was working from memory. Objects (Object -> Objects… menu) is what I meant to say. For example, here’s what mine looks like in Inkscape Objects

Ah.

This blows my mind. I create a 440x110 picture, put my icon in and it still displays weird!! why is this so god damn hard!

It’s not terribly difficult once you figure it out, but the “figuring it out” is the hard part. Instead of trying to explain through words, here is step by step what I did to integrate that PS4 logo into my AppIcons.svg file. Hopefully that clears up the confusion.

  1. Open your AppIcons file, go to the bottom between the final < /g > and < /svg > tag and add an empty line
    PS4-Step1

  2. Add a new < g > and < /g > block with id=ps4 (or whatever you want to call it)
    PS4-Step2

  3. Open your source svg file, select all the < g > and < /g > tags that have data

  4. Copy and paste that into your newly created < g id=“ps4” > < /g > block

  5. Save and open the file in InkScape, it should look like this
    PS4-Step5

  6. Resize it so it fits in the box with all the other icon “mess”. This box is what the “viewbox” is targeting in HabPanel
    PS4-Step6

  7. Drag it wherever in the area you want it to be.
    PS4-Step7

  8. Save it, copy it into your /etc/openhab2/html/matrix-theme folder (this maps to /static/matrix-theme in HabPanel). Reference it like so. Note the #ps4 tag at the end is case sensitive and has to match the ID you added into the AppIcons EXACTLY

  9. There you have it!
    PS4-Step9

  10. In case you don’t feel like messing around with it yourself, here’s the svg file I used to do the above
    AppIcons

3 Likes

legend! Thanks will follow the steps tonght :slight_smile: Thank you!