Merge pull request #4257 from primefaces/issue-4256

Add custom icons page
primefaces · Apr 19, 2023 · 2682aef · 2682aef
2 parents abe4aa3 + 9ec9a8f
commit 2682aef
Show file tree

Hide file tree

Showing 11 changed files with 150 additions and 85 deletions.
diff --git a/components/doc/common/doccomponent.js b/components/doc/common/doccomponent.js
@@ -26,19 +26,21 @@ export function DocComponent(props) {
                 <title>{props.title}</title>
                 <meta name="description" content={props.description} />
             </Head>
-            <ul className="doc-tabmenu">
-                <li className={classNames({ 'doc-tabmenu-active': tab === 0 })}>
-                    <button type="button" onClick={() => activateTab(0)}>
-                        {props.header.startsWith('use') ? 'HOOK' : 'FEATURES'}
-                    </button>
-                </li>
+            {!props.hideTabMenu ? (
+                <ul className="doc-tabmenu">
+                    <li className={classNames({ 'doc-tabmenu-active': tab === 0 })}>
+                        <button type="button" onClick={() => activateTab(0)}>
+                            {props.header.startsWith('use') ? 'HOOK' : 'FEATURES'}
+                        </button>
+                    </li>
 
-                <li className={classNames({ 'doc-tabmenu-active': tab === 1 })}>
-                    <button type="button" onClick={() => activateTab(1)}>
-                        API
-                    </button>
-                </li>
-            </ul>
+                    <li className={classNames({ 'doc-tabmenu-active': tab === 1 })}>
+                        <button type="button" onClick={() => activateTab(1)}>
+                            API
+                        </button>
+                    </li>
+                </ul>
+            ) : null}
             <div className="doc-tabpanels">
                 {tab === 0 ? (
                     <div className="doc-tabpanel">

diff --git a/components/doc/customicons/fontawesomedoc.js b/components/doc/customicons/fontawesomedoc.js
@@ -0,0 +1,21 @@
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function FontAwesomeDoc(props) {
+    const code = {
+        basic: `
+<Dropdown dropdownIcon={<i class="fa-light fa-chevron-down"></i>} />
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <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 import hideCodeSandbox hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/customicons/imagedoc.js b/components/doc/customicons/imagedoc.js
@@ -0,0 +1,19 @@
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function ImageDoc(props) {
+    const code = {
+        basic: `
+<Dropdown dropdownIcon={<img alt="dropdown icon" src="/icons/arrow_down.png" />} />
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Any time of image can be used as an icon.</p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/customicons/materialdoc.js b/components/doc/customicons/materialdoc.js
@@ -0,0 +1,21 @@
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function MaterialDoc(props) {
+    const code = {
+        basic: `
+<Dropdown dropdownIcon={<img alt="dropdown icon" src="/icons/arrow_down.png" />} />
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <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 import hideCodeSandbox hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/customicons/svgdoc.js b/components/doc/customicons/svgdoc.js
@@ -0,0 +1,23 @@
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function SVGDoc(props) {
+    const code = {
+        basic: `
+<Dropdown 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>} />
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Inline SVGs are embedded inside the dom.</p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/icons/svgdoc.js b/components/doc/icons/svgdoc.js
diff --git a/components/doc/installation/downloaddoc.js b/components/doc/installation/downloaddoc.js
@@ -5,10 +5,10 @@ export function DownloadDoc(props) {
     const code = {
         basic: `
 // with npm
-npm install primereact primeicons
+npm install primereact
 
 // with yarn
-yarn add primereact primeicons
+yarn add primereact
         `
     };
 

diff --git a/components/doc/installation/stylesdoc.js b/components/doc/installation/stylesdoc.js
@@ -9,10 +9,7 @@ export function StylesDoc(props) {
 import "primereact/resources/themes/lara-light-indigo/theme.css";     
     
 //core
-import "primereact/resources/primereact.min.css";
-
-//icons
-import "primeicons/primeicons.css";                                         
+import "primereact/resources/primereact.min.css";                                       
         `
     };
 
@@ -28,7 +25,7 @@ body {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Theme, core and icons are the necessary css files of the components, visit the <Link href="/theming#themes">Themes</Link> section for the complete list of available themes to choose from. In upcoming version 10, a css-in-js
+                    Theme and Core styles are the necessary css files of the components, visit the <Link href="/theming#themes">Themes</Link> section for the complete list of available themes to choose from. In upcoming version 10, a css-in-js
                     approach will be implemented along with migration to SVG icons to remove the requirement to install css files.
                 </p>
                 <DocSectionCode code={code1} hideToggleCode import hideCodeSandbox hideStackBlitz />

diff --git a/components/layout/menu.json b/components/layout/menu.json
@@ -467,9 +467,19 @@
             "to": "/uikit"
         },
         {
-            "name": "PrimeIcons",
+            "name": "Icons",
             "icon": "pi pi-eye",
-            "to": "/icons"
+            "to": "/icons",
+            "children": [
+                {
+                    "name": "Prime Icons",
+                    "to": "/icons"
+                },
+                {
+                    "name": "Custom Icons",
+                    "to": "/customicons"
+                }
+            ]
         },
         {
             "name": "Hooks",

diff --git a/pages/customicons/index.js b/pages/customicons/index.js
@@ -0,0 +1,34 @@
+import { DocComponent } from '../../components/doc/common/doccomponent';
+import { FontAwesomeDoc } from '../../components/doc/customicons/fontawesomedoc';
+import { ImageDoc } from '../../components/doc/customicons/imagedoc';
+import { MaterialDoc } from '../../components/doc/customicons/materialdoc';
+import { SVGDoc } from '../../components/doc/customicons/svgdoc';
+
+const ContextMenuDemo = () => {
+    const docs = [
+        {
+            id: 'material',
+            label: 'Material',
+            component: MaterialDoc
+        },
+        {
+            id: 'fontawesome',
+            label: 'Font Awesome',
+            component: FontAwesomeDoc
+        },
+        {
+            id: 'svg',
+            label: 'SVG',
+            component: SVGDoc
+        },
+        {
+            id: 'image',
+            label: 'Image',
+            component: ImageDoc
+        }
+    ];
+
+    return <DocComponent title="Custom Icons - PrimeReact" header="Custom Icons" description="PrimeReact components can be used with any icon library using the templating features." componentDocs={docs} hideTabMenu />;
+};
+
+export default ContextMenuDemo;
diff --git a/pages/icons/index.js b/pages/icons/index.js
@@ -1,7 +1,4 @@
-import Head from 'next/head';
 import React from 'react';
-import { DocSectionNav } from '../../components/doc/common/docsectionnav';
-import { DocSections } from '../../components/doc/common/docsections';
 import { BasicDoc } from '../../components/doc/icons/basicdoc';
 import { ColorDoc } from '../../components/doc/icons/colordoc';
 import { ConstantsDoc } from '../../components/doc/icons/constantsdoc';
@@ -10,7 +7,7 @@ import { ImportDoc } from '../../components/doc/icons/importdoc';
 import { ListDoc } from '../../components/doc/icons/listdoc';
 import { SizeDoc } from '../../components/doc/icons/sizedoc';
 import { SpinDoc } from '../../components/doc/icons/spindoc';
-import { SVGDoc } from '../../components/doc/icons/svgdoc';
+import { DocComponent } from '../../components/doc/common/doccomponent';
 
 const IconsDoc = () => {
     const docs = [
@@ -29,11 +26,6 @@ const IconsDoc = () => {
             label: 'Basic',
             component: BasicDoc
         },
-        {
-            id: 'svg',
-            label: 'SVG',
-            component: SVGDoc
-        },
         {
             id: 'size',
             label: 'Size',
@@ -61,29 +53,7 @@ const IconsDoc = () => {
         }
     ];
 
-    return (
-        <div>
-            <Head>
-                <title>React Icon Library - PrimeReact</title>
-                <meta name="description" content="PrimeIcons is the default icon library of PrimeReact." />
-            </Head>
-            <div className="doc">
-                <div className="doc-main">
-                    <div className="doc-intro">
-                        <h1>Icons</h1>
-                        <p>
-                            <a href="https://github.com/primefaces/primeicons" className="text-primary hover:underline font-semibold">
-                                PrimeIcons
-                            </a>{' '}
-                            is the default icon library of PrimeReact with over 250 open source icons developed by PrimeTek.
-                        </p>
-                    </div>
-                    <DocSections docs={docs} />
-                </div>
-                <DocSectionNav docs={docs} />
-            </div>
-        </div>
-    );
+    return <DocComponent title="React Icon Library - PrimeReact" header="Icons" description="PrimeIcons is the default icon library of PrimeReact." componentDocs={docs} hideTabMenu />;
 };
 
 export default IconsDoc;