[Documentation] Completing documentation

src/app/components/atoms/icon-material/ng-doc.page.ts → src/app/components/atoms/icon-material/doc/ng-doc.page.ts

@@ -2,16 +2,17 @@ import type { NgDocPage } from '@ng-doc/core';
 import { IconMaterialComponent } from 'src/app/components/atoms/icon-material/icon-material.component';
 import ComponentsCategory from 'src/app/components/ng-doc.category';
 
-const IconMaterialPage: NgDocPage = {
+const IconMaterial: NgDocPage = {
   title: `Icon Material`,
-  mdFile: './index.md',
+  route: 'icon-material',
+  mdFile: ['./tabs/index.md', './tabs/sources.md', './tabs/requirements.md'],
   playgrounds: {
     IconMaterialPlayground: {
       target: IconMaterialComponent,
-      template: `<ng-doc-selector></ng-doc-selector>`,
+      template: `<ng-doc-selector>favorite</ng-doc-selector> `,
     },
   },
   category: ComponentsCategory,
 };
 
-export default IconMaterialPage;
+export default IconMaterial;

src/app/components/atoms/icon-material/doc/tabs/index.md

@@ -0,0 +1,19 @@
+---
+title: Overview
+keyword: IconMaterialOverview
+---
+
+> **note**
+> {{ JSDoc.description("src/app/components/atoms/icon-material/icon-material.component.ts#IconMaterialComponent") }}
+
+To learn more about the technical aspect of this component, check the [API page](https://louiiuol.github.io/ngx-lib/api/classes/api/IconMaterialComponent).
+
+## Playground 🕹️
+
+You can play around with this component's input to create unique combinaison and see what this produce, have fun !
+
+{{ NgDocActions.playground("IconMaterialPlayground", {inputs: {name: "favorite"} }) }}
+
+
+<div id="end"></div>
+

src/app/components/atoms/icon-material/index.md → src/app/components/atoms/icon-material/doc/tabs/requirements.md

@@ -1,18 +1,17 @@
-Simple component to display an icon from material-symbols-outlined font.
+---
+title: Requirements
+route: requirements
+keyword: IconMaterialRequirements
+---
 
-* Refer to the material-symbols-outlined font for the list of available icons.
-* <https://fonts.google.com/icons>
+## Requirements
 
+> In order to use this component in your application, you must follow these steps:
 
-## Playground 🕹️
+### Tailwind CSS
 
-{{ NgDocActions.playground("IconMaterialPlayground", {inputs: {name: "home"} }) }}
-
-<div id="end"></div>
-
-## Pre requirements
-
-In order to use this component in your application, you must follow these steps:
+> **note**
+> All of the components in this library use tailwind to render the UI. So make sure you have it configured on you project or adapt the code accordingly.
 
 ### Adding Google font
 
@@ -38,4 +37,5 @@ Simply add this selector to your `style.scss` file. Adapt this settings to match
 
 ### That's it 🎉
 
-You can now start importing this component in your application !
+> **success**
+> You can import the source code and make it yours right away 🎉

src/app/components/atoms/icon-material/doc/tabs/sources.md

@@ -0,0 +1,13 @@
+---
+title: Sources
+route: sources
+keyword: IconMaterialSources
+---
+
+## Sources
+
+```typescript file="../../icon-material.component.ts" name="icon-material.component.ts"
+```
+
+> **warning**
+> Refer to the [material-symbols-outlined](https://fonts.google.com/icons) font for the list of available icons.

src/app/components/atoms/icon/doc/ng-doc.page.ts

@@ -9,7 +9,7 @@ const Icon: NgDocPage = {
   playgrounds: {
     IconPlayground: {
       target: IconComponent,
-      template: `<ng-doc-selector>favorite</ng-doc-selector> `,
+      template: `<ng-doc-selector></ng-doc-selector> `,
     },
   },
   category: ComponentsCategory,

src/app/components/atoms/icon/doc/tabs/index.md

@@ -12,7 +12,9 @@ To learn more about the technical aspect of this component, check the [API page]
 
 You can play around with this component's input to create unique combinaison and see what this produce, have fun !
 
-{{ NgDocActions.playground("IconPlayground", {inputs: {name: "logo"} }) }}
+{{ NgDocActions.playground("IconPlayground", {inputs: {name: "logo", path: '/ngx-lib/icons'} }) }}
 
 <div id="end"></div>
 
+> **warning**
+> If you are trying to use this playground locally, you are gonna need to mark the checkbox "Recreate" and change the path property to `/icons` in order to make it work.

src/app/components/atoms/icon/doc/tabs/requirements.md

@@ -13,14 +13,16 @@ keyword: IconRequirements
 > **note**
 > All of the components in this library use tailwind to render the UI. So make sure you have it configured on you project or adapt the code accordingly.
 
-
 ### Create assets/icons folder
 
 In this folder, you can add all SVG required for your UI. You can also creates sub-folders but be aware, you'll need to format name as `folderName/fileName`.
 
 > **Note**
 > With this component, you can control the fill of the SVG by adding some color of the component (works by inheritance).
 
+### Verify IconComponent input path() location
+
+Make sure the path match your icons location. You can always change it when you call the icon, but you can also make the change globally by changing the default value.
 
 ### Import FileService
 

src/app/components/atoms/icon/icon.component.ts

@@ -11,8 +11,6 @@ import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { switchMap } from 'rxjs';
 import { FileService } from 'src/app/services/file/file.service';
 
-const ICONS_PATH = '/icons';
-
 /**
  * Simple component to display an icon from an svg file
  * located in `assets/icons` folder
@@ -45,8 +43,12 @@ export class IconComponent {
   name = input.required<string>();
 
   /**
-   * Size of the icon (must include css unit)
-   * @default '1.5rem'
+   * Optional path to the icons folder. Default is `/icons`
+   */
+  path = input<string>('/icons');
+
+  /**
+   * Size of the icon (must include css unit). Default is '1.5rem'
    */
   size = input<string>('1.5rem');
 
@@ -67,7 +69,9 @@ export class IconComponent {
    */
   protected readonly triggerSubscription = toObservable(this.name)
     .pipe(
-      switchMap((name) => this.fileService.getSVG(`${ICONS_PATH}/${name}.svg`)),
+      switchMap((name) =>
+        this.fileService.getSVG(`${this.path()}/${name}.svg`),
+      ),
       takeUntilDestroyed(),
     )
     .subscribe((svgContent) => this.renderSvg(svgContent));
@@ -83,7 +87,7 @@ export class IconComponent {
    * Render the svg content in the component
    * @param element svg content to be rendered
    */
-  private renderSvg(element: HTMLParagraphElement | SVGElement | null) {
+  private renderSvg(element: SVGElement | null) {
     const svgElement = element?.querySelector('svg');
     if (svgElement) {
       this.renderer.setAttribute(svgElement, 'width', this.size());