Skip to content
This repository has been archived by the owner on Aug 7, 2024. It is now read-only.

Commit

Permalink
feat: replace primeicons with react-icons (#823)
Browse files Browse the repository at this point in the history
* installed react-icons

* successfully moved to react-icons from prime icons

* Dollar Icon Added

* graduation hat icon added
  • Loading branch information
Rupesh-1302 authored Dec 20, 2021
1 parent 7e167b2 commit 0eeb9da
Showing 10 changed files with 173 additions and 26,737 deletions.
26,776 changes: 50 additions & 26,726 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -8,10 +8,10 @@
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primereact": "^6.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-router-dom": "^5.3.0",
"react-scripts": "^4.0.3",
"react-transition-group": "^4.4.2",
@@ -86,4 +86,4 @@
"bugs": {
"url": "https://github.com/EddieHubCommunity/LinkFree/issues"
}
}
}
1 change: 0 additions & 1 deletion src/App.js
Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

import 'primereact/resources/themes/saga-blue/theme.css'
import 'primereact/resources/primereact.min.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css'

import Footer from './Components/Footer'
3 changes: 2 additions & 1 deletion src/Components/Footer.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { FaGithub } from 'react-icons/fa'

function Footer() {
const [version, setVersion] = useState('')
@@ -23,7 +24,7 @@ function Footer() {
className="p-mr-2"
aria-label="LinkFree repository on GitHub"
>
<i className="pi pi-github" aria-hidden="true"></i>
<FaGithub size={16} />
</Link>
<span>v{version}</span>
</p>
88 changes: 88 additions & 0 deletions src/Components/Icons/GetIcons.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import React from 'react'
import PropTypes from 'prop-types'
import {
FaFacebook,
FaLink,
FaAndroid,
FaApple,
FaDiscord,
FaGithub,
FaMicrosoft,
FaPaypal,
FaSlack,
FaTwitter,
FaVimeo,
FaYoutube,
FaEnvelope,
FaInstagram,
FaLinkedin,
FaTwitch,
FaDev,
FaGlobe,
FaBook,
FaDollarSign,
FaGraduationCap,
} from 'react-icons/fa'
import { SiCodewars, SiHashnode } from 'react-icons/si'
import { RiSendPlaneFill } from 'react-icons/ri'

function GetIcons({ iconName }) {
switch (iconName) {
case 'facebook':
return <FaFacebook />
case 'link':
return <FaLink />
case 'android':
return <FaAndroid />
case 'apple':
return <FaApple />
case 'discord':
return <FaDiscord />
case 'github':
return <FaGithub />
case 'microsoft':
return <FaMicrosoft />
case 'paypal':
return <FaPaypal />
case 'slack':
return <FaSlack />
case 'twitter':
return <FaTwitter />
case 'vimeo':
return <FaVimeo />
case 'youtube':
return <FaYoutube />
case 'envelope':
return <FaEnvelope />
case 'instagram':
return <FaInstagram />
case 'linkedin':
return <FaLinkedin />
case 'twitch':
return <FaTwitch />
case 'dev.to':
return <FaDev />
case 'globe':
return <FaGlobe />
case 'book':
return <FaBook />
case 'send':
return <RiSendPlaneFill />
case 'codewars':
return <SiCodewars />
case 'hashnode':
return <SiHashnode />
case 'dollar':
return <FaDollarSign />
case 'graduation-hat':
return <FaGraduationCap />
default:
return <FaGlobe />
}
}

GetIcons.propTypes = {
iconName: PropTypes.string,
}

export default GetIcons
9 changes: 7 additions & 2 deletions src/Components/Links.css
Original file line number Diff line number Diff line change
@@ -13,18 +13,23 @@
}

.p-button.p-button-outlined span,
.p-button.p-button-outlined i {
.p-button.p-button-outlined .buttonIcon {
pointer-events: none;
}

.p-button-outlined:hover > i {
.p-button-outlined:hover > .buttonIcon {
color: #fff;
}

.p-button-outlined:hover > span {
color: #fff;
}

.buttonIcon {
margin-left: 0.5rem;
margin-right: 0.5rem;
}

.p-button-outlined span {
overflow: hidden;
text-overflow: ellipsis;
18 changes: 16 additions & 2 deletions src/Components/Links.js
Original file line number Diff line number Diff line change
@@ -3,6 +3,8 @@ import './Links.css'
import React from 'react'
import PropTypes from 'prop-types'
import { Button } from 'primereact/button'
import GetIcons from './Icons/GetIcons'
import { IconContext } from 'react-icons/lib'
import linksConfig from '../config/links.json'

function Links({ links }) {
@@ -31,7 +33,13 @@ function Links({ links }) {
role="link"
onClick={() => window.open(link.url, '_blank')}
>
<i className={`pi pi-${link.icon} p-px-2`}></i>
<IconContext.Provider
value={{
className: 'buttonIcon',
}}
>
<GetIcons iconName={link.icon} />
</IconContext.Provider>
<span className="p-px-3">{link.name}</span>
</Button>
))}
@@ -47,7 +55,13 @@ function Links({ links }) {
role="link"
onClick={() => window.open(link.url, '_blank')}
>
<i className={`pi pi-${link.icon} p-px-2`}></i>
<IconContext.Provider
value={{
className: 'buttonIcon',
}}
>
<GetIcons iconName={link.icon} />
</IconContext.Provider>
<span className="p-px-3">{link.name}</span>
</Button>
))}
3 changes: 2 additions & 1 deletion src/Components/Milestones.js
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types'
import { Button } from 'primereact/button'
import { Card } from 'primereact/card'
import { Timeline } from 'primereact/timeline'
import GetIcons from './Icons/GetIcons'

function Milestones({ milestones }) {
const goToLinkHandle = (url) => {
@@ -17,7 +18,7 @@ function Milestones({ milestones }) {
className="custom-marker p-shadow-2"
style={{ backgroundColor: milestone.color }}
>
<i className={`pi pi-${milestone.icon} p-p-2`}></i>
<GetIcons iconName={milestone.icon} />
</span>
)

4 changes: 3 additions & 1 deletion src/Components/Navbar.js
Original file line number Diff line number Diff line change
@@ -8,6 +8,8 @@ import { Link } from 'react-router-dom'

import { Menubar } from 'primereact/menubar'

import { FaGithub } from 'react-icons/fa'

function Navbar({ items, start, end }) {
const [version, setVersion] = useState('')

@@ -30,7 +32,7 @@ function Navbar({ items, start, end }) {
className="p-mr-2"
aria-label="LinkFree repository on GitHub"
>
<i className="pi pi-github" aria-hidden="true"></i>
<FaGithub size={16} />
</Link>

<div>v{version}</div>
4 changes: 3 additions & 1 deletion src/config/links.json
Original file line number Diff line number Diff line change
@@ -21,6 +21,8 @@
"hashnode": "#2962FF",
"dev.to": "#000000",
"globe": "#808080",
"book": "#2196F3"
"book": "#2196F3",
"dollar": "#808080",
"graduation-hat": "#808080"
}
}

0 comments on commit 0eeb9da

Please sign in to comment.