search

tablacus / TablacusExplorerIconPacks

Icon packs for Tablacus Explorer
MIT License
1 stars 1 forks source link

Added support for SVG files #10

Open tablacus opened 2 years ago

tablacus commented 2 years ago

Hi @duarteframos

I have added support for SVG files from Tablacus Explorer 22.2.9. For SVG, the same image is OK for both Light themes and Dark themes. I am very grateful if you could make SVG icon packs.

Light themes image

Dark themes image

Add the item "ext" in config.json to ".svg". ("ext": ".svg",)

{
  "info": {
    "name": {
      "en": "Tablacus SVG"
    },
    "descprition": {
      "en": "SVG icons"
    },
    "creator": {
      "en": "Creator name"
    },
    "id": "Tablacus_SVG",
    "ext": ".svg",
    "version": "0.00",
    "pubDate" : "Wed, 09 Feb 2022 00:00:00 GMT",
    "license": "MIT License",
    "URL": "Optional"
  }
}
duarteframos commented 2 years ago

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 commented 2 years ago

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 image

Dark themes image

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 commented 2 years ago

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 commented 2 years ago

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

Thank you,

tablacus commented 2 years ago

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

image

<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>

image

<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 commented 2 years ago

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

image

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 commented 2 years ago

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 commented 2 years ago

CSS styles for assigning colors image

XML attribute image

Neither is a problem

The above image is drawn with PowerToys.

Regards,

tablacus commented 2 years ago

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 image

Light themes image

Thank you,

duarteframos commented 2 years ago

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 commented 2 years ago

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.

SVG_Icons

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 commented 2 years ago

Awesome!

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

Thank you always,

tablacus commented 2 years ago

How about the preview image, like this?

image

Regards,

duarteframos commented 2 years ago

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 commented 2 years ago

Tablacus Explorer 21.2.17 now applies the Misc icon to buttons.

image

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 commented 2 years ago

👌 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 commented 2 years ago

@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 commented 2 years ago

I want to aim for this in the future.

image https://github.com/tablacus/TablacusExplorer/issues/329

Regards,

duarteframos commented 2 years ago

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 commented 2 years ago

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

Regards,

tablacus commented 2 years ago

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

svg {
  stroke: currentColor;
}

https://github.com/tablacus/TablacusExplorer/issues/573

Regards,

duarteframos commented 2 years ago

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?

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. TE_IconsInkscape

tablacus commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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. image

Regards,

duarteframos commented 2 years ago

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

tablacus commented 2 years ago

Yeah, exactly!