Added support for SVG files about tablacusexplorericonpacks

[tablacus]

Sure thing.
I will add it to CSS in the next version.

Thank you,

[duarteframos]

Cool, seems to be working fine on my end as well now.
They need some serious cleanup though, some styles need to be updated still to change themes correctly.

A few of them are also misused or misnamed, I'll have to check.
I'll get back to you with an update. Thanks for the help

[duarteframos]

Alright, @tablacus I think I'm satisfied with the result for now, I've made a pull request with the new SVG icon pack.

From what I've checked all icons are now correctly responding to dark themes, and I've fixed all the incorrectly named files.

I took the opportunity to updated a few "ugly" ones that had been bothering me, and also introduced a new icons for Control Panel, Info "i", Settings, and a misc Lock icon. You may want to use this last one for the Tab Plus locked tabs.

Let me know if anything is missing and don't hesitate to ask if you need any particular new icons, I'll be happy to add them.

May this open up the option for automatic user specified colored themes ;)

[tablacus]

Awesome!

I will use the lock icon in the next add-on update.

Thank you always,

[duarteframos]

Great idea! I've tweaked it a bit and made a pull request, see if you like it that way, otherwise I can update.
I've also added one icon that was missing for the Redo operation

[tablacus]

Tablacus Explorer 21.2.17 now applies the Misc icon to buttons.

Name	Image file
Add	add.svg(.png)
Portable	portable.svg(.png)
Test	test.svg(.png)
Browse...	browse.svg(.png)

https://github.com/tablacus/TablacusExplorer/releases/tag/22.2.17

Regards,

[duarteframos]

@tablacus I've made a minor update to the vector icons.
Also included new icons for the Sync and Split addons, in case you want to make use of them

misc\sync_browse.svg
misc\split_1x1.svg
misc\split_1x2.svg
misc\split_2x1.svg
misc\split_2x2.svg

[tablacus]

I want to aim for this in the future.

tablacus/TablacusExplorer#329

Regards,

[tablacus]

Yeah, exactly!

[duarteframos]

Wow that is great news, I love vector icons! SVG graphics are definitely the way to go, and automatic theming them through CSS opens up so many possibilities!

Good thing is the icons I created previously were already design as SVGs in Inkscape, so porting them should be relatively easy, just a matter of saving them to separate files. It will take some time, but I'll work on it as time permits.

Do I have to take any particular care with how elements are colored?
Things like using fill colors, or mixing in strokes as well, using CSS over XML attributes etc. Or should elements have no color information at all and let Tablacus dealt with that?

I could also take the opportunity to add a few new additional icons in, some addons and are probably still missing icons, and certain UI elements as well, like the Pin icon for locked tabs. Any recommendations on which ones are required?

[tablacus]

I have added the following settings to index.css.

svg {
  fill: currentColor;
}

The part without SVG fill is drawn in the text color.

<svg class="text" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="45"/>
  <circle cx="50" cy="50" r="20" fill="#ff0000"/>
</svg>

Light themes

Dark themes

The fill="#ff0000" part is displayed in red in both themes.

I would be happy if there are new elements, but please do so within a reasonable range.

Best regards,

[duarteframos]

Cool!
I'll try to work on it during the coming days, I'll do some testing during the weekend and see how it goes.

Not sure if it is already in place, would be nice to have something equivalent of svg {fill: currentColor;} for stroke color as well.
Since most of my icons are basically line-art, it is easier to work with strokes only so there are barely any fill colors and I used mostly line colors. Probably something like:

svg {
  stroke: currentColor;
}

[tablacus]

Microsoft PowerToys SVG preview didn't work without stroke="currentColor".

<svg viewBox="0 0 64 64">
<path d="M 7 9 H 56 Z" stroke-width="3"/>
<rect x="7" y="6" width="50" height="52" stroke-width="5" fill="none"/>
</svg>

<svg viewBox="0 0 64 64">
<g fill="none" stroke="currentColor">
<path d="M 7 9 H 56 Z" stroke-width="3"/>
<rect x="7" y="6" width="50" height="52" stroke-width="5"/>
</g>
</svg>

It may be safer to include stroke="currentColor".

Regards,

[duarteframos]

Hi sorry for the delay, didn't get much time during the weekend, but I've been slowly playing with this since.

I was trying to get this to work, on a purpose unpacked vanilla fresh installationto eliminate any unwanted variables and side effects, but couldn't get Tablacus to boot up with an SVG icon theme.

