Added duetone icon

[Avaray]

Icon is designed to be used on websites. It's TailwindCSS friendly. It's duotone.
I created it because currently, there is no icon that can be used well with TailwindCSS.
The differences between the official Logo and this icon are small, as I didn't want to interfere too much.
Hope this will be useful. I'm waiting for your feedback and thoughts.

In example below I applied some kind of green color.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (f953ae6) to head (24208d6).

Additional details and impacted files

@@            Coverage Diff            @@
##                v3      #469   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            1         1           
  Lines            1         1           
=========================================
  Hits             1         1           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[molefrog]

Hi, thank you! Could you prettify or send an uncompressed svg here so I can take a look at the source pls? ☺️

[Avaray]

Hi, thank you! Could you prettify or send an uncompressed svg here so I can take a look at the source pls? ☺️

This one in unoptimized (I dont know if GitHub optimizes it).

[Avaray]

Hmmmm... Now I think It could be done better. I see that empty space between "nails" and "skin" when image is in big scale.

[molefrog]

It's TailwindCSS friendly

I have limited experience with Tailwind, sorry, could you clarify this?

[Avaray]

I have limited experience with Tailwind, sorry, could you clarify this?

In short: it's a very popular library to stylize your websites. I would say it's the most popular library (looking at React world).

When you want to place someone's logo on a website, it's good for it to be scalable (here I'm thinking about the SVG format), and to be able to do something more with it (such as applying a color with CSS).
If the SVG has predetermined colors with zero opacity, overwriting it with CSS style will cause it to be entirely in one color.
Web developers using React typically use icon libraries such as Iconify, while other libraries like TailwindCSS allow them styling icons easily.

Let's say you don't want to apply color. Let's take current logo.svg and put it on website with dark theme. It will be almost invisible, because logo is mostly black. The only option will be to add bright background under logo to keep contrast and make it visible.

The icon I added provides more possibilities.

[Avaray]

Thanks for adding it. I wish to make this icon better in the future (when I return to playing with vector graphics again).