Ionic图标使用

Ionic图标使用

图标网址：https://ionic.io/ionicons

代码修改：views 文件夹下的vue文件

<template>
  <ion-page>
    <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" href="/tabs/tab1">
          <ion-icon :icon="triangle" />
          <ion-label>Tab 1</ion-label>
        </ion-tab-button>
​        <ion-tab-button tab="tab2" href="/tabs/tab2">
​          <ion-icon :icon="ellipse" />
​          <ion-label>Tab 2</ion-label>
​        </ion-tab-button>
​        
​        <ion-tab-button tab="tab3" href="/tabs/tab3">
​          <ion-icon :icon="person" />//camelCase 命名法把图标名字复制过来
​          <ion-label>Tab 3</ion-label>
​        </ion-tab-button>
​        
​      </ion-tab-bar>
​    </ion-tabs>
  </ion-page>
</template>

<script>
import { defineComponent } from 'vue';
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
import { ellipse, square, triangle, person} from 'ionicons/icons';//导进图标
export default defineComponent({
  name: 'TabsPage',
  components: { IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage, IonRouterOutlet },
  setup() {
    return {
      ellipse, 
      square, 
      triangle,
      person//返回
    }
  }
});
</script>