mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-14 16:52:26 +08:00
fix(react/vue): properly switch ionicon based on the mode when ios/md is set (#26924)
closes #26207
This commit is contained in:
Brandy Carney
1
packages/vue/test/base/public/assets/logo-android.svg
Normal file
1
packages/vue/test/base/public/assets/logo-android.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon md android" viewBox="0 0 512 512"><title>Logo Android</title><path d="M380.91 199l42.47-73.57a8.63 8.63 0 00-3.12-11.76 8.52 8.52 0 00-11.71 3.12l-43 74.52c-32.83-15-69.78-23.35-109.52-23.35s-76.69 8.36-109.52 23.35l-43-74.52a8.6 8.6 0 10-14.88 8.64L131 199C57.8 238.64 8.19 312.77 0 399.55h512c-8.19-86.78-57.8-160.91-131.09-200.55zM138.45 327.65a21.46 21.46 0 1121.46-21.46 21.47 21.47 0 01-21.46 21.46zm235 0A21.46 21.46 0 11395 306.19a21.47 21.47 0 01-21.51 21.46z"/></svg>
|
||||
|
After Width: | Height: | Size: 533 B |
1
packages/vue/test/base/public/assets/logo-apple.svg
Normal file
1
packages/vue/test/base/public/assets/logo-apple.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon ios apple" viewBox="0 0 512 512"><title>Logo Apple</title><path d="M349.13 136.86c-40.32 0-57.36 19.24-85.44 19.24-28.79 0-50.75-19.1-85.69-19.1-34.2 0-70.67 20.88-93.83 56.45-32.52 50.16-27 144.63 25.67 225.11 18.84 28.81 44 61.12 77 61.47h.6c28.68 0 37.2-18.78 76.67-19h.6c38.88 0 46.68 18.89 75.24 18.89h.6c33-.35 59.51-36.15 78.35-64.85 13.56-20.64 18.6-31 29-54.35-76.19-28.92-88.43-136.93-13.08-178.34-23-28.8-55.32-45.48-85.79-45.48z"/><path d="M340.25 32c-24 1.63-52 16.91-68.4 36.86-14.88 18.08-27.12 44.9-22.32 70.91h1.92c25.56 0 51.72-15.39 67-35.11 14.72-18.77 25.88-45.37 21.8-72.66z"/></svg>
|
||||
|
After Width: | Height: | Size: 661 B |
@ -33,6 +33,10 @@ const routes: Array<RouteRecordRaw> = [
|
||||
path: '/keep-contents-mounted',
|
||||
component: () => import('@/views/OverlaysKeepContentsMounted.vue')
|
||||
},
|
||||
{
|
||||
path: '/icons',
|
||||
component: () => import('@/views/Icons.vue')
|
||||
},
|
||||
{
|
||||
path: '/inputs',
|
||||
component: () => import('@/views/Inputs.vue')
|
||||
|
||||
@ -20,6 +20,9 @@
|
||||
<ion-item button router-link="/overlays">
|
||||
<ion-label>Overlays</ion-label>
|
||||
</ion-item>
|
||||
<ion-item button router-link="/icons">
|
||||
<ion-label>Icons</ion-label>
|
||||
</ion-item>
|
||||
<ion-item button router-link="/inputs">
|
||||
<ion-label>Inputs</ion-label>
|
||||
</ion-item>
|
||||
|
||||
143
packages/vue/test/base/src/views/Icons.vue
Normal file
143
packages/vue/test/base/src/views/Icons.vue
Normal 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>
|
||||
22
packages/vue/test/base/tests/e2e/specs/icons.cy.js
Normal file
22
packages/vue/test/base/tests/e2e/specs/icons.cy.js
Normal file
@ -0,0 +1,22 @@
|
||||
describe('Icons', () => {
|
||||
it('should use ios svg', () => {
|
||||
cy.visit('http://localhost:8080/icons?ionic:mode=ios');
|
||||
|
||||
cy.get('#customSvg').shadow().find('svg').should('have.class', 'ios');
|
||||
cy.get('#customSvg').shadow().find('svg').should('have.class', 'apple');
|
||||
});
|
||||
|
||||
it('should use md svg', () => {
|
||||
cy.visit('http://localhost:8080/icons?ionic:mode=md');
|
||||
|
||||
cy.get('#customSvg').shadow().find('svg').should('have.class', 'md');
|
||||
cy.get('#customSvg').shadow().find('svg').should('have.class', 'android');
|
||||
});
|
||||
|
||||
it('should use fallback md svg', () => {
|
||||
cy.visit('http://localhost:8080/icons');
|
||||
|
||||
cy.get('#customSvg').shadow().find('svg').should('have.class', 'md');
|
||||
cy.get('#customSvg').shadow().find('svg').should('have.class', 'android');
|
||||
});
|
||||
})
|
||||
Reference in New Issue
Block a user