Support SVG icons added & fix bugs

Author: Rasool-deldar

README.md

@@ -19,6 +19,7 @@
 
 - Zero-config required
 - Auto-import Ionic components, composables and icons
+- Support SVG Icons
 - Ionic Router integration
 - Pre-render routes
 - Mobile meta tags

docs/content/0.index.md

@@ -25,6 +25,7 @@ Batteries-included [Ionic](https://ionicframework.com/) integration for Nuxt.
 ::list
 - Zero-config required
 - Auto-import Ionic components, composables and icons
+- Support SVG Icons
 - Ionic Router integration
 - Pre-render routes
 - Mobile meta tags

docs/content/1.get-started/1.introduction.md

@@ -35,6 +35,7 @@ This module attempts to get you going with Nuxt + Ionic quickly, providing sane
 ::list{type=success}
 - **Ionic router integration:** continue defining routes based on the structure of your `~/pages` directory and using page-level utilities such as `definePageMeta()`.
 - **Auto-imports**: Ionic components, composables and icons are all [auto-imported](https://nuxt.com/docs/guide/concepts/auto-imports) for ease of use.
+- **Support SVG Icons**: custom icons in the assets/ionic-icons path
 - **Helpful components and utilities**: This module provides components and utilities to accomplish common tasks more easily.
 - **PWA support**: out-of-the-box support for progressive web apps, using `nuxt-pwa-module`.
 - **Pre-render routes**

docs/content/1.get-started/3.configuration.md

@@ -50,8 +50,29 @@ Integrations control which other modules this module should enable and setup fro
 
 - **icons**
 
+  - **ionicons**
+  
   Default: `true`  
-  Disable to stop icons from being auto-imported.
+  Disable to stop ionic-icons from being auto-imported.
+
+  - **svg**
+
+  Custom SVG icons and automatic detection with nested folders and icon size optimization in assets/ionic-icons path.
+  ::alert{type="warning"}
+  ⚠️ Note: Please put all the necessary SVG files in the assets/ionic-icons folder before you run your project. Because when a file is added/deleted in this path, your project will be rerendered again.
+  ::
+
+    - **enable**
+
+    Default: `true`
+  
+    Disable to stop svg from being auto-imported.
+  
+    - **directoryAsNamespace**
+
+    Default: `true`
+  
+    Disable to stop svg from being auto-imported.
 
 #### `css`
 

docs/content/2.overview/5.icons.md

@@ -6,35 +6,59 @@ navigation.icon: uil:illustration
 
 Icons are auto-imported from [`ionicons/icons`](https://github.com/ionic-team/ionicons) by default, following the pattern of camel case naming with `ionicons` in front of the original icon name, that you can find on the [official ionicons website](https://ionic.io/ionicons).
 
+::alert{type="info"}
+ℹ️ Note: Please put all the necessary SVG files in the assets/ionic-icons folder before you run your project. Because when a file is added/deleted in this path, your project will be rerendered again.
+::
+
+::alert{type="warning"}
+⚠️ Note: When you use #import , change the name of the icon using "as" and the desired name. Because it doesn't interfere with auto-import.
+::
+
 ::code-group
 
 ```vue [Auto-imported icons]
 <template>
   <ion-icon :icon="ioniconsImage"></ion-icon>
   <ion-icon :md="ioniconsSquareSharp" :ios="ioniconsTriangleOutline"></ion-icon>
+  <!-- ##### svg icon ##### -->
+  <!-- without directoryAsNamespace -->
+  <ion-icon :icon="ionicIconSvg`YourSvgFile`"></ion-icon>
+  <!-- example -->
+  <ion-icon :icon="ionicIconSvgHome"></ion-icon>
+  <!-- with directoryAsNamespace -->
+  <ion-icon :icon="ionicIconSvg`Subdirectories``YourSvgFile`"></ion-icon>
+  <!-- example -->
+  <ion-icon :icon="ionicIconSvgTabImage"></ion-icon>
 </template>
 ```
 
 ```vue [Manual imports]
 <script setup lang="ts">
 import { image, squareSharp, triangleOutline } from 'ionicons/icons'
+import { ionicIconSvgHome as home, ionicIconSvgTabImage as tabImage } from "#imports";
 </script>
 
 <template>
   <ion-icon :icon="image"></ion-icon>
   <ion-icon :md="squareSharp" :ios="triangleOutline"></ion-icon>
+  <!-- ##### svg icon ##### -->
+  <ion-icon :icon="home"></ion-icon>
+  <ion-icon :icon="tabImage"></ion-icon>
+  <ion-icon :md="home" :ios="tabImage"></ion-icon>
 </template>
 ```
 
 ::
 
-You can opt-out of auto-importing icons by setting the `integrations.icons` module options in your `nuxt.config.ts` to `false`.
+You can opt-out of auto-importing icons by setting the `integrations.icons.ionicons` module options in your `nuxt.config.ts` to `false`.
 
 ```js
 export default defineNuxtConfig({
   ionic: {
     integrations: {
-      icons: false,
+      icons: {
+        ionicons: false
+      },
     },
   },
 })

docs/package.json

@@ -11,6 +11,6 @@
   "devDependencies": {
     "@nuxt-themes/docus": "1.15.0",
     "@nuxtjs/plausible": "0.2.4",
-    "nuxt": "3.9.1"
+    "nuxt": "3.9.3"
   }
 }

package.json

@@ -57,41 +57,42 @@
     "@capacitor/cli": "^5.6.0",
     "@capacitor/core": "^5.6.0",
     "@ionic/cli": "^7.2.0",
-    "@ionic/vue": "^7.6.3",
-    "@ionic/vue-router": "^7.6.3",
+    "@ionic/vue": "^7.6.5",
+    "@ionic/vue-router": "^7.6.5",
     "@kevinmarrec/nuxt-pwa": "^0.17.0",
-    "@nuxt/kit": "^3.9.1",
+    "@nuxt/kit": "^3.9.3",
     "ionicons": "^7.2.2",
-    "pathe": "^1.1.1",
+    "pathe": "^1.1.2",
     "pkg-types": "^1.0.3",
     "ufo": "^1.3.2",
     "unimport": "^3.7.1"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "0.2.0",
     "@nuxt/module-builder": "0.5.5",
-    "@nuxt/schema": "3.9.1",
+    "@nuxt/schema": "3.9.3",
     "@nuxt/test-utils": "3.9.0",
     "@types/node": "20.10.7",
-    "@vitest/coverage-v8": "1.1.3",
+    "@vitest/coverage-v8": "1.2.1",
     "bumpp": "9.2.1",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.1.2",
     "expect-type": "0.17.3",
     "husky": "8.0.3",
     "lint-staged": "15.2.0",
-    "nuxt": "3.9.1",
+    "nuxt": "3.9.3",
     "pinst": "3.0.0",
-    "playwright": "1.40.1",
+    "playwright": "1.41.1",
     "prettier": "3.1.1",
+    "svgo": "^3.2.0",
     "typescript": "5.3.3",
-    "vitest": "1.1.3",
+    "vitest": "1.2.1",
     "vue": "3.4.7"
   },
   "resolutions": {
-    "@nuxt/kit": "3.9.1",
-    "@nuxt/schema": "3.9.1",
+    "@nuxt/kit": "3.9.3",
+    "@nuxt/schema": "3.9.3",
     "@nuxtjs/ionic": "link:.",
     "consola": "^3.2.3"
   },

playground/composables/usePhotoGallery.ts

@@ -3,7 +3,7 @@ import { Camera, CameraSource, CameraResultType, Photo } from '@capacitor/camera
 import { Filesystem, Directory } from '@capacitor/filesystem'
 import { Preferences } from '@capacitor/preferences'
 
-export function usePhotoGallery() {
+export const usePhotoGallery = () => {
   const photos = ref<UserPhoto[]>([])
   const PHOTO_STORAGE = 'photos'
 

playground/package.json

@@ -12,6 +12,6 @@
     "@capacitor/filesystem": "5.2.0",
     "@capacitor/preferences": "5.0.6",
     "@nuxtjs/ionic": "latest",
-    "nuxt": "3.9.1"
+    "nuxt": "3.9.3"
   }
 }