Awesome

<h1> ExitButton <img align="right" alt="Dark icon" src="../assets/dark-mode-small.png" width=60px> <img align="right" alt="Light icon" src="../assets/light-mode-small.png" width=60px> </h1> <p> <img src="https://img.shields.io/badge/iOS-13.0+-blue.svg" /> <img src="https://img.shields.io/badge/-SwiftUI-red.svg" /> <a href="https://twitter.com/joogps"> <img src="https://img.shields.io/badge/Contact-@joogps-lightgrey.svg?style=social&logo=twitter" alt="Twitter: @joogps" /> </a> </p>

A simple, native SwiftUI exit icon made with SF Symbols, with colors and sizes that exactly match Apple's.

As seen in the Home app and iOS share sheet

Installation

This repository is a Swift package, so you can just include it in your app through the Swift Package Manager. Alternatively, you can just copy the custom view to your project and it will work just as fine:

struct ExitButtonView: View {
    @Environment(\.colorScheme) var colorScheme
    
    var body: some View {
        ZStack {
            Circle()
                .fill(Color(white: colorScheme == .dark ? 0.19 : 0.93))
            Image(systemName: "xmark")
                .resizable()
                .scaledToFit()
                .font(Font.body.weight(.bold))
                .scaleEffect(0.416)
                .foregroundColor(Color(white: colorScheme == .dark ? 0.62 : 0.51))
        }
    }
}

Usage

Usage is incredibly straight forward. Just import the component and instantiate the view like this:

import ExitButton

ExitButtonView()

and frame it like this:

ExitButtonView().frame(width: 24, height: 24)

or use it as a button, like this:

Button(action: { presentationMode.wrappedValue.dismiss() }) {
  ExitButtonView()
}.frame(width: 24, height: 24)