В макете есть список меню, напротив каждого пункта меню есть иконка.
Первая, вторая, третья иконки сложные, поэтому они вставляются при помощи svg - это понятно.
Но вот четвертая иконка - это просто круг.
1.Возникает вопрос, вставить ее как и остальные при помощи svg, типа чтобы стиль верстки пунктов меню был одинаковым или все же этот пункт меню, где есть простая фигура круг нужно реализовать при помощи css-псевдоэлемента?
2. Также смежный вопрос. Есть еще одна простая кликабельная иконка. Тут тоже не совсем понятно, реализовать ее при помощи пустого дива и отрисовать css или все-таки вставить как svg?
В данной ситуации я бы лучше использовал svg. Так как твое меню состоит из svg иконок, то лучше делать в одинаковой стилистике. Лучше будет по читабельности и понятней по логике, например для другого прогера
2. Если данная иконка легкая, то почему бы и нет. Используйте css и div. Но если вы понимаете, что в будущем могут возникнуть изменения, и эти изменения будет не так легко исправить или муторно, то лучше svg.
Тут надо смотреть какую цель преследует данная иконка, будет ли анимация или hover эффекты, как проще реализовать
если кто-то вдруг захочет покрасить все иконки через код, ему придется дергать fill у svg, плюсом ещё нужно будет искать этот after, before, потом тянуться к нему и синхронизировать изменение цветов. ничего с сайтом не случится, если ты вставишь svg, а не befor, а вот потом проблем станет в разы меньше.
Sector567, вставляй svg, не парься. единственные минус - немного засоряется верстка, но это не критично.
к тому же потом если будет система управления - можно будет прикрутить смену картинок без проблем, чего не скажешь о before, after. Тот же wordpress - вряд ли доберется до них