From 6af43a78308dce4b96dc6712d1709af2f481a8d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Turan?= Date: Wed, 19 Apr 2023 01:52:02 +0300 Subject: [PATCH 1/2] Fix #4256: Add custom icons page --- components/doc/common/doccomponent.js | 4 +-- components/doc/customicons/fontawesomedoc.js | 20 ++++++++++++ components/doc/customicons/imagedoc.js | 20 ++++++++++++ components/doc/customicons/materialdoc.js | 20 ++++++++++++ components/doc/customicons/svgdoc.js | 24 ++++++++++++++ components/doc/icons/svgdoc.js | 32 ------------------ components/doc/installation/downloaddoc.js | 4 +-- components/doc/installation/stylesdoc.js | 7 ++-- components/layout/menu.json | 14 ++++++-- pages/customicons/index.js | 34 ++++++++++++++++++++ pages/icons/index.js | 34 ++------------------ 11 files changed, 138 insertions(+), 75 deletions(-) create mode 100644 components/doc/customicons/fontawesomedoc.js create mode 100644 components/doc/customicons/imagedoc.js create mode 100644 components/doc/customicons/materialdoc.js create mode 100644 components/doc/customicons/svgdoc.js delete mode 100644 components/doc/icons/svgdoc.js create mode 100644 pages/customicons/index.js diff --git a/components/doc/common/doccomponent.js b/components/doc/common/doccomponent.js index 3cd98ca677..66f4119f65 100644 --- a/components/doc/common/doccomponent.js +++ b/components/doc/common/doccomponent.js @@ -26,7 +26,7 @@ export function DocComponent(props) { {props.title} - ) : null}
{tab === 0 ? (
diff --git a/components/doc/customicons/fontawesomedoc.js b/components/doc/customicons/fontawesomedoc.js new file mode 100644 index 0000000000..8786237554 --- /dev/null +++ b/components/doc/customicons/fontawesomedoc.js @@ -0,0 +1,20 @@ +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; + +export function FontAwesomeDoc(props) { + + const code = { + basic: ` +} /> + ` + }; + + return ( + <> + +

Font Awesome is a popular icon library with a wide range of icons.

+ + + + ); +} diff --git a/components/doc/customicons/imagedoc.js b/components/doc/customicons/imagedoc.js new file mode 100644 index 0000000000..d8e31c3d21 --- /dev/null +++ b/components/doc/customicons/imagedoc.js @@ -0,0 +1,20 @@ +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; + +export function ImageDoc(props) { + + const code = { + basic: ` +} /> + ` + }; + + return ( + <> + +

Any time of image can be used as an icon.

+ + + + ); +} diff --git a/components/doc/customicons/materialdoc.js b/components/doc/customicons/materialdoc.js new file mode 100644 index 0000000000..fb9f3fca86 --- /dev/null +++ b/components/doc/customicons/materialdoc.js @@ -0,0 +1,20 @@ +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; + +export function MaterialDoc(props) { + + const code = { + basic: ` +} /> + ` + }; + + return ( + <> + +

Material icons is the official icon library based on Google Material Design.

+ + + + ); +} diff --git a/components/doc/customicons/svgdoc.js b/components/doc/customicons/svgdoc.js new file mode 100644 index 0000000000..24bc22c984 --- /dev/null +++ b/components/doc/customicons/svgdoc.js @@ -0,0 +1,24 @@ +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; + +export function SVGDoc(props) { + + const code = { + basic: ` + + + + +} /> + ` + }; + + return ( + <> + +

Inline SVGs are embedded inside the dom.

+ + + + ); +} diff --git a/components/doc/icons/svgdoc.js b/components/doc/icons/svgdoc.js deleted file mode 100644 index ccc3701ed8..0000000000 --- a/components/doc/icons/svgdoc.js +++ /dev/null @@ -1,32 +0,0 @@ -import Star from 'primeicons/raw-svg/star.svg'; -import { DocSectionCode } from '../common/docsectioncode'; -import { DocSectionText } from '../common/docsectiontext'; - -export function SVGDoc(props) { - const code = { - basic: ` -import Star from 'primeicons/raw-svg/star.svg'; - -export default function SVGDemo() { - return ( - - ) -} - ` - }; - - return ( - <> - -

- Icons are also available in SVG format, using React SVGR library an icon can be imported as SVG as an alternative to font-icon. Note that in SVG imports, - primeicons.css does not need to be included. -

- -
- -
- - - ); -} diff --git a/components/doc/installation/downloaddoc.js b/components/doc/installation/downloaddoc.js index cbcb710d79..6d56bea4e2 100644 --- 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 index 5c40cafafd..7dc24abac9 100644 --- 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 { <>

- Theme, core and icons are the necessary css files of the components, visit the Themes 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 Themes 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.

diff --git a/components/layout/menu.json b/components/layout/menu.json index 77232435c3..c19ac42d4e 100644 --- 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 new file mode 100644 index 0000000000..8508842e27 --- /dev/null +++ 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 ; +}; + +export default ContextMenuDemo; diff --git a/pages/icons/index.js b/pages/icons/index.js index bc21ac8772..ed2568f45b 100644 --- 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 ( -
- - React Icon Library - PrimeReact - - -
-
-
-

Icons

-

- - PrimeIcons - {' '} - is the default icon library of PrimeReact with over 250 open source icons developed by PrimeTek. -

-
- -
- -
-
- ); + return ; }; export default IconsDoc; From 9ec9a8f8bb10bc49dbb1721f6a4f1aa5f410b60f Mon Sep 17 00:00:00 2001 From: habubey Date: Wed, 19 Apr 2023 10:27:36 +0300 Subject: [PATCH 2/2] Fontawesome link refactor & format --- components/doc/common/doccomponent.js | 26 +++++++++++--------- components/doc/customicons/fontawesomedoc.js | 5 ++-- components/doc/customicons/imagedoc.js | 1 - components/doc/customicons/materialdoc.js | 5 ++-- components/doc/customicons/svgdoc.js | 1 - 5 files changed, 20 insertions(+), 18 deletions(-) diff --git a/components/doc/common/doccomponent.js b/components/doc/common/doccomponent.js index 66f4119f65..09dae59e0a 100644 --- a/components/doc/common/doccomponent.js +++ b/components/doc/common/doccomponent.js @@ -26,19 +26,21 @@ export function DocComponent(props) { {props.title} - {!props.hideTabMenu ? (
    -
  • - -
    • + {!props.hideTabMenu ? ( +
      +
    • + +
      • -
    • - -
      • -
    ) : null} +
  • + +
    • +
+ ) : null}
{tab === 0 ? (
diff --git a/components/doc/customicons/fontawesomedoc.js b/components/doc/customicons/fontawesomedoc.js index 8786237554..8652d4c6c4 100644 --- a/components/doc/customicons/fontawesomedoc.js +++ b/components/doc/customicons/fontawesomedoc.js @@ -2,7 +2,6 @@ import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; export function FontAwesomeDoc(props) { - const code = { basic: ` } /> @@ -12,7 +11,9 @@ export function FontAwesomeDoc(props) { return ( <> -

Font Awesome is a popular icon library with a wide range of icons.

+

+ Font Awesome is a popular icon library with a wide range of icons. +

diff --git a/components/doc/customicons/imagedoc.js b/components/doc/customicons/imagedoc.js index d8e31c3d21..13258122d9 100644 --- a/components/doc/customicons/imagedoc.js +++ b/components/doc/customicons/imagedoc.js @@ -2,7 +2,6 @@ import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; export function ImageDoc(props) { - const code = { basic: ` } /> diff --git a/components/doc/customicons/materialdoc.js b/components/doc/customicons/materialdoc.js index fb9f3fca86..0e3143d522 100644 --- a/components/doc/customicons/materialdoc.js +++ b/components/doc/customicons/materialdoc.js @@ -2,7 +2,6 @@ import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; export function MaterialDoc(props) { - const code = { basic: ` } /> @@ -12,7 +11,9 @@ export function MaterialDoc(props) { return ( <> -

Material icons is the official icon library based on Google Material Design.

+

+ Material icons is the official icon library based on Google Material Design. +

diff --git a/components/doc/customicons/svgdoc.js b/components/doc/customicons/svgdoc.js index 24bc22c984..6d6c71b060 100644 --- a/components/doc/customicons/svgdoc.js +++ b/components/doc/customicons/svgdoc.js @@ -2,7 +2,6 @@ import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; export function SVGDoc(props) { - const code = { basic: `