TE64 22.2.12 Microsoft Windows 10 Pro 64-bit (10.0.19041) IE/11 JS/11.0.16384 en_us 96 Intel(R) Xeon(R) CPU E5-2650 v2 @ 2.60GHz Intel(R) Xeon(R) CPU E5-2650 v2 @ 2.60GHz Windows Defender ESET Security ESET Endpoint Antivirus
mouse 1.33,key 1.26,addressbar 1.70,filterbar 1.39,back 1.18,forward 1.18,up 1.20,treeview 1.43,toolbar 1.43,mainmenu 1.16,titlebar 1.09,tabplus 1.92,multithread 1.29,remember 1.42,undoclosetab 1.16,aboutblank 1.04,segoeicons 1.04

If a single SVG file is in the Icons folder I'm presented with a script error at startup in

Line: 3730
Char: 3
Error: Expected '}'
Code: 0

After that a blank Tablacus window opens up without UI. I can close it from the icon on the top left of the window and nothing else, eliminating the icons returns functioning regularly.
Did I miss a step somewhere or are my SVG files Inkscape is producing somehow invalid?

They do show up correctly in Tablacus preview pane, browser, and Inkscape, but maybe Tablacus expects things differently.
I'm attaching a zip file with a preview for you to test on your end if it helps. icons.zip. I think the config.jsonis well formatted so I hope that wasn't the cause.
This is a work in progress, I still haven't replaced the style of most icons with "current color", so they won't respond to theme changes yet. I'll take care of that later once this is working.

---

On a another note, as I started working on this I realized now that Inkscape by default seems to use CSS styles for assigning colors and strokes to paths by default, rather than native XML styling like you illustrated previously. This is a sample example

<path
         style="fill:none;fill-opacity:1;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="M 34,158 H 94"
         id="path3391" />

Instead of the recommended XML attribute

<path d="m58 182-24-24 24-24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>

This isn't a problem per-se, I can convert them one by one at export with different saving settings, but it makes creating icons a bit more manual that I'd like, at least initially.

I was wondering if there was a way to also have Tablacus interpret styles as input automatically like stroke:currentColor;, like it already does for stroke="currentColor", making Icon creation in the future require less manual work,

Not sure if these replacements have any performance implications or not, if we have to chose between the two then I'd vote for styles over XML, but I can work with both.

[tablacus]

For the time being, only the error part

Line: 3730
Char: 3
Error: Expected '}'
Code: 0

Please confirm config.json

      "en": "Default vector SVG icons",

If there is no "," after ".svg", this error will occur.

      "en": "Default vector SVG icons"

Regrads,

[tablacus]

CSS styles for assigning colors

XML attribute

Neither is a problem

The above image is drawn with PowerToys.

Regards,

[tablacus]

config.json

{
  "info": {
    "name": {
      "en": "Tablacus Vector"
    },
    "descprition": {
      "en": "Default vector SVG icons",
      "pt": "Ícones vectoriais SVG pré-definidos"
    },
    "creator": {
      "en": "Duarte Farrajota Ramos"
    },
    "id": "Tablacus_Light",
    "ext": ".svg",
    "version": "0.01",
    "pubDate" : "Sun, 13 Feb 2022 22:59:00 GMT",
    "license": "MIT License",
    "URL": "https://duarteramos.pt"
  }
}

Dark themes

Light themes

Thank you,

[tablacus]

How about the preview image, like this?

Regards,

[duarteframos]

👌 Hell yeah, this is awesome. I've been eager to see this, looking great.

Let me know if you want any more bespoke icons for any part of the UI, I'll be happy to add them.
Only thing missing now is supporting SVG icons for file types in the file list.

[duarteframos]

Very nice, glad to see some improvements in this front.
I don't know much about coding, but I'll be glad to assist in any way I can.

Let me know if you need any help with graphics ;)

[tablacus]

Please rename sync_browse.svg to synchronize.svg.
The add-on "Synchronize" icon can be displayed with "synchronize.svg".

Regards,

[tablacus]

I have decided to remove the following CSS because the following problems have been reported.

svg {
  stroke: currentColor;
}

tablacus/TablacusExplorer#573

Regards,

[duarteframos]

CSS Styling It seems to be interfering with preview of SVG files, that is unfortunate.

Not sure how to solve this. What would be a good way to proceed here?

• Should we use a separate CSS style sheet for UI icons and file previews? It may lead to incorrect preview for icon SVG files, but I supposed it is minor issue compared to wrong preview of potentially all SVG.
• Maybe apply stroke: currentColor; only in for UI styling and not for previews. Again may lead to wrong preview but correct appearance in UI.
• Somehow tag icon SVG files intended to use as icons differently, and apply styling only to those files. Maybe something like <svg tablacus="icon">...</svg> or <svg type="TablacusIcon">...</svg>
• Use a different CSS class only for themeable elements in SVG files example Class=TablacusIcon. Downsides are manually tagging individual SVG elements may lead to some overhead with manually created files.
• My favorite would be to only do the actual replacement of stroke: currentColor; in elements that actually already have styling with stroke: currentColor; or fill: currentColor; in them. I already explicitly included stroke: currentColor; in all themable elements of my SVG files anyway, so there would be no overhead in creating those, and that way we won't risk incorrectly alter styling for whatever random SVG files TE happens to come across.

