Во фрейме компонента, кроме иконки ничего не должно быть. Не забывайте удалять все скрытые слои из фрейма с иконкой.
Например, Material Design иконки имеют белый фоновый слой.
В итоге компонент иконки должен содержать только один слой (слой с иконкой). Но могут быть и исключения, например, двухцветные иконки.
В случае с одноцветной иконкой — все элементы должны быть объединены в один слой.
После того, как вы объединили слои, не забывайте применять “Outline Storke” к объединенной фигуре.
Все это нужно для того, чтобы иконки меньше весили, SVG код был гораздо меньше и понятней, а у разработчиков не возникли проблемы с перекрашиванием иконок.
Так выглядит SVG код иконки когда компонент иконки имеет несколько слоев и они не объединены в один. Код получился очень длинным и имеет целых 7 параметров “Fill” для разных элементов иконки.
Так делать нельзя.
А так выглядит SVG код иконки когда все слои объединены. Код гораздо меньше и имеет всего 2 параметра “Fill”. Один для фона контейнера, другой для цвета иконки.
Так делать можно.
После экспорта иконки вы можете ее дополнительно сжать используя этот сайт.
После сжатия код иконки стал еще меньше, но внешний вид иконки не изменился.
Загрузка...
