improvement: replace svg classes with inline css

[rawdanowicz]

Hello,
according to my issue I've closed the scope of all icons that were using classes.

With this PR there should be no more conflicts beetween icons in case of using more of them in a single project. Each icon is styled directly with fill attribute and if required (for example with gradients) a unique id.

I hope it's gonna be helpful.

[Thomas-Boi]

The files still retain their original color and shape from the changes. I have only check a small percentage but overall everything seems fine.

[Thomas-Boi]

Hey @rawdanowiczdev,

Thank you very much for your work! That seems to be a lot of files to get through so props to your dedication. We will double check your work and accept your PR after more checking.

Out of curiosity, how did you convert the classes to fills? I'm thinking that we might have to look out for this issue in the future and if you have a script that can fix files with these issues, it'd be great if we can use it.

[rawdanowicz]

Hey @Thomas-Boi,
thanks for fast reply. I did it manually, even though it might seem like a lot of work in fact it wasn't.

• First in Visual Studio Code I searched for class keyword in the /icons folder.
• Then I did manually go through every icon that were using a CSS class.
• And finally marking with CTRL + D each class="cls-1" (and so on) and just simply replacing with fill="#color" according to each class.

I believe it would be a good decision to make it mandatory not to use CSS classes for the future icons to avoid any new conflicts.

[amacado]

Thanks for your time @rawdanowiczdev! We will need some time to double check all modifications, and make sure everything looks as expected. I would suggest to setup a small github action which will check that future pull requests will pass our requirements of having inline attributes instead of classes for the svg's (we should also add this requirement to our contribution guidelines). A action which auto-corrects those pull requests is optional in my opinion.

I will create a new issue for this request: #407.

[Thomas-Boi]

Hey @amacado ,

I'll double check the svg files for us both so we don't repeat each other's work. I've already went through 26 of them so it shouldn't take too long.

[Thomas-Boi]

I have checked all of the files and most of them are great. However, there are two files that were changed by the replacement process. They are:

-electron-original.svg

ceylon-original-wordmark.svg

Besides these two svgs, everything else looks great. We'll accept your PR once these files are updated 😄

[rawdanowicz]

@Thomas-Boi that's right, I should have seen that! But it's already good to go with my last commit.

[amacado]

I went trough all icons and it looks fine, except this one:

[amacado]

Thanks for fixing haskell. For me I'm fine with all changes, waiting for @Thomas-Boi to approve as well :)

[rawdanowicz]

Nice to hear that! I hope everything's good to go now.

[Thomas-Boi]

Good job @rawdanowiczdev 👍

Everything looks good now. Props to @amacado for spotting Haskell, I didn't notice the color change.

I'll approve and merge this commit.