import React , { useEffect } from 'react' ; import { Helmet } from 'react-helmet' ; import useSafeState from '@toptal/picasso/utils/use-safe-state' ; import unsafeErrorLog from '@toptal/picasso/utils/unsafe-error-log' ; import { getIcons } from './icons' ; import { EnvironmentType } from '../types' ; import { useAppConfig } from '../Picasso/RootContext' ; export interface Props { /** Choose an icon color based on this variable */ environment ? : EnvironmentType < 'test' | 'temploy' > ; } export const Favicon = ( { environment } ) => { const [ icons , setIcons ] = useSafeState < { icon16 ? : string ; icon32 ? : string ; icon180 ? : string ; } > ( { } ) ; const { environment : configEnvironment } = useAppConfig ( ) ; const resolvedEnvironment = environment || configEnvironment ; useEffect ( ( ) => { if ( resolvedEnvironment === 'test' ) { return ; } const loadIcons = async ( ) => { try { const loadedIcons = await getIcons ( resolvedEnvironment as EnvironmentType ) ; setIcons ( loadedIcons ) ; } catch { unsafeErrorLog ( 'favicons were not loaded properly for environment' + resolvedEnvironment ) ; } } ; loadIcons ( ) ; } , [ resolvedEnvironment , setIcons ] ) ; if ( resolvedEnvironment === 'test' ) { return null ; } const { icon16 , icon32 , icon180 } = icons ; return ( < Helmet > < link rel = 'apple-touch-icon' sizes = '180x180' href = { icon180 } / > < link rel = 'icon' type = 'image/png' sizes = '32x32' href = { icon32 } / > < link rel = 'icon' type = 'image/png' sizes = '16x16' href = { icon16 } / > < /Helmet>); } ; Favicon . defaultProps = { } ; Favicon . displayName = 'Favicon' ; export default Favicon ;