Что такое SF Symbols

Разработка мобильных приложений для iOS требует не только качественного кода, но и продуманного пользовательского интерфейса. Apple предлагает мощные инструменты для создания удобного и стильного UI, одним из которых является SF Symbols — библиотека стандартных иконок, идеально сочетающихся с системой и ее шрифтом San Francisco. В этой статье мы подробно разберем, что такое SF Symbols, как их использовать и какие преимущества они дают разработчикам.

Что такое SF Symbols

SF Symbols — это коллекция пиктограмм, разработанных Apple для интеграции в приложения на iOS, iPadOS, macOS, tvOS и watchOS. Эти символы специально созданы в одном стиле со шрифтом San Francisco, благодаря чему обеспечивается единообразие дизайна во всей системе. Apple регулярно обновляет библиотеку, добавляя новые иконки с каждым релизом iOS.

Основные особенности:

1. Большая библиотека – более 4000 иконок в различных категориях.
2. Адаптивность – поддержка динамических размеров и вариативности толщины линий.
3. Поддержка разных стилей – Regular, Bold, Thin, Light, Heavy и другие.
4. Настраиваемость – возможность изменения цвета, анимации и комбинирования с текстом.
5. Интеграция с UIKit и SwiftUI – удобное использование в коде.

Как использовать SF Symbols в проекте

1. Установка и просмотр

Для удобного поиска и работы с иконками Apple предоставляет бесплатное приложение. Скачать его можно с официального сайта Apple для macOS. В нем можно искать символы, просматривать их характеристики и копировать названия для использования в коде.

2. Использование в SwiftUI

В SwiftUI иконки SF Symbols можно добавлять с помощью компонента Image:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "star.fill")
                .font(.system(size: 50))
                .foregroundColor(.yellow)
            Text("Любимый элемент")
        }
    }
}

3. Использование в UIKit

В UIKit иконки так же можно использовать через UIImage:

let imageView = UIImageView(image: UIImage(systemName: "heart.fill"))
imageView.tintColor = .red

4. Настройка стилей

SF Symbols поддерживают различные толщины линий. Вы можете выбрать нужный стиль с помощью .font(.title.weight(.bold)) в SwiftUI или указав соответствующий UIFont.Weight в UIKit.

Image(systemName: "pencil")
    .font(.system(size: 40, weight: .bold))

Преимущества использования SF Symbols

1. Единый стиль – иконки соответствуют дизайну iOS и не выглядят инородно.
2. Гибкость – легко изменять размер, цвет и толщину линий.
3. Оптимизированность – не требуют дополнительных ресурсов и идеально масштабируются.
4. Поддержка динамических размеров – автоматически адаптируются к настройкам доступности.
5. Обратная совместимость – можно проверять доступность символов в конкретной версии iOS.

Ограничения

Несмотря на удобство, SF Symbols имеют и ограничения:

• Они работают только в экосистеме Apple.
• Нельзя менять форму символов – только цвет и толщину.
• Некоторые символы доступны только в новых версиях iOS, что требует проверки совместимости.

Как можно использовать SF Symbols

Есть несколько ограничений и правил от Apple, которые нужно учитывать.

Когда можно использовать 

1. Внутри приложения – можно свободно использовать в навигационных элементах, кнопках, тулбарах и других UI-элементах.
2. Для адаптации под дизайн – можно изменять цвет, толщину линий и размер символов.
3. В комбинации с текстом – например, использовать вместе с заголовками и подписями.

Когда нельзя использовать 

1. В качестве логотипа приложения – нельзя использовать символы в иконке самого приложения (App Icon).
2. Для брендинга – запрещено использовать символы для создания уникального фирменного стиля, логотипов и товарных знаков.
3. В рекламных материалах – Apple не разрешает применять свои иконки в маркетинговых и рекламных целях.

Вывод

SF Symbols – это мощный инструмент для iOS-разработчиков, позволяющий создавать удобный и современный пользовательский интерфейс с минимальными затратами на дизайн иконок. Они облегчают работу, делают приложения более нативными и поддерживают адаптивность. Использование таких иконок – лучший способ сохранить стиль iOS и повысить удобство работы с UI. Если вы разрабатываете приложение для экосистемы Apple, обязательно включите SF Symbols в свой проект!

Дополнительно

• Официальный сайт
• Примеры анимации SF-символов в SwiftUI
• What’s New in SF Symbols 6 — WWDC24