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;