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

[brandyscarney]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Setting the ios and md properties on <ion-icon> in Vue and React is not switching between them properly when setting the mode in the global config or as a property on <ion-icon>.

Issue URL: closes #26207

What is the new behavior?

The icon behavior when ios or md is defined on <ion-icon> for Vue/React has changed to:

• If the <ion-icon> has mode defined as in <ion-icon mode="ios" :ios="star" :md="heart"> (Vue syntax) then the icon will always show the star as that is the value ofios
• If the global mode is set either via the global config or through the url (?ionic:mode=ios) then the icon used should be for that mode
• If no mode is set, use the icon for the mode that is set by default based on the platform
• Fallback to md if no mode or platform matches

Does this introduce a breaking change?

• Yes
• No

Verifying Tests

Testing Vue

Passing

1. Run npm i and npm run build from core
2. Run npm i and npm run build from packages/vue
3. Run npm i and npm run build from packages/vue-router
4. Run ./build.sh vue3 from packages/vue/test
5. cd build/vue3/ and run npm i and then npm run sync
6. Run npm run test:e2e
7. Verify that the icons test passes

Failing

1. Run ./build.sh vue3 from packages/vue/test
2. cd build/vue3/ and run npm run test:e2e (do NOT run sync)
3. Verify that the icons test fails on ios
   

Testing React

Passing

1. Run npm i and npm run build from core
2. Run npm i and npm run build from packages/react
3. Run npm i and npm run build from packages/react-router
4. cd react/test-app and run npm i and then npm run sync
5. Run npm run build and then npm run e2e
6. Verify that the icons test passes

Failing

1. Go into packages/react/src/components/IonIcon.tsx and change line 45 back to:

   if (isPlatform('ios')) {
   

   and then add its import back:

   import { createForwardRef, isPlatform } from './utils';
   

   Comment out the now unused config code, then run the following in packages/react:

   npm run build

2. In the test-app run:

   npm run sync
   npm run build
   npm run e2e

3. Verify the icons test now fails on ios
   

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[liamdebeasi]

Can we write tests to verify this behavior in the react and vue packages?