SwiftUI Academy · Урок

Использование SF Symbols

Отображайте масштабируемые системные значки с помощью systemName.

Урок 4 из 413 шагов

«Использование SF Symbols» — бесплатный урок SwiftUI Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения SwiftUI Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс SwiftUI Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Apple Icons for Free

SF Symbols is Apple library of thousands of crisp, scalable icons that match the system font. They are free and built right in. ⭐

Showing a Symbol

Display one with Image and the systemName parameter. The name comes from the SF Symbols app, like star or heart.

Image(systemName: "star")

Filled Variants

Many symbols offer a filled version. Just add .fill to the name to get a solid icon instead of an outline.

Image(systemName: "star.fill")

Symbols Are Text-Like

Because SF Symbols align to the font, you size them with font and the same text styles you already know.

Image(systemName: "bell")
    .font(.title)

Coloring Symbols

Tint a symbol with foregroundStyle, exactly like text. This makes stars yellow or hearts red in one line.

Image(systemName: "heart.fill")
    .foregroundStyle(.red)

Scaling with imageScale

The imageScale modifier nudges a symbol to small, medium, or large relative to its surrounding text.

Image(systemName: "gear")
    .imageScale(.large)

Symbols Inside Text

You can drop a symbol inside a Text view, so an icon and a word flow together as one styled label.

Text("\(Image(systemName: "bolt")) Fast")

Labels Pair Icon and Title

The Label view bundles a symbol with text, giving you a tidy icon-plus-title combo used all over iOS.

Label("Favorites", systemImage: "star")

Multicolor and Hierarchical

Use symbolRenderingMode for richer looks. Hierarchical adds depth, while multicolor uses the symbol built-in colors.

Image(systemName: "cloud.sun.fill")
    .symbolRenderingMode(.multicolor)

Symbols in Buttons

Symbols shine inside buttons and toolbars, giving clear, compact actions like share, add, or delete.

Button(action: share) {
    Image(systemName: "square.and.arrow.up")
}

Find the Right Name

Download the free SF Symbols app from Apple to browse and copy exact names. Guessing names often fails silently.

Quick Check

How do you display an SF Symbol in SwiftUI?

Ответь в интерактивном уроке

Lesson Recap

You added SF Symbols with systemName, styled them like text, and paired them with titles using Label. Crisp icons everywhere. 🚀

Можно начать бесплатно

Изучай Swift с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 30
Уроки: 120

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Использование SF Symbols» бесплатный?

Да — полный текст урока «Использование SF Symbols» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс SwiftUI Academy, подпишись на CoddyKit PRO. Курс SwiftUI Academy содержит 4 уроков всего.

Чему я научусь в уроке «Использование SF Symbols»?

Отображайте масштабируемые системные значки с помощью systemName. Ты практикуешь SwiftUI Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать SwiftUI Academy?

Предыдущий опыт не требуется. SwiftUI Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Использование SF Symbols»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке SwiftUI Academy?

Да. Каждый урок SwiftUI Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к SwiftUI Academy