It could also eventually open up the possibility to use different additional variables for coloring elements in the future, like stroke: themecolorA; or stroke: AccentColor; or fill: themecolorC; and icons respond to multicolored themes that define a main color and one or more accent color for example.

Inkscape uses a similar system for one of its icon packs, that respond to color options a user may choose from the UI.

[tablacus]

The parent element of the SVG icon has a class of "svgicon".
Maybe this way you can only affect the svg icon.

.svgicon svg {
  stroke: currentColor;
}

The different additional variables are interesting.
If we can set the color with CSS, we feel that you can use the add-on "user style sheet".
I will try to check up on that.

Thank you,

[duarteframos]

The parent element of the SVG icon has a class of "svgicon". Maybe this way you can only affect the svg icon.

That sounds reasonable, so would it suffice if in the SVG header of my files I could add class="svgicon " as below?

<svg
   width="64"
   height="64"
   viewBox="0 0 64 64"
   version="1.1"
   class="svgicon "> 
...
</svg>

What if I had a group for the icon elements, would it also work if I tagged only that group inside the file with that class?

<g
     id="layer3"
     style="display:inline"
     class="svgicon "
     transform="translate(-320,-415.99999)">
 />
    </g>

My main work file contains all icons side by side from there I batch export. I haven't tested yet what parameters survive the export process. I can probably batch replace a class into all SVG headers easily, but it might be more complicated to do that to groups.

Alternatively I might also easily just add that class to all groups in the main file once, and see if they survive exporting process and are kept in the final files automatically.

[tablacus]

I didn't explain it well enough.
The SVG icon already has a class svgicon as follows.
The parent element span has a class svgicon.

<span title="Refresh" src="C:\bin\teedge\icons\browser\3.svg" class="svgicon"><svg style="max-width:24px;height:24px" viewBox="0 0 64 64" version="1.1" id="svg8" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <defs id="defs2">
    <linearGradient id="Icons_Dark">
      <stop style="stop-color:#ffffff;stop-opacity:1;" offset="0" id="stop2609"></stop>
    </linearGradient>
    <linearGradient id="Stroke_Backdrop" gradientTransform="matrix(6.7933545,0,0,8.0447619,-7681.912,-23804.025)">
      <stop style="stop-color:#ff0303;stop-opacity:1;" offset="0" id="stop3116"></stop>
    </linearGradient>
    <linearGradient id="Icons_Light" gradientTransform="matrix(28.431738,-6.7717873,-8.3792048,-27.796996,66244.186,87808.556)">
      <stop style="stop-color:black;stop-opacity:1;" offset="0" id="stop922"></stop>
    </linearGradient>
    <linearGradient id="Slices" gradientTransform="matrix(0.75294117,0,0,2.4999993,618899.01,-1214536.9)">
      <stop style="stop-color:#ffffff;stop-opacity:0.86363637;" offset="0" id="stop1554"></stop>
    </linearGradient>
  </defs>
  <metadata id="metadata5">
    <rdf:rdf>
      <cc:work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type>
      </cc:work>
    </rdf:rdf>
  </metadata>
  <g id="layer3" style="display:inline" transform="translate(-320,1536.0001)">
    <g id="03_TablacusVector\browser\3" transform="translate(0,-2048)">
      <rect y="511.99994" x="320" height="64" width="64" id="use3523" style="display:inline;fill:white;fill-opacity:0;stroke:none;stroke-linecap:round;stroke-opacity:1"></rect>
      <g id="g3566">
        <path style="fill:none;fill-opacity:0;stroke:currentcolor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path3560" d="M 378,544 A 26,26 0 0 1 358.72929,569.11407 26,26 0 0 1 329.48334,557"></path>
        <path style="fill:none;fill-opacity:0;stroke:currentcolor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 378,544 -8,6" id="path3562"></path>
      </g>
      <use height="100%" width="100%" transform="rotate(180,352,544)" id="use3568" xlink:href="#g3566" y="0" x="0"></use>
    </g>
  </g>
</svg></span>

On a different note, I'm trying to figure out how to reflect the Windows accent colors in CSS and SVG icons.

Regards,

[duarteframos]

Ah I see, so there is no need to change anything in the icon SVG files for now, right?