diff --git a/components/doc/common/doccomponent.js b/components/doc/common/doccomponent.js index 3cd98ca677..09dae59e0a 100644 --- a/components/doc/common/doccomponent.js +++ b/components/doc/common/doccomponent.js @@ -26,19 +26,21 @@ 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..8652d4c6c4 --- /dev/null +++ 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: ` +} /> + ` + }; + + 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..13258122d9 --- /dev/null +++ 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: ` +} /> + ` + }; + + 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..0e3143d522 --- /dev/null +++ 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: ` +} /> + ` + }; + + 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..6d6c71b060 --- /dev/null +++ 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: ` + + + + +} /> + ` + }; + + 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;