├── .gitignore ├── Package.swift ├── README.md └── Sources └── ExitButton └── ExitButton.swift /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /.build 3 | /Packages 4 | /*.xcodeproj 5 | xcuserdata/ 6 | -------------------------------------------------------------------------------- /Package.swift: -------------------------------------------------------------------------------- 1 | // swift-tools-version:5.3 2 | // The swift-tools-version declares the minimum version of Swift required to build this package. 3 | 4 | import PackageDescription 5 | 6 | let package = Package( 7 | name: "ExitButton", 8 | platforms: [ 9 | .iOS(.v13) 10 | ], 11 | products: [ 12 | // Products define the executables and libraries a package produces, and make them visible to other packages. 13 | .library( 14 | name: "ExitButton", 15 | targets: ["ExitButton"]), 16 | ], 17 | dependencies: [ 18 | // Dependencies declare other packages that this package depends on. 19 | // .package(url: /* package url */, from: "1.0.0"), 20 | ], 21 | targets: [ 22 | // Targets are the basic building blocks of a package. A target can define a module or a test suite. 23 | // Targets can depend on other targets in this package, and on products in packages this package depends on. 24 | .target( 25 | name: "ExitButton", 26 | dependencies: []), 27 | ] 28 | ) 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

ExitButton 2 | Dark icon 3 | Light icon 4 |

5 | 6 |

7 | 8 | 9 | 10 | Twitter: @joogps 11 | 12 |

13 | 14 | A simple, native SwiftUI exit icon made with SF Symbols, with colors and sizes that exactly match Apple's. 15 | 16 | # 17 | Home app gif Share sheet gif 18 | 19 | _As seen in the Home app and iOS share sheet_ 20 | 21 | ## Installation 22 | 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: 23 | 24 | ```swift 25 | struct ExitButtonView: View { 26 | @Environment(\.colorScheme) var colorScheme 27 | 28 | var body: some View { 29 | ZStack { 30 | Circle() 31 | .fill(Color(white: colorScheme == .dark ? 0.19 : 0.93)) 32 | Image(systemName: "xmark") 33 | .resizable() 34 | .scaledToFit() 35 | .font(Font.body.weight(.bold)) 36 | .scaleEffect(0.416) 37 | .foregroundColor(Color(white: colorScheme == .dark ? 0.62 : 0.51)) 38 | } 39 | } 40 | } 41 | ``` 42 | 43 | ## Usage 44 | Usage is incredibly straight forward. Just import the component and instantiate the view like this: 45 | ```swift 46 | import ExitButton 47 | 48 | ExitButtonView() 49 | ``` 50 | 51 | and frame it like this: 52 | ```swift 53 | ExitButtonView().frame(width: 24, height: 24) 54 | ``` 55 | 56 | 57 | or use it as a button, like this: 58 | ```swift 59 | Button(action: { presentationMode.wrappedValue.dismiss() }) { 60 | ExitButtonView() 61 | }.frame(width: 24, height: 24) 62 | ``` 63 | -------------------------------------------------------------------------------- /Sources/ExitButton/ExitButton.swift: -------------------------------------------------------------------------------- 1 | // 2 | // ExitButton.swift 3 | // 4 | // 5 | // Created by João Gabriel Pozzobon dos Santos on 31/10/20. 6 | // 7 | 8 | import SwiftUI 9 | 10 | struct ExitButtonView: View { 11 | @Environment(\.colorScheme) var colorScheme 12 | 13 | var body: some View { 14 | ZStack { 15 | Circle() 16 | .fill(Color(white: colorScheme == .dark ? 0.19 : 0.93)) 17 | Image(systemName: "xmark") 18 | .resizable() 19 | .scaledToFit() 20 | .font(Font.body.weight(.bold)) 21 | .scaleEffect(0.416) 22 | .foregroundColor(Color(white: colorScheme == .dark ? 0.62 : 0.51)) 23 | } 24 | } 25 | } 26 | 27 | struct ExitButton_Previews: PreviewProvider { 28 | static var previews: some View { 29 | Group { 30 | ExitButtonView() 31 | .previewLayout(.fixed(width: 100.0, height: 100.0)) 32 | .previewDisplayName("Light Mode") 33 | ExitButtonView() 34 | .previewLayout(.fixed(width: 100.0, height: 100.0)) 35 | .previewDisplayName("Dark Mode") 36 | .environment(\.colorScheme, .dark) 37 | } 38 | } 39 | } 40 | --------------------------------------------------------------------------------