Fix bug with className on Icon overriding

This commit is contained in:
Melvin Valster
2019-07-26 22:39:27 +02:00
parent 0f988f479f
commit 4c8ae806fc
+10 -3
View File
@@ -12,7 +12,14 @@ interface Props {
const NOT_FOUND_ICON = 'inv_misc_questionmark' const NOT_FOUND_ICON = 'inv_misc_questionmark'
export const Icon = React.forwardRef<HTMLDivElement, Props>((props, ref) => { export const Icon = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
const { name: defaultName, size = 'medium', golden = false, children, ...rest } = props const {
name: defaultName,
size = 'medium',
golden = false,
children,
className,
...rest
} = props
const [hasLoadedImage, setLoadedImage] = useState(false) const [hasLoadedImage, setLoadedImage] = useState(false)
const [fadeIn, setFadeIn] = useState(false) const [fadeIn, setFadeIn] = useState(false)
const [name, setName] = useState(defaultName) const [name, setName] = useState(defaultName)
@@ -36,14 +43,14 @@ export const Icon = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
img.src = url img.src = url
}, [url, start]) }, [url, start])
const className = classNames('icon', `icon--${size}`, props.className, { const cn = classNames('icon', `icon--${size}`, className, {
'icon--golden': golden, 'icon--golden': golden,
'icon--loaded': hasLoadedImage, 'icon--loaded': hasLoadedImage,
'icon--fade-in': fadeIn, 'icon--fade-in': fadeIn,
}) })
return ( return (
<div className={className} ref={ref} {...rest}> <div className={cn} ref={ref} {...rest}>
{url && {url &&
<div className="icon__bg" style={{ backgroundImage: `url(${url})` }} /> <div className="icon__bg" style={{ backgroundImage: `url(${url})` }} />
} }