SwiftUI Academy · レッスン

SF Symbols の使用

systemName を使って拡大縮小可能なシステムアイコンを表示します。

「SF Symbols の使用」はCoddyKit上の無料SwiftUI Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これは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. 🚀

よくある質問

「SF Symbols の使用」レッスンは無料ですか？

はい。「SF Symbols の使用」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。

「SF Symbols の使用」で何を学びますか？

systemName を使って拡大縮小可能なシステムアイコンを表示します。ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

SwiftUI Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「SF Symbols の使用」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSwiftUI Academyレッスンでコードを書いて実行できますか？

はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← SwiftUI Academyに戻る