Блог

Главная - Вопросы по программированию - Измените IonIcon и добавьте пользовательский класс для IonTabs на выбранной странице для навигационной панели Ionic React

Измените IonIcon и добавьте пользовательский класс для IonTabs на выбранной странице для навигационной панели Ionic React

#reactjs #react-native #ionic-framework

Вопрос:

Я пытаюсь изменить IonIcon, если нажата кнопка Iontab.

Я попытался добавить изображение src, но ничего не вышло.

Я добавил свой файл App.tsx ниже.

 const App: React.FC = () => (

  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route exact path="/login">
            <Login />
          </Route>
          <Route exact path="/dashboard">
            <Dashboard />
          </Route>
          <Route exact path="/invoice">
            <Invoice />
          </Route>
          <Route exact path="/tab4">
            <Tab4 />
          </Route>
          <Route exact path="/">
            <Redirect to="/login" />
          </Route>
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="login" href="/login">
            <IonIcon icon={triangle} />
            <IonLabel>Login</IonLabel>
          </IonTabButton>
          <IonTabButton tab="dashboard" href="/dashboard">
            <IonIcon icon={ellipse} />
            <IonLabel>Dashboard</IonLabel>
          </IonTabButton>
          <IonTabButton tab="invoice" href="/invoice">
            <IonIcon icon={square} />
            <IonLabel>Invoice</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab4" href="/tab4">
            <IonIcon icon={shield} />
            <IonLabel>Tab 4 </IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;

Примечание:
Не ищу простого изменения цвета. Мне нужно заменить новый svg/значок.

Метки: