I have a navigation bar and there are several images for navigation. There are 4 of them for any one of them for scaling based on viewports. It's as follows:
icons.ts
import dashboardIcon from 'assets/icons/dashboard_icon.png'
import dashboardIcon2x from 'assets/icons/[email protected]'
import dashboardIcon3x from 'assets/icons/[email protected]'
import dashboardIcon4x from 'assets/icons/[email protected]'
dashboardIcon: {
src: dashboardIcon,
srcset: `${dashboardIcon4x} 4x,${dashboardIcon3x} 3x,${dashboardIcon2x} 2x, ${dashboardIcon} 1x`,
},
CustomIcon.tsx
import React from 'react'
import styled from 'styled-components'
import { FixMeLater } from 'types'
import FilePicker from 'components/button/FilePicker'
export interface IconSourceType {
src: string
srcset: string
}
interface IIconProps {
id?: string
source: IconSourceType
className?: string
isFilePicker?: boolean
getInputProps?: FixMeLater
onClick?: (e: React.MouseEvent<HTMLElement>) => void
onMouseDown?: (e: React.MouseEvent<HTMLElement>) => void
onMouseUp?: (e: React.MouseEvent<HTMLElement>) => void
}
const CustomIcon = ({
id = '',
source,
className,
isFilePicker,
getInputProps,
onClick,
onMouseDown,
onMouseUp,
}: IIconProps) => {
return (
<>
<IconWrapper
id={id}
onClick={onClick}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
className={className}
src={source.src}
srcSet={source.srcset}
clickable={!!onClick || !!onMouseUp}
/>
{isFilePicker && <FilePicker getInputProps={getInputProps} icon />}
</>
)
}
export default CustomIcon
const IconWrapper = styled.img`
cursor: ${({ clickable }: { clickable: boolean }) => (clickable ? 'pointer' : 'unset')};
`
usage in NavigationBar.tsx:
...
<CustomIcon source={icons.dashboardIcon} />
...
But this doesn't seem to work for safari even though it's working properly on any browser except safari. Any help is appreciated, thanks in advance.