javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(react/vue): properly switch ionicon based on the mode when ios/md is set (#26924)

Browse Source 
closes #26207
This commit is contained in:
Brandy Carney
2023-03-14 15:03:28 -04:00
committed by GitHub
parent af79673246
commit 1eb9a085b2
16 changed files with 383 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
packages/vue/test/base/src/views/Icons.vue Normal file
View File

@ -0,0 +1,143 @@
<template>
<ion-page data-pageid="icons">
<ion-header :translucent="true">
<ion-toolbar>
<ion-buttons>
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Icons</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Icons</ion-title>
</ion-toolbar>
</ion-header>
<ion-list>
<ion-item>
<ion-icon slot="start" :icon="heart"></ion-icon>
<ion-label>Static Icons</ion-label>
<ion-icon slot="end" :icon="personCircleOutline" color="dark"></ion-icon>
<ion-icon slot="end" :icon="trash" color="danger"></ion-icon>
</ion-item>
<ion-item>
<ion-icon :icon="logoApple" slot="start"></ion-icon>
<ion-label>Logo Icons</ion-label>
<ion-icon :icon="logoTwitter" slot="end"></ion-icon>
</ion-item>
<ion-item>
<ion-icon slot="start" :icon="dynamic" color="warning"></ion-icon>
<ion-label>Dynamic Icon</ion-label>
<ion-button slot="end" fill="outline" @click="toggle">
Toggle Icon
</ion-button>
</ion-item>
<ion-item>
<ion-icon slot="start" :ios="heartCircleOutline" :md="personCircleOutline"></ion-icon>
<ion-label>
<p>ios: heart circle</p>
<p>md: person circle</p>
</ion-label>
</ion-item>
<ion-item>
<ion-icon slot="start" :ios="starOutline" :md="star"></ion-icon>
<ion-label>
<p>ios: star outline</p>
<p>md: star</p>
</ion-label>
</ion-item>
<ion-item>
<ion-icon slot="start" mode="ios" :ios="starOutline" :md="star"></ion-icon>
<ion-label>
<h3>mode: ios</h3>
<p>ios: star outline</p>
<p>md: star</p>
</ion-label>
</ion-item>
<ion-item>
<ion-icon slot="start" mode="md" :ios="starOutline" :md="star"></ion-icon>
<ion-label>
<h3>mode: md</h3>
<p>ios: star outline</p>
<p>md: star</p>
</ion-label>
</ion-item>
<ion-item>
<ion-icon id="customSvg" slot="start" :ios="iosCustomSvg" :md="mdCustomSvg"></ion-icon>
<ion-label>
<p>Custom SVG</p>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import {
IonBackButton,
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonList,
IonPage,
IonTitle,
IonToolbar
} from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import { heart, heartCircleOutline, logoApple, logoTwitter, personCircleOutline, star, starOutline, trash } from 'ionicons/icons';
export default defineComponent({
components: {
IonBackButton,
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonList,
IonPage,
IonTitle,
IonToolbar
},
setup() {
const iosCustomSvg = "../assets/logo-apple.svg";
const mdCustomSvg = "../assets/logo-android.svg";
const dynamic = ref(star);
const toggle = () => {
const current = dynamic.value;
dynamic.value = current === star ? starOutline : star;
}
return {
iosCustomSvg,
mdCustomSvg,
dynamic,
heart,
heartCircleOutline,
logoApple,
logoTwitter,
personCircleOutline,
star,
starOutline,
trash,
toggle
}
}
});
</script>