# Image

* Lokal görsel isimleri
* Sistem ikon isimleri
* ve UIImage

gibi parametreler ile `Image` oluşturabiliriz.

#### 1) **Lokal'de bulunan görseli görüntüleme**

Rastgele bir görseli projeye yükleyin (`Assets` klasörüne sürükleyip bırakabilirsiniz.)

```swift

Image("swift")     // Görsel ismi.
    .resizable()   // Görselin boyutlarına müdahale edebilmek için gerekli.
    .scaledToFit() // AspectRatio oranı korunur.
    .frame(width: 130) 
    // Sistem görüntünün en-boy oranını bildiği için, (.scaledToFit() kullanınca)
    // Yükseklik otomatik olarak hesaplanır.
```

![](https://1761232408-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5Upqg27mOVmaED1CFL%2F-M69AkOTwEF6VfzR1wlf%2F-M69KvUGN-MPEeWC4p6i%2FScreen%20Shot%202020-04-30%20at%2012.07.52.png?alt=media\&token=87698d0f-3229-4ae2-92ee-1179d4b80fa8)

```swift
Image("swift")
    .resizable()
    // Görselin rengini değişebilmek için,
    // rendering mode düzenlemeliyiz. (sistem ikonları için gerekmiyor)
    .renderingMode(.template)
    .foregroundColor(.orange)
    // Artık istediğimiz renge boyayabiliriz.
    .scaledToFit()
    .frame(width: 130)
```

![template rendering mode](https://1761232408-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5Upqg27mOVmaED1CFL%2F-M69AkOTwEF6VfzR1wlf%2F-M69MZaF208uwLNAmGAG%2FScreen%20Shot%202020-04-30%20at%2012.15.04.png?alt=media\&token=8a708bde-e00b-448d-8506-009d8f5e11e9)

{% hint style="info" %}
Görselin boyutlarına müdahale etmeden önce _**resizable()**_ metodunu çağırmalıyız.
{% endhint %}

#### 2) Sistem ikonlarını görüntüleme

```swift
Image(systemName: "star.fill")
    .resizable()
    .frame(width: 100, height: 100)
    .foregroundColor(.orange)
    .padding()
    .background(Color.green)
    .clipShape(Circle())
    
// 1. kısımda gerçekleştirdiğimiz işlemler burada da uygulanabilir.
// Hatta sistem ikonları için renderingMode düzenlemesi yapmadan da
// renk düzenlemesi yapabiliriz.
```

{% hint style="success" %}
Sistem ikonları vektörel olduğu için boyuttan bağımsız olarak, çözünürlük endişesi duymadan büyütebiliriz.
{% endhint %}

![sf system icon](https://1761232408-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5Upqg27mOVmaED1CFL%2F-M69PWeMisD4_QlsO9EB%2F-M69R0RE75Av1HbJiIh3%2FScreen%20Shot%202020-04-30%20at%2012.34.31.png?alt=media\&token=0056347d-17fb-42d8-a041-f3a478c911b8)

Kullanabileceğimiz SF Sembollerini görüntüleyebileceğimiz masa üstü uygulamasını [bu link](https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/)ten indirebilirsiniz.

![SF Symbols](https://1761232408-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5Upqg27mOVmaED1CFL%2F-M69AkOTwEF6VfzR1wlf%2F-M69PJLcqdaVesu0TXdN%2FScreen%20Shot%202020-04-30%20at%2012.25.25.png?alt=media\&token=f2ce83c2-fdd4-4a62-95b0-f7054c6ad3fd)

**TODO: antialiased, interpolation..**
