How can I change icon inside button on hover using chakra-ui and vanilla-extract?

Question

• I am using nextjs13, chakra-ui, and vanilla-extract

Does anyone know how to change icon and text inside button on hover, using chakra-ui and vanilla-extract?

I have a button like this:

<Button >
 <svg width="16" height="18">
  <use xlinkHref={path/to/iconA}></use>
 </svg>
{!isFollowing ? <span>follow</span> : <span>following</span>}
</Button>

I want to show 'follow' button with icon A if logged in user is not following the user.
I want to show "following" with icon A if logged in user is following the user.

When I hover the button(and logged in user is currently following the user), I want to change button text: from "following" to "unfollow" with red text color and icon: from iconA to iconB.

I could change the text color by adding css to span: <span className={textCss}>following</span>

const textCss = style({
":hover":{
color:"red"
}})

but not sure how to change the text and icon.

Answer 1

I solved issue by adding 'isHover' as state variable.

const [isHover, setIsHover] = useState(false);

<Button onMouseEnter={() => setIsHover(true)}
        onMouseLeave={() => setIsHover(false)}>
 <svg width="16" height="18">
  <use xlinkHref={ !isFollowing && isHover? path/to/iconB: path/to/iconA}> 
  </use>
 </svg>
 {!isFollowing ? <span>follow</span> : <span>following</span>}
</Button>

Answer 2

You could do the following

import * as styles from './styles.css'
<Button className={styles.button}>
 <svg width="16" height="18">
  <use xlinkHref={isFollowing ? 'path/to/iconA' : 'path/to/iconAB'}></use>
 </svg>
<span className={styles.buttonText}>{isFollowing ? 'unfollow' : 'follow'}</span>
</Button>

and for your vanilla extract css file you could do something like this

export const button = style({})
export const buttonText = style({
    selectors: {
        `${button}:hover &`: { 
             color: 'red'
         }
     }
})

Vanilla extract provide some good documentation that can be found here.

Answer 3

If you simply need to change the color of the existing icon, you can change the SVG file to have fill="curentColor" throughout that file, and then using svg:hover { fill: red; } should work for you.