DEV Community

Roby Cigar
Roby Cigar

Posted on

How to Import Component in SwiftUI

In SwiftUI, components are created using views, and you can import them into your project by creating a new SwiftUI file and defining your view there. Here's an example of how to create a custom component and import it into your project:

Open Xcode and create a new SwiftUI file by selecting File > New > File... from the menu bar.
Select SwiftUI View as the template and click Next.
Enter a name for your view, such as MyComponent, and click Create.
Define your view in the body property of the struct. For example:
swift

struct MyComponent: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
            Image(systemName: "star.fill")
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Save the file and import it into your project by adding the following code to your SwiftUI view:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MyComponent()
            Text("This is my main view")
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

In this example, the MyComponent view is imported into the ContentView view using the name of the file and the name of the struct that defines the view. The MyComponent view can be used like any other SwiftUI view in the body property of the ContentView view.

You can define as many custom components as you need in separate files and import them into your project as needed. This allows you to modularize your code and reuse components across different views and projects.

Top comments (0)