title: add two images and one Label in TabBar, SwiftUI
body: <p>I have to implement a custom tabbar. I have attached the UI of required TabBar.</p>
  <p><a href="https://i.stack.imgur.com/UKBD8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UKBD8.png" alt="TabBar Image" /></a></p>
  <p>I need to add two image inside the each TabBar Item. First one is above the text and second one is at bottom of text. I have tried 3 different method but each time TabBar is showing the same result.</p>
  <pre><code> // method one not working
          HideNavbarOf(view: HomeView())
              .tabItem {
                  
                  ZStack {
                      
                      Image(ImageName.diamondFill.rawValue)
                          .resizable()
                          .scaledToFit()
                          .frame(width: 25)
                      
                      Text(&quot;Subscription&quot;)
                          .font(.custom(Popins.regular.rawValue, size: 11))
                          .foregroundColor(.white)
                      
                      Image(ImageName.tapSelected.rawValue)
                          .resizable()
                          .scaledToFit()
                          .frame(width: 25)
                          
                  }
                  
                  
              }
              .tag(0)
          // method two not working
          HideNavbarOf(view: Text(&quot;AskQuestion&quot;))
          
              .tabItem {
                  
                  ZStack {
                      Label {
                          Text(&quot;Shop&quot;)
                              .font(.custom(Popins.regular.rawValue, size: 11))
                              .foregroundColor(.white)
                      } icon: {
                              Image(ImageName.storeLine.rawValue)
                                  .resizable()
                                  .scaledToFit()
                                  .frame(width: 10, height: 10)
                              
                      }
                      
                      Image(ImageName.tapSelected.rawValue)
                          .resizable()
                          .scaledToFit()
                          .frame(width: 10, height: 10)
                  }
                  
                  
              }
              .tag(1)
          // method three not working
          HideNavbarOf(view: Text(&quot;Chat&quot;))
          
              .tabItem {
                  Label {
                      Text(&quot;Home&quot;)
                          .font(.custom(Popins.regular.rawValue, size: 11))
                          .foregroundColor(.white)
                  } icon: {
                      VStack {
                          Image(ImageName.homeLine.rawValue)
                              .resizable()
                              .scaledToFit()
                              .frame(width: 10, height: 10)
                          
                          Image(ImageName.tapSelected.rawValue)
                              .resizable()
                              .scaledToFit()
                              .frame(width: 10, height: 10)
  
                      }
                  }
              }
              .tag(2)
  </code></pre>
  <p>Below is the image of tabBar Item after these methods. There is no effect of any method, tabItem is only considering the first one Image and Label.</p>
  <p><a href="https://i.stack.imgur.com/5E74e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5E74e.png" alt="Preview" /></a></p>
  <p>How Can I achieve the required UI that have Image at top and bottom and a text in middle.</p>