Code Monkey home page Code Monkey logo

tablacusexplorericonpacks's Introduction

Tablacus Explorer Icon Packs

Icon packs for Tablacus Explorer

New

Added support for SVG files from Tablacus Explorer 22.2.9.

Structure

Folders and files

┣ config.json
┣ preview.png (Optional)
┃
┣ general (Optional)
┃ ┣ 0.png (0.svg)
┃ ┣ 1.png (1.svg)
┃ ┣    :
┃
┣ browser (Optional)
┃ ┣ 0.png (0.svg)
┃ ┣ 2.png (2.svg)
┃ ┣    :
┃
┣ shell32 (Optional)
┃ ┣ 0.png (0.svg)
┃ ┣ 11.png (11.svg)
┃ ┣    :
┃
…………………

config.json

{
  "info": {
    "name": {
      "en": "Flat icons"
    },
    "descprition": {
      "en": "Flat icons set"
    },
    "creator": {
      "en": "Gaku"
    },
    "id": "Flat_icons",
    "ext": ".png",
    "version": "1.00",
    "pubDate" : "Thu, 17 Sep 2020 00:00:00 GMT",
    "license": "MIT License",
    "URL": "http://tablacus.github.io/TablacusExplorerAddons/"
  },
  "icons": {
    "general": {
      "size": 48,
      "max": 20
    },
    "browser": {
      "size": 48,
      "max": 10
    },
    "shell32": {
      "size": 48,
      "max": 30
    }
  }
}
  • ext is the extension of the icon file (Default: .png)
  • URL: is optional.
  • icons: is optional.
  • size: is the size of the icon in pixels (Optional)
  • max: is the number of the last icon (Optional)

General icons

image

icon:general,4general\4.png / general\4.svg

bitmap:ieframe.dll,216,16,4general\4.png / general\4.svg

bitmap:ieframe.dll,214,24,4general\4.png / general\4.svg

Browser icons

image

icon:browser,18browser\18.png / browser\18.svg

bitmap:ieframe.dll,206,16,18browser\18.png / browser\18.svg

bitmap:ieframe.dll,204,24,18browser\18.png / browser\18.svg

shell32 icons

image

icon:shell32.dll,12shell32\12.png / shell32\12.svg

You only need to prepare the icons you want to replace.

The default icon will be used for the missing parts.

The PNG icon size should be around 48px to 96px, but you can set it to any number in config.json.

The preview.png will appear on the download list page to help the user choose an icon set.

User Interface

Downloading icon packs can be done from inside the Tablacus UI like addons

image

It will have a separate download page in gallery format with previews

image

Vector Icons

Tablacus supports SVG based vector icons. Vector graphics scale well to larger sizes. Because they are defined as shapes composed of points, lines, curves, fills and strokes, they never pixelate when enlarged. Since vector icons are based on discrete elements rather than images, they are not static and may be styled to match the current theme as required.

While defining SVG icons for Tablacus you can use both styles and XML attributes to style your SVG elements. Any explicitly defined fill or stroke color will be respected. Themable elements that should change color according to Tablacus to match the current theme should use the variable currentColor.

In this example the first circle fill color is defined as red and is respected by Tablacus regardless of current theme; on the second circle the stroke is defined as currentColor so it will dynamically use Tablacus text color to correctly match light or dark themes and always be visible regardless of background.

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

Defining appearance as styles is also supported and taken into account for theming as well

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

tablacusexplorericonpacks's People

Contributors

duarteframos avatar tablacus avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Forkers

duarteframos

tablacusexplorericonpacks's Issues

Tablacus Light Icon Pack

Hey @tablacus so I started working on the first stub of what I hope will become the future default theme.

Default icon pack for light colors.
Preview

Icons can be easily colored differently for different UI themes, like a dark colored/night mode.
PreviewA
PreviewB
PreviewC
PreviewD

  • Graphics are always pixel aligned at a 16 pixel grid so they still look sharp at small sizes.
  • All icons are made from source vector files made in Inkscape, with source SVG file uploaded and available for further editing.
  • PNG raster files are native 64x64 pixels, suitable for Hi-DPI screens.

I though about the preview images further and didn't consider including a screenshot of the window before.
There are 640 x 400 pixels, and seem adequate, what do you think?

It doesn't include all icons from the Microsoft libraries, some I don't think are ever used in TE, others I couldn't figure out what they meant. There are the ones I designed, some (like Toggle Tree and New Tab)were adapted for TE specific use, if more are needed let me know.

Tablacus_Light

The old thread can be closed I think, discussion may continue here on a per icon pack or issue basis.

Let me know what you think and what needs changes.

Added support for SVG files

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.