SwiftUI Academy · Lekcja

Używanie SF Symbols

Proszę renderować skalowalne ikony systemowe za pomocą systemName.

Używanie SF Symbols to bezpłatna lekcja SwiftUI Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej SwiftUI Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs SwiftUI Academy zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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. 🚀

Często zadawane pytania

Czy lekcja „Używanie SF Symbols” jest bezpłatna?

Tak — pełny tekst „Używanie SF Symbols” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu SwiftUI Academy, przejdź na CoddyKit PRO. Kurs SwiftUI Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Używanie SF Symbols”?

Proszę renderować skalowalne ikony systemowe za pomocą systemName. Ćwiczysz SwiftUI Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć SwiftUI Academy?

Nie wymagamy żadnego doświadczenia. SwiftUI Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Używanie SF Symbols”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji SwiftUI Academy?

Tak. Każda lekcja SwiftUI Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do SwiftUI Academy