Ховер эффекты для лайков, дизлайков и реплаев в комментариях

[kulbergArt]

Задача: Нужно сделать ховер эффект для иконок лайков, дизлайков и реплаев в комментариях.

Механизм тот же, что мы делали для иконок лайков, комментариев и избранного в постах.

Дизайн: Artem Figma

Иконки:

[kulbergArt]

У иконок лайка и дизлайка, при ховере и в активном состоянии серый цвет обводки надо убирать, либо менять на прозрачный, либо красить на белый.

Как в дизайне)

[BDemetrix]

@kulbergArt не получается красиво 1) если делать обводку прозрачной, пропадает полоска (белая полоска манжета)

2) если делать обводку цвета фона, иконка становится меньше и некрасивой

Для решения надо переделать иконки и добавить в них еще один <path> для манжета, заливка которого должна быть исключительно stroke

[kulbergArt]

[kulbergArt]

Я исправил все три иконки, загрузил выше.

[BDemetrix]

@kulbergArt Проще сделать, чем объяснить) Надо было добавить вот такую полоску

Надо было сделать так:

<path d="M15 1H15.0265H19.0333V11.0007H15.0265L9.15644 17.3511C8.77579 17.7611 8.21483 18.0011 7.63385 18.0011C6.47186 18.0011 5.63042 16.971 5.95097 15.941L7.47357 11.0007H3.23633C1.82392 11.0007 0.772121 9.85058 1.04258 8.6105L2.38488 2.61011C2.59524 1.67004 3.50679 1 4.57863 1H14.0248H15Z"/>

<path d="M15.0265 11.0007L9.15644 17.3511C8.77579 17.7611 8.21483 18.0011 7.63385 18.0011C6.47186 18.0011 5.63042 16.971 5.95097 15.941L7.47357 11.0007H3.23633C1.82392 11.0007 0.772121 9.85058 1.04258 8.6105L2.38488 2.61011C2.59524 1.67004 3.50679 1 4.57863 1H14.0248H15.0265H19.0333V11.0007H15.0265ZM15.0265 11.0007L15 1" stroke="currentColor"/>

<path d="M15 1V12.4377" stroke-width="1.5" stroke-linecap="square"/>

[kulbergArt]

Хмммм Окей)