2023-01-11 19:08:14 +01:00
import { downloads as npmDownloads } from '@nodesecure/npm-registry-sdk' ;
2022-08-28 20:12:09 +02:00
import type { NextPage } from 'next' ;
import styled from 'styled-components' ;
import { AvailableFor } from '../components/AvailableFor' ;
import { LargeButton } from '../components/Button' ;
2023-01-11 19:08:14 +01:00
import { REPO , SUPPORT_LINK } from '../lib/constants' ;
2022-08-28 20:12:09 +02:00
import { Explore } from '../components/Explore' ;
2023-01-11 19:08:14 +01:00
import { Footer } from '../components/Footer' ;
2022-08-28 20:12:09 +02:00
import { Header } from '../components/Header' ;
import { HeaderBackground } from '../components/HeaderBackground' ;
import { Icon } from '../components/IconList' ;
2023-01-11 19:08:14 +01:00
import { Layout } from '../components/Layout' ;
import { media } from '../lib/responsive' ;
2022-08-28 20:12:09 +02:00
import { SEO } from '../components/SEO' ;
import { Stat , StatsContainer } from '../components/Stats' ;
2023-10-21 13:07:50 +02:00
import { Text18 , Text15 } from '../components/Typography' ;
2023-01-11 19:08:14 +01:00
import { getHeaderProps } from '../lib/getHeaderProps' ;
2022-08-28 20:12:09 +02:00
import { getAllIcons } from '../lib/getIcons' ;
2023-01-09 21:01:41 +01:00
import { octokit } from '../lib/octokit' ;
2022-08-28 20:12:09 +02:00
interface HomeProps {
allIcons : Icon [ ] ;
currentVersion : string ;
numStars : number ;
numDownloads : number ;
}
2023-10-29 00:33:17 +02:00
2022-08-28 20:12:09 +02:00
const Home : NextPage < HomeProps > = ( {
allIcons ,
currentVersion ,
numStars ,
numDownloads ,
} ) = > {
return (
2023-09-26 00:21:30 +02:00
< >
< Layout >
2023-11-19 10:25:34 +01:00
< SEO
description = {
'Iconoir is the biggest open source icon library that provides a massive selection of high-quality icons, available for free download. No premium options or email sign-up required, free for real. Icons available in SVG, Font, React, React Nativ, and Flutter libraries, Figma and Framer.'
}
/ >
2023-09-26 00:21:30 +02:00
< Header currentVersion = { currentVersion } / >
< HeaderBackground >
< HeroHead >
< HeroText > Say hello < / HeroText >
2024-02-20 14:03:37 +01:00
< HeroTextSecondary >
to your new free icon library .
< / HeroTextSecondary >
2023-09-26 00:21:30 +02:00
< / HeroHead >
< / HeaderBackground >
< HeroDescription >
2024-02-20 14:03:37 +01:00
A high - quality selection of free icons . Your new alternative to Noun
Project , Flaticon , and all Figma resources . Available in SVG , Font ,
React , React Native , Flutter , Figma and Framer .
2023-09-26 00:21:30 +02:00
< / HeroDescription >
< StatsContainer >
< Stat
value = { new Intl . NumberFormat ( 'en-US' ) . format ( allIcons . length ) }
description = {
'icons available in this very moment, and they’ re growing fast!'
}
/ >
< Stat
value = { '100%' }
description = {
'free icons. Iconoir is open source and we’ re ready for your help.'
}
/ >
< Stat
value = { new Intl . NumberFormat ( 'en-US' , {
notation : 'compact' ,
} ) . format ( numDownloads ) }
description = {
'downloads/month on React only. Iconoir also supports React Native, Flutter and CSS.'
}
/ >
< Stat
value = { new Intl . NumberFormat ( 'en-US' , {
notation : 'compact' ,
} ) . format ( numStars ) }
description = {
'people who starred the project on GitHub. Show your support and be one of them.'
}
/ >
< / StatsContainer >
< AvailableFor / >
< SupportContainer >
< LargeButton
as = { 'a' }
href = { SUPPORT_LINK }
target = { '_blank' }
rel = { 'noreferrer' }
>
< span > Donate < / span >
< / LargeButton >
2024-02-10 10:41:49 +01:00
< Supporters >
< Supporter
data - tooltip = "Pierre Olivier Marec"
as = { 'a' }
href = { 'https://github.com/pomarec' }
2024-02-10 12:48:52 +01:00
rel = "noopener sponsored"
2024-02-10 10:41:49 +01:00
src = { 'https://avatars.githubusercontent.com/u/802933?v=4' }
/ >
< Supporter
data - tooltip = "Tuan Hiep"
as = { 'a' }
href = { 'https://opencollective.com/iconoir/contribute' }
2024-02-10 12:48:52 +01:00
rel = "noopener sponsored"
2024-02-10 10:41:49 +01:00
src = {
'https://images.opencollective.com/tuan-hiep/17b1ef2/avatar.png?height=80'
}
/ >
< Supporter
data - tooltip = "Justin Kendrick"
as = { 'a' }
href = { 'https://opencollective.com/iconoir/contribute' }
2024-02-10 12:48:52 +01:00
rel = "noopener sponsored"
2024-02-10 10:41:49 +01:00
src = {
'https://images.opencollective.com/guest-39c79745/avatar.png?height=80'
}
/ >
< Supporter
data - tooltip = "Anon"
as = { 'a' }
href = { 'https://opencollective.com/iconoir/contribute' }
2024-02-10 12:48:52 +01:00
rel = "noopener sponsored"
2024-02-10 10:41:49 +01:00
src = {
'https://opencollective.com/static/images/default-guest-logo.svg'
}
/ >
< Supporter
data - tooltip = "Luca Burgio"
as = { 'a' }
href = { 'https://twitter.com/burgioluca' }
2024-02-10 12:48:52 +01:00
rel = "noopener sponsored"
2024-02-10 10:41:49 +01:00
src = { 'https://lucaburgio.com/images/profile2.png' }
/ >
< / Supporters >
2023-10-21 12:08:03 +02:00
< Text15 >
2023-12-26 12:01:50 +01:00
Join our supporters and help us continue developing Iconoir .
2023-10-21 12:08:03 +02:00
< / Text15 >
2023-09-26 00:21:30 +02:00
< / SupportContainer >
< Explore allIcons = { allIcons } / >
< / Layout >
2022-08-28 20:12:09 +02:00
< Footer / >
2023-09-26 00:21:30 +02:00
< / >
2022-08-28 20:12:09 +02:00
) ;
} ;
2023-03-19 21:23:43 +01:00
export const HeroHead = styled . div `
margin : 60px auto 40 px auto ;
$ { media . md } {
margin : 160px auto 80 px auto ;
}
` ;
2022-08-28 20:12:09 +02:00
export const HeroText = styled . h1 `
font - size : 50px ;
font - weight : 700 ;
2023-03-19 21:23:43 +01:00
color : var ( -- g0 ) ;
margin : 0 auto ;
letter - spacing : - 0.035 em ;
line - height : 1 ;
2022-08-28 20:12:09 +02:00
text - align : center ;
2023-03-19 21:23:43 +01:00
transition : 0.3s ;
2022-08-28 20:12:09 +02:00
$ { media . md } {
font - size : 90px ;
2023-03-19 21:23:43 +01:00
padding : 0 20 px ;
letter - spacing : - 0.045 em ;
- webkit - text - stroke : 2.5px ;
2022-08-28 20:12:09 +02:00
}
2023-03-19 21:23:43 +01:00
& : hover {
2023-09-25 00:31:45 +02:00
transform : scale ( 1.04 ) ;
transition : 0.3s ;
2023-03-19 21:23:43 +01:00
}
` ;
export const HeroTextSecondary = styled ( HeroText ) `
color : var ( -- g4 ) ;
2024-02-20 14:03:37 +01:00
max - width : 1140px ;
2022-08-28 20:12:09 +02:00
` ;
export const HeroDescription = styled ( Text18 ) < { topMargin? : number } > `
display : block ;
max - width : 750px ;
margin : 0 auto ;
text - align : center ;
$ { media . lg } {
margin - top : $ { ( props ) = > props . topMargin || 0 } px ;
}
` ;
2023-12-26 12:07:05 +01:00
2024-02-10 10:41:49 +01:00
const Supporters = styled . div `
display : flex ;
flex - direction : row ;
justify - content : center ;
align - items : center ;
margin - bottom : 8px ! important ;
` ;
const Supporter = styled . div < { src? : string } > `
width : 40px ;
height : 40px ;
border - radius : 50 % ;
background - color : # 000 ;
margin : 0 10 px ;
background - image : url ( $ { ( props ) = > props . src } ) ;
background - size : contain ;
background - repeat : no - repeat ;
background - position : center ;
border : 2px solid white ;
margin : 0 - 4 px ;
transition : 0.2s ;
& : hover {
scale : 1.1 ;
transition : 0.2s ;
& : before {
content : attr ( data - tooltip ) ;
position : absolute ;
bottom : 100 % ;
left : 50 % ;
transform : translateX ( - 50 % ) ;
background - color : black ;
color : white ;
padding : 5px ;
border - radius : 3px ;
white - space : nowrap ;
font - size : 12px ;
}
}
` ;
2022-08-28 20:12:09 +02:00
const SupportContainer = styled . div `
text - align : center ;
> * {
margin : 0 auto ;
max - width : 750px ;
}
> : not ( : last - child ) {
margin - bottom : 30px ;
}
margin - bottom : 50px ;
$ { media . sm } {
2023-03-19 21:23:43 +01:00
margin - bottom : 110px ;
2022-08-28 20:12:09 +02:00
}
` ;
export default Home ;
export async function getStaticProps() {
const headerProps = getHeaderProps ( ) ;
2023-01-11 19:08:14 +01:00
const {
data : { stargazers_count : numStars } ,
} = await octokit . rest . repos . get ( {
2023-01-09 21:01:41 +01:00
. . . REPO ,
} ) ;
2023-01-11 19:08:14 +01:00
if ( ! numStars ) throw new Error ( 'Could not find GitHub stars' ) ;
const { downloads : numDownloads } = await npmDownloads (
'iconoir-react' ,
2023-09-25 00:31:45 +02:00
'last-month' ,
2023-01-11 19:08:14 +01:00
) ;
2022-08-28 20:12:09 +02:00
if ( ! numDownloads ) throw new Error ( 'Could not find NPM downloads' ) ;
2023-01-11 19:08:14 +01:00
2022-08-28 20:12:09 +02:00
return {
props : {
. . . headerProps ,
allIcons : await getAllIcons ( ) ,
2023-01-11 19:08:14 +01:00
numStars ,
2022-08-28 20:12:09 +02:00
numDownloads ,
} ,
} ;
}