From 8875bf96fb207c5863b88a9ae9d5332c8bb6d37b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 18 Apr 2023 17:58:46 +0300
Subject: [PATCH] Custom Icon page added

---
 assets/menu/menu.json              | 13 +++++--
 doc/customicons/FontAwesomeDoc.vue | 23 +++++++++++++
 doc/customicons/ImageDoc.vue       | 23 +++++++++++++
 doc/customicons/MaterialDoc.vue    | 23 +++++++++++++
 doc/customicons/SVGDoc.vue         | 27 +++++++++++++++
 doc/icons/ImportDoc.vue            |  2 +-
 pages/customicons/index.vue        | 55 ++++++++++++++++++++++++++++++
 pages/icons/index.vue              |  4 +--
 8 files changed, 165 insertions(+), 5 deletions(-)
 create mode 100644 doc/customicons/FontAwesomeDoc.vue
 create mode 100644 doc/customicons/ImageDoc.vue
 create mode 100644 doc/customicons/MaterialDoc.vue
 create mode 100644 doc/customicons/SVGDoc.vue
 create mode 100644 pages/customicons/index.vue

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index 4bd02ce41..a15a73703 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -455,9 +455,18 @@
             "to": "/uikit"
         },
         {
-            "name": "PrimeIcons",
+            "name": "Icons",
             "icon": "pi pi-eye",
-            "to": "/icons"
+            "children": [
+                {
+                    "name": "Prime Icons",
+                    "to": "/icons"
+                },
+                {
+                    "name": "Custom Icons",
+                    "to": "/customicons"
+                }
+            ]
         },
         {
             "name": "Templates",
diff --git a/doc/customicons/FontAwesomeDoc.vue b/doc/customicons/FontAwesomeDoc.vue
new file mode 100644
index 000000000..7b1c73bcc
--- /dev/null
+++ b/doc/customicons/FontAwesomeDoc.vue
@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p><a href="https://fontawesome.com/">Font Awesome</a> is a popular icon library with a wide range of icons.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Dropdown>
+    <template #dropdownicon>
+        <i class="fa-light fa-chevron-down"></i>
+    </template>
+</Dropdown>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/customicons/ImageDoc.vue b/doc/customicons/ImageDoc.vue
new file mode 100644
index 000000000..1dae2b392
--- /dev/null
+++ b/doc/customicons/ImageDoc.vue
@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Any time of image can be used as an icon.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Dropdown>
+    <template #dropdownicon>
+        <img alt="dropdown icon" src="/assets/icons/arrow_down.png">
+    </template>
+</Dropdown>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/customicons/MaterialDoc.vue b/doc/customicons/MaterialDoc.vue
new file mode 100644
index 000000000..92e0cf39b
--- /dev/null
+++ b/doc/customicons/MaterialDoc.vue
@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p><a href="https://fonts.google.com/icons">Material icons</a> is the official icon library based on Google Material Design.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Dropdown>
+    <template #dropdownicon>
+        <span class="material-icons">arrow_drop_down</span>
+    </template>
+</Dropdown>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/customicons/SVGDoc.vue b/doc/customicons/SVGDoc.vue
new file mode 100644
index 000000000..efcccec09
--- /dev/null
+++ b/doc/customicons/SVGDoc.vue
@@ -0,0 +1,27 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Inline SVGs are embedded inside the dom.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Dropdown>
+    <template #dropdownicon>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <g id="chevron-down">
+                <path d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z"/>
+            </g>
+        </svg>
+    </template>
+</Dropdown>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/icons/ImportDoc.vue b/doc/icons/ImportDoc.vue
index 06213184b..b96ec6d70 100644
--- a/doc/icons/ImportDoc.vue
+++ b/doc/icons/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>CSS file of the icon library needs to be imported in your application.</p>
+        <p>CSS file of the icon library needs to be imported in <i>styles.scss</i> of your application.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
diff --git a/pages/customicons/index.vue b/pages/customicons/index.vue
new file mode 100644
index 000000000..2b3bbf52b
--- /dev/null
+++ b/pages/customicons/index.vue
@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <Head>
+            <Title>Vue Icon Library - PrimeVue</Title>
+            <Meta name="description" content="PrimeVue components can be used with any icon library using the templating features." />
+        </Head>
+
+        <div class="doc">
+            <div class="doc-main">
+                <div class="doc-intro">
+                    <h1>Custom Icons</h1>
+                    <p>PrimeVue components can be used with any icon library using the templating features.</p>
+                </div>
+                <DocSections :docs="docs" />
+            </div>
+            <DocSectionNav :docs="docs" />
+        </div>
+    </div>
+</template>
+
+<script>
+import FontAwesomeDoc from '@/doc/customicons/FontAwesomeDoc.vue';
+import ImageDoc from '@/doc/customicons/ImageDoc.vue';
+import MaterialDoc from '@/doc/customicons/MaterialDoc.vue';
+import SVGDoc from '@/doc/customicons/SVGDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'material',
+                    label: 'Material',
+                    component: MaterialDoc
+                },
+                {
+                    id: 'fontawesome',
+                    label: 'FontAwesome',
+                    component: FontAwesomeDoc
+                },
+                {
+                    id: 'svg',
+                    label: 'SVG',
+                    component: SVGDoc
+                },
+                {
+                    id: 'image',
+                    label: 'Image',
+                    component: ImageDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/pages/icons/index.vue b/pages/icons/index.vue
index 4a3f35592..89cadb22e 100755
--- a/pages/icons/index.vue
+++ b/pages/icons/index.vue
@@ -2,7 +2,7 @@
     <div>
         <Head>
             <Title>Vue Icon Library - PrimeVue</Title>
-            <Meta name="description" content="PrimeVue components internally use PrimeIcons library." />
+            <Meta name="description" content="PrimeIcons is the default icon library of PrimeVue with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeVue components can use any icon with templating." />
         </Head>
 
         <div class="doc">
@@ -11,7 +11,7 @@
                     <h1>Icons</h1>
                     <p>
                         <a href="https://github.com/primefaces/primeicons" class="text-primary hover:underline font-semibold"> PrimeIcons </a>
-                        is the default icon library of PrimeVue with over 250 open source icons developed by PrimeTek.
+                        is the default icon library of PrimeVue with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeVue components can use any icon with templating.
                     </p>
                 </div>
                 <DocSections :docs="docs" />