Can you help me add Zig icon ?

lapin00b commented 2 years ago

Hello,

I am trying to add an icon for Zig files for which syntax highlighting is already provided and I guess I am missing something...

Taking inspiration from here and there, I followed these steps:

clone the AFileIcon repository (not sure whether I should clone it in my Sublime Text Packages folder or anywhere else)
add an svg image named file_type_zig.svg to the icons/svg/ folder

add the following entry in icons/icons.json (at the end of the file)

"file_type_zig": {
    "color": "orange",
    "syntaxes": [
        {
            "name": "Zig",
            "scope": "source.zig"
        }
    ]
}

open a shell in AFileIcon directory
create a virtual environment, install cairosvg and pypng, then run python build -i -p

edit PACKAGES.md to insert the following (again at the end of the file)

## Zig

- [Zig Syntax Highlight](https://packagecontrol.io/packages/Zig%20Language)

run A File Icon: Revert to Freshly installed state from ST command palette

Issues encountered:

after step 4, I get 6 png files generated: 3 in icons/multi/ folder and 3 in icons/single/ folder. However, the 3 images in the icons/single/ folder are still orange, not white. Is it intended ? Did I miss some configuration in a file ?
after step 6, nothing seems to have changed, i.e. I do not see the zig icon attached to zig files. Any idea or explanation on what I did wrong ?

I would really appreciate any directions on how I can help you adding some icons instead of just asking you to do all the work. This way, I could PR properly for some other icons when required.

Thanks in advance

deathaxe commented 2 years ago

The steps you described are exactly correct.

icons.json

I'd suggest to add an extensions: [] key to icons.json so A File Icon can create a dummy syntax for those which don't have the real Zig Package installed.

"file_type_zig": {
    "color": "orange",
    "syntaxes": [
        {
            "extensions": [
                "zig"
            ],
            "name": "Zig",
            "scope": "source.zig"
        }
    ]
}

Test files

Adding an empty file_type_zig.zig test file in the tests folder might be a good idea. So it's easy to see whether an icon is assigned or not .

svg2png

When creating "multi" icons, the svg2png converter looks for fill="#000" and replaces it by the color from incons.json. All other colors keep untouched.

For mono icons all fill="..." attributes are replaced by fill="#fff".

Most SVG editors (as well as Inkscape) use style attributes to tint icons these days. Those are not recognized which results in mono icons staying colored. If needed I use Inkscape to simplify the SVGs by removing any explicit transformations, groups and convert everything to simple paths. The resulting SVG often needs manual simplification via text editor to remove any unnecessary meta data etc.

Apply new icons

Step 6 deletes the zzz A File Icons zzz folder and rebuilds it. It therefore should contain the new icon afterwards. Does it just display a default icon or is the icon missing at all?

ST can disply RGB32 png's only. Not sure if a svg file can ask the converter to convert it to palette or mono/grayscale.

Otherwise I already saw conflicting tmPreferences files to prevent icons from being displayed at all. It happens if two files of different name target the same scope. Shouldn't be the case here though.

lapin00b commented 2 years ago

Thank you for the quick reply !

I took the time to:

add the "extensions" key in icons.json
add a test file in the tests folder
rework the svg file (that took some time)

And now, it seems to work \o/ ... at least on my machine :)

Would you be kind enough to explain me the steps to propose my changes for approval ?
I tried to fork the repository on my account, cloning it and re-apply my changes, but could not since there where no icons/svg folder, nor icons.json file...
Should I create a new branch or try to commit in the develop branch ?
Sorry to bother you with newbie question, this is my first time trying to participate.

deathaxe commented 2 years ago

Forking this repo and cloning the fork to your local machine is very correct and should result in a local working directory with exactly the same content as you see it here on GitHub.

It's good practice to create a "feature branch" which contains the commit(s) with the proposed changes. This enables you to create multiple independend proposals at a time each in a different branch. May be not so important in this case though.

So you'd ...

create a new local feature branch from latest commit in develop branch.
add your changed files to the working directory
commit the changes
push the branch to your fork
navigate to this repo's "Pull Requests"
Github should suggest you to create a pull request for the recently pushed branch automatically.
just create a PR into this repo's "develop" branch.

lapin00b commented 2 years ago

Thank you very much for taking the time to educate me, it is highly appreciated. I reworked the svg image to correspond to what is described in the CONTRIBUTING.md. Note that the applytransforms inskscape extensions was helpfull.

I created a pull request hoping it will integrate your work.

deathaxe commented 2 years ago

Thank's for the tip about applytransforms.

SublimeText / AFileIcon