Support SVG icons added & fix bugs

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
+      },
     },
   },
 })

package.json

@@ -61,6 +61,7 @@
     "ionicons": "^7.3.1",
     "pathe": "^1.1.2",
     "pkg-types": "^1.0.3",
+    "svgo": "^3.2.0",
     "ufo": "^1.5.3",
     "unimport": "^3.7.1"
   },

playground/composables/usePhotoGallery.ts

@@ -4,7 +4,7 @@ import { Camera, CameraSource, CameraResultType } 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'
 

src/module.ts

@@ -17,17 +17,28 @@ import { IonicBuiltInComponents, IonicHooks } from './imports'
 
 import { setupUtilityComponents } from './parts/components'
 import { useCSSSetup } from './parts/css'
-import { setupIcons } from './parts/icons'
+import { setupIonIcons } from './parts/icons/ionicons'
+import { setupIonicIconsSvg } from './parts/icons/ionic-icons-svg'
 import { setupMeta } from './parts/meta'
 import { setupPWA } from './parts/pwa'
 import { setupRouter } from './parts/router'
 
+export interface ModuleOptionIconSvg {
+  enable?: boolean
+  directoryAsNamespace?: boolean
+}
+
+export interface ModuleOptionIcon {
+  ionicons?: boolean
+  svg?: ModuleOptionIconSvg
+}
+
 export interface ModuleOptions {
   integrations?: {
     router?: boolean
     pwa?: boolean
     meta?: boolean
-    icons?: boolean
+    icons?: ModuleOptionIcon
   }
   css?: {
     core?: boolean
@@ -93,7 +104,13 @@ export default defineNuxtModule<ModuleOptions>({
       meta: true,
       pwa: true,
       router: true,
-      icons: true,
+      icons: {
+        ionicons: true,
+        svg: {
+          enable: false,
+          directoryAsNamespace: true,
+        },
+      },
     },
     css: {
       core: true,
@@ -205,8 +222,13 @@ export default defineNuxtModule<ModuleOptions>({
     }
 
     // Add auto-imported icons
-    if (options.integrations?.icons) {
-      await setupIcons()
+    if (options.integrations?.icons?.ionicons) {
+      await setupIonIcons()
+    }
+
+    // Add auto-imported custom icons
+    if (options.integrations?.icons?.svg?.enable) {
+      setupIonicIconsSvg(options.integrations?.icons?.svg)
     }
 
     if (options.integrations?.meta) {