SVG Component color not changing on hover

hey folks this is my svg component

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

3 Replies

Unknown User•3y ago

Message Not Public

b1mind•3y ago

fill wont work with stroke colors, color is correct because they are using currentColor for the stroke. fills look to be hard coded and those wont change color though.

b1mind•3y ago

https://codepen.io/b1mind/pen/vYpvzbo

Brent Morton

CodePen

SVG custom props with fallback

...

Gaming

Programming

SVG Component color not changing on hover