├── .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 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
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 |
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 |
--------------------------------------------------------------------------------