SVG Component color not changing on hover
hey folks this is my svg component
and I'm using it like this
and css used in this component is
but the problem is the color of svg is not changing on hover
import React from 'react';
export const ModerationSVG = () => {
return (
<React.Fragment>
<svg sx={{height: `${height}`, width: `${width}`, color: `${color}`}}>
<path d="M20 4.512v6.445c0 .401-.148.786-.41 1.07-.264.283-.62.442-.993.442H5.403c-.372 0-.73-.16-.992-.443A1.574 1.574 0 014 10.957V4.512c0-.4.148-.786.41-1.07.264-.283.62-.442.993-.442h13.281c.357.024.692.194.936.475.245.28.38.652.38 1.037z" fill="#A6AAAD" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fillOpacity="0.16"></path>
<path d="M10.897 12.47h2.235v7.3c.004.161-.023.322-.078.473a1.21 1.21 0 01-.244.402 1.11 1.11 0 01-.371.267 1.073 1.073 0 01-1.225-.263 1.249 1.249 0 01-.326-.848v-7.3l.01-.032z" fill="#A6AAAD" stroke="currentColor" data-stroke="main" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fillOpacity="0.16"></path>
</svg>
</React.Fragment>
)
}import React from 'react';
export const ModerationSVG = () => {
return (
<React.Fragment>
<svg sx={{height: `${height}`, width: `${width}`, color: `${color}`}}>
<path d="M20 4.512v6.445c0 .401-.148.786-.41 1.07-.264.283-.62.442-.993.442H5.403c-.372 0-.73-.16-.992-.443A1.574 1.574 0 014 10.957V4.512c0-.4.148-.786.41-1.07.264-.283.62-.442.993-.442h13.281c.357.024.692.194.936.475.245.28.38.652.38 1.037z" fill="#A6AAAD" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fillOpacity="0.16"></path>
<path d="M10.897 12.47h2.235v7.3c.004.161-.023.322-.078.473a1.21 1.21 0 01-.244.402 1.11 1.11 0 01-.371.267 1.073 1.073 0 01-1.225-.263 1.249 1.249 0 01-.326-.848v-7.3l.01-.032z" fill="#A6AAAD" stroke="currentColor" data-stroke="main" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fillOpacity="0.16"></path>
</svg>
</React.Fragment>
)
}and I'm using it like this
<div className={styles.commonSettingsContent}><UtilitiesSVG />Dashboard</div><div className={styles.commonSettingsContent}><UtilitiesSVG />Dashboard</div>and css used in this component is
.commonSettingsContent {
display: flex;
align-items: center;
background: none;
color: grey;
font-family: Arvo, Helvetica, serif;
font-size: 1.6rem;
gap: 1rem;
}
.commonSettingsContent:hover{
color: white;
}.commonSettingsContent {
display: flex;
align-items: center;
background: none;
color: grey;
font-family: Arvo, Helvetica, serif;
font-size: 1.6rem;
gap: 1rem;
}
.commonSettingsContent:hover{
color: white;
}but the problem is the color of svg is not changing on hover
