[feature request] A wechat icon (or actually, an icon tutorial?)

[jiekun]

Hi.

I'm using hermit previously and found hermit-v2 last weekend. Thank you @1bl4z3r for releasing this, and there are a lot of new exciting features.

There are a lot of social icon available, but it's always not enough, as people in different area / country may use different social media. I customized a WeChat icon in my hermit blog. Since hermit-v2 imports "share" feature, it's not working well in main page and share button (at the same time).

So I would like to know how a suitable social icon could be created, and what's the guideline I should follow with, so that we don't have to do "feature request" but just submit a pull request to add support for hermit-v2.

Here I have some svg examples of WeChat. (codes here and here ). I would like to ask what size (height & weight) / color / etc... should I use

[1bl4z3r]

Hi @jiekun,

A lot of head-scratching later, I got you a icon.

<svg width="24" height="24" class="feather" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M10 3c4.071 0 7.7 2.67 7.982 6.368 2.304.862 4.018 2.81 4.018 5.26 0 1.867-1.026 3.472-2.52 4.493a2.28 2.28 0 0 0-.022.439l.014.44a1 1 0 0 1-1 1c-.758 0-1.46-.247-2.054-.71a7.84 7.84 0 0 1-1.105.078c-2.767 0-5.322-1.491-6.284-3.751a9.231 9.231 0 0 1-.454-.058c-.716.567-1.54.885-2.464.885a1 1 0 0 1-1-1l.005-.203.018-.41a2.1 2.1 0 0 0-.058-.608C3.248 14.004 2 12.073 2 9.833 2 5.896 5.76 3 10 3Zm5.313 7.889c-2.768 0-4.688 1.837-4.688 3.74 0 1.902 1.92 3.74 4.688 3.74a5.8 5.8 0 0 0 1.078-.101c.434-.082.819.1 1.15.36.099-.433.324-.842.706-1.088C19.363 16.82 20 15.753 20 14.629c0-1.903-1.92-3.74-4.688-3.74ZM10 5C6.508 5 4 7.327 4 9.833c0 1.477.837 2.858 2.264 3.777.531.343.76.957.83 1.559l.482-.342c.308-.208.63-.366 1.05-.288.056-3.287 3.203-5.65 6.687-5.65.192 0 .383.007.573.021C15.361 6.784 13.059 5 10 5Zm3.62 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM17 13a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM8 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z" fill="currentColor"/></svg>

You can use above in your blog to see how it feels and then send a PR.

Now, to describe what's happening.

Hermit blog by itself uses Feather icons, and follows feather style throughout. The feather icons uses 24×24 px icon, with a viewbox of 24×24 and color is currentColor. Thus, using anything apart from feather icons looks way out of place from the rest. This is compounded by the fact that feather icons decided not to support any brand's icons. Though there is a related project where brand's icons are supported, but WeChat isn't there, hence the aforementioned head-scratching.

Also, you might see that WeChat icon looks smaller than rest. This is due to the fact that WeChat's icon is more wide than its length, which is causing it to go beyond its 24px viewbox; or I'm a total illiterate when it comes to design. Here's how the icon looks on various pages:

HomePage

Bottom-bar

Share popup

[jiekun]

Thank you so much @1bl4z3r . So it's well explained now. I am going to follow your instruction and perfect the 24x24 "wechat" icon.

I also notice that you mentioned https://feathericons.com/ , which provided some "chat" icon. I would like to use it for now before a perfect "wechat" icon is available.

https://feathericons.com/?query=chat

[jiekun]

I'm still testing the wechat icon so it will take some time to open a new PR.

[1bl4z3r]

Sure, no pressure. You can send out a PR when you feel that you are happy with the icon.

Repo will be here, I will be too and Earth would still exist (probably) 🤣😅