changed icon library and minor css changes

Author: nmayur

BLOG_CONSTANTS/_BLOG_SETUP.tsx

@@ -1,5 +1,6 @@
 import { LogoType, NavbarType } from "../src/shared/enums";
 import { IAuthor, iSEO } from "../src/shared/interfaces";
+import { AiFillYoutube, AiFillGithub, AiOutlineTwitter, AiFillLinkedin, AiFillInstagram, AiFillFacebook } from "react-icons/ai";
 
 /**
  * EXAMPLE AUTHOR
@@ -9,13 +10,13 @@ import { IAuthor, iSEO } from "../src/shared/interfaces";
  designation: "Work Designation",
  bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  profilePic: "",
- social: [
+  social: [
  {
- icon: <i className="icon-2-Z font-32" />,
+ icon: <AiFillGithub />,
  link: 'https://github.com/'
  },
  {
- icon: <i className="icon-I font-36" />,
+ icon: <AiFillLinkedin />,
  link: 'https://www.linkedin.com/'
  },
  ]
@@ -26,14 +27,14 @@ export const MAYUR: IAuthor = {
  name: "Mayur Nalwala",
  designation: "Software Engineer",
  bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
- profilePic: "https://robohash.org/1f2fb9642c825da07a83e5cac078e838?set=set3&bgset=&size=200x200",
+ profilePic: "",
  social: [
  {
- icon: <i className="icon-2-Z font-32" />,
+ icon: <AiFillGithub />,
  link: 'https://github.com/nmayur'
  },
  {
- icon: <i className="icon-I font-36" />,
+ icon: <AiFillLinkedin />,
  link: 'https://www.linkedin.com/in/mayur-nalwala/'
  },
  ]
@@ -43,14 +44,14 @@ export const RUPALI: IAuthor = {
  name: "Rupali Yadav",
  designation: "IT Analyst",
  bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
- profilePic: "https://gravatar.com/avatar/8fab154171e299e9b8fe24305267a8fd?s=200&d=robohash&r=r",
+ profilePic: "",
  social: [
  {
- icon: <i className="icon-2-Z font-32" />,
+ icon: <AiFillGithub />,
  link: 'https://github.com/rupali-yadav'
  },
  {
- icon: <i className="icon-I font-36" />,
+ icon: <AiFillLinkedin />,
  link: 'https://www.linkedin.com/in/rupali-yadav-087bb4112/'
  },
  ]
@@ -142,15 +143,15 @@ export const PRIMARY_NAV = {
  socials: [
  {
  link: 'https://www.facebook.com/',
- icon: <i className="icon-F" />
+ icon: <AiFillFacebook />
  },
  {
  link: 'https://www.instagram.com/',
- icon: <i className="icon-2-I" />
+ icon: <AiFillInstagram />
  },
  {
  link: 'https://twitter.com/WebExpe',
- icon: <i className="icon-L" />
+ icon: <AiOutlineTwitter />
  },
  ]
 }

package.json

@@ -11,7 +11,6 @@
  "out": "next build && next export"
  },
  "dependencies": {
- "@heroicons/react": "^1.0.6",
  "@uiw/react-textarea-code-editor": "^1.4.4",
  "css-loader": "^6.7.1",
  "next": "12.1.0",
@@ -22,6 +21,8 @@
  "prismjs": "^1.28.0",
  "react": "17.0.2",
  "react-dom": "17.0.2",
+ "react-icons": "^4.4.0",
+ "react-medium-image-zoom": "^5.0.1",
  "sass": "^1.52.1",
  "sass-loader": "^13.0.0",
  "style-loader": "^3.3.1",

pages/_app.tsx

@@ -1,5 +1,4 @@
 import '../src/styles/globals.scss'
-import '../src/assets/fontCss/icofont.css'
 
 import type { AppProps } from 'next/app'
 import Head from 'next/head'
@@ -13,6 +12,7 @@ import { CREATE_SEO_CONFIG } from '../src/utils/utils';
 import { ThemeProvider } from 'next-themes'
 
 import "@uiw/react-textarea-code-editor/dist.css";
+import 'react-medium-image-zoom/dist/styles.css';
 
 
 function MyApp({ Component, pageProps }: AppProps) {

pages/about-us.tsx

@@ -18,7 +18,7 @@ const AboutUs = () => {
  <a href="https://webexpe.com/" target="_blank" rel="noopener noreferrer" className="block md:w-[15%] w-[50%] ">
  <Image src="/public/images/YT Logo.png" size={ImageSize.DEFAULT} alt="webexpe.com" className="rounded-lg overflow-hidden" />
  </a>
- <Text title className='mb-5 mt-10 text-blue-600'>
+ <Text title className='mb-5 mt-10 dark:text-sky-400 text-sky-600'>
  Hi we are WebExpe.
  </Text>
  <Text subtitle className='text-xl mb-5'>

pages/blog/tutorial/how-to-write-your-first-article.tsx

@@ -78,7 +78,7 @@ const Article = () => {
  </li>
  <li>
  <b>thumbnail : </b>
- Save the image file in public-images folder and paste the image path.  This will be displayed in article cards on home page
+ Save the image file in public-images folder and paste the image path. This will be displayed in article cards on home page. For thumpbails the recommended size is <b>540x300px</b>.
  </li>
  <li>
  <b>shortIntro : </b>

pages/icons.tsx

@@ -1,9 +1,50 @@
 /**These are necessary imports / components for the page */
-import { ImageSize, TextAlign, ListType } from "../src/shared/enums";
-import { PageLayout, Text, List, Image, LinkTo, Seperator, Slider } from "../src/components";
-import { iconsArray } from "../src/constants/appConstants";
-import { combineClasses } from "../src/utils/utils";
+import { PageLayout, Text, LinkTo, Seperator, Image } from "../src/components";
+import CodeBlock from "../src/components/CodeBlock";
 import { iSEO } from "../src/shared/interfaces";
+import { AiFillYoutube, AiFillTwitterCircle } from "react-icons/ai";
+import { BiAbacus, BiAdjust } from "react-icons/bi";
+
+const HowToUseIcons = `
+// import icons from react-icons
+ import { ..., AiFillYoutube } from "react-icons/ai";
+ const Article = () => {
+ return (
+ <AiFillYoutube />
+ {/*to change size*/}
+ <AiFillYoutube className="text-[50px]" />
+ {/*to change color*/}
+ <AiFillYoutube className="text-[#631E9E]" />
+ {/*to change color using tailwind css classes*/}
+ <AiFillYoutube className="text-blue-600" />
+ {/*to give paddings and margins*/}
+ <AiFillYoutube className="ml-[15px] mr-[20px] p-[20px]" />
+ {/*to use inline i.e one after other in a line*/}
+ <AiFillYoutube className="inline-block" />
+ )
+ }
+
+ export default Article;
+`
+
+const HowToUseDiffGroupIcons = `
+ // icons from Ant Icons
+ import { AiFillYoutube } from "react-icons/ai";
+ // icons from BoxIcons
+ import { BiAbacus, BiAdjust } from "react-icons/bi";
+ const Article = () => {
+ return (
+ {/*icons from Ant Icons*/}
+ <AiFillYoutube />
+ <AiFillTwitterCircle />
+ {/*icons from BoxIcons*/}
+ <BiAbacus />
+ <BiAdjust />
+ )
+ }
+
+ export default Article;
+`
 
 const Icons = () => {
  const PAGE_SEO: iSEO = {
@@ -17,28 +58,42 @@ const Icons = () => {
  <Text title className="text-3xl">
  Icons
  </Text>
- <p className="mb-10 mt-5">
- To use these icons, simply copy the text below the icon and paste in className in {"<i />"} tag, and to change the size and color of the icon use font attributes like text-sm or text-[12px] and text-blue-800 in className.
-
- <br /> <br />
- <b>Example:</b> {' <i className="icon-A text-[80px] text-blue-800" />'}
- <br />
- <i className="icon-A text-[80px] text-blue-800" />
+ <p className="my-5">
+ We have used <b><LinkTo href="https://react-icons.github.io/react-icons">ReactIcons</LinkTo></b> in this project, so you use the icons please check the <u><LinkTo href="https://react-icons.github.io/react-icons">official website</LinkTo></u>.
  </p>
  <hr />
- <div className="flex flex-wrap justify-around">
- {
- iconsArray.map((icon, i) => {
- return (
- <div key={icon + i} className="flex flex-col text-center md:px-[46px] px-[30px] py-3" style={{ flexShrink: 0, minWidth: "100px" }} >
-
- <i className={combineClasses(icon, 'text-[80px]')} />
- <p className="font-light text-sm mt-3">{icon}</p>
- </div>
- );
- })
- }
+ <Text subtitle className="mt-5">
+ How to use
+ </Text>
+ <CodeBlock code={HowToUseIcons} className="my-5" />
+ <Text subtitle className="mt-5">
+ Demo
+ </Text>
+ The above code block will show you the following icon. <br />
+ <AiFillYoutube />
+ {/*to change size*/}
+ <AiFillYoutube className="text-[50px]" />
+ {/*to change color*/}
+ <AiFillYoutube className="text-[#631E9E]" />
+ {/*to change color using tailwind css classes*/}
+ <AiFillYoutube className="text-blue-600" />
+ <Seperator dots />
+ <Text subtitle className="mt-5">
+ How to use different group/family of icons in ReactIcons,
+ </Text>
+ In react icons we have around 22 icons groups or types like <b>"Ant design icons, Bootstrap icons, Boxicons . . ."</b> etc. When you click on the sidebar list button we se a proper import statement and list of all icons in the icon group.
+ <Image src="/public/imp_assets/tutorials/reacticons.png" alt="webexpe.com" caption="ReactIcons website screenshot" />
+ here we can see each icons in <b>BoxIcons</b> there is a <b>"Bi"</b> prefix i.e each icon in <b>BoxIcons</b> start with a <b>"Bi"</b> like <b>"BiAbacus, BiAdjust . . ."</b> etc. so when want to use any icon from BoxIcons you have to import the icon as <b>{'import { IconName } from "react-icons/bi";'}</b>
+ <CodeBlock code={HowToUseDiffGroupIcons} className="my-5" />
+ <div className="text-4xl mb-2">
+ <AiFillYoutube className="inline-block mr-3" />
+ <AiFillTwitterCircle className="inline-block mr-3" />
+ {/*icons from BoxIcons*/}
+ <BiAbacus className="inline-block mr-3" />
+ <BiAdjust className="inline-block " />
  </div>
+
+ <b>Note* :</b> when you search any icon using the search option in react icons, all the icons from different groups will be displayed mixed so to know from where to import the icons see the first 2 letters of the icon name then import that icon group.
  <div className="px-4 py-3 dark:bg-slate-800 bg-blue-200 rounded my-5">
  <Text p className="!text-lg leading-relaxed mb-0">
  For any any queries related to this project / template feel free to connect with us at <u>webexpe13@gmail.com</u>.

pages/index.tsx

@@ -37,7 +37,7 @@ const Home = () => {
  </div>
  </div>
  </section>
- <div className="container mx-auto md:px-[15px] px-0">
+ <div className="container mx-auto lg:px-[15px] px-0">
  <div className={'flex flex-wrap'}>
  <Text subtitle className="mb-5 md:!text-4xl text-3xl w-full px-3 !font-medium">
  Featured Articles