From 18551efc588f72aa426a007f94f46b1e300b37fc Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Thu, 12 Nov 2026 09:05:09 -0500
Subject: [PATCH] docs(vue): import ionicons after @ionic/vue in the Your First
 App snippets

---
 docs/vue/your-first-app.mdx                 | 4 ++--
 docs/vue/your-first-app/2-taking-photos.mdx | 4 ++--
 docs/vue/your-first-app/7-live-reload.mdx   | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/vue/your-first-app.mdx b/docs/vue/your-first-app.mdx
index 9d882ed08c..a2ebe602a7 100644
--- a/docs/vue/your-first-app.mdx
+++ b/docs/vue/your-first-app.mdx
@@ -228,10 +228,10 @@ We put the visual aspects of our app into `<ion-content>`. In this case, it’s
 </template>
 
 <script setup lang="ts">
-// CHANGE: Add import from `ionicons/icons`
-import { camera } from 'ionicons/icons';
 // CHANGE: Update import from `@ionic/vue` to include necessary Ionic components
 import { IonPage, IonHeader, IonFab, IonFabButton, IonIcon, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
+// CHANGE: Add import from `ionicons/icons`
+import { camera } from 'ionicons/icons';
 // CHANGE: Remove or comment out the ExploreContainer import
 // import ExploreContainer from '@/components/ExploreContainer.vue';
 </script>
diff --git a/docs/vue/your-first-app/2-taking-photos.mdx b/docs/vue/your-first-app/2-taking-photos.mdx
index 665af5748d..56e033fee5 100644
--- a/docs/vue/your-first-app/2-taking-photos.mdx
+++ b/docs/vue/your-first-app/2-taking-photos.mdx
@@ -72,8 +72,8 @@ Next, in `Tab2Page.vue`, import the `usePhotoGallery()` method and destructure i
 </template>
 
 <script setup lang="ts">
-import { camera } from 'ionicons/icons';
 import { IonPage, IonHeader, IonFab, IonFabButton, IonIcon, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
+import { camera } from 'ionicons/icons';
 
 // CHANGE: Add `usePhotoGallery` import
 import { usePhotoGallery } from '@/composables/usePhotoGallery';
@@ -245,7 +245,6 @@ Next, switch to `Tab2Page.vue` to display the images. We'll add a [Grid componen
 </template>
 
 <script setup lang="ts">
-import { camera } from 'ionicons/icons';
 import {
   IonPage,
   IonHeader,
@@ -259,6 +258,7 @@ import {
   IonRow,
   IonCol,
 } from '@ionic/vue';
+import { camera } from 'ionicons/icons';
 
 import { usePhotoGallery } from '@/composables/usePhotoGallery';
 
diff --git a/docs/vue/your-first-app/7-live-reload.mdx b/docs/vue/your-first-app/7-live-reload.mdx
index 127882e65f..b5fd7e6d77 100644
--- a/docs/vue/your-first-app/7-live-reload.mdx
+++ b/docs/vue/your-first-app/7-live-reload.mdx
@@ -92,8 +92,6 @@ Next, in `Tab2Page.vue`, implement the `showActionSheet()` method. We're adding
 
 <script setup lang="ts">
 // CHANGE: Update import
-import { camera, trash, close } from 'ionicons/icons';
-// CHANGE: Update import
 import {
   IonPage,
   IonHeader,
@@ -108,6 +106,8 @@ import {
   IonCol,
   actionSheetController,
 } from '@ionic/vue';
+// CHANGE: Update import
+import { camera, trash, close } from 'ionicons/icons';
 
 // CHANGE: Add `UserPhoto` type import
 import type { UserPhoto } from '@/composables/usePhotoGallery';