Estoy tratando de crear un efecto de desplazamiento en un ícono svg usando Componentes con estilo. Obtengo el resultado que quiero cuando uso un svg de la biblioteca de iconos de reacción, sin embargo, el desplazamiento no funciona para los svg personalizados que vinculo desde una carpeta local:

 import React from 'react'; import * as f from './FooterElements'; import * as i from 'react-icons/fa'; import { ReactComponent as IconTwitter } from '../../Images/twitter.svg'; <f.SocialIconLink href='https://www.twitter.com/test/' target='_blank' aria-label='Twitter' > <i.FaTwitter/> </f.SocialIconLink> <f.SocialIconLink href='https://www.twitter.com/test/' target='_blank' aria-label='Twitter' > <IconTwitter/> </f.SocialIconLink>

El hover funciona en i.FaTwitter pero no en IconTwitter. ¿Alguna idea de por qué podría pasar eso?

El componente SocialIconLink que contiene el efecto de desplazamiento:

 export const SocialIconLink = styled.a` color: #fff; font-size: 24px; &:hover { color: #F59AA6; transition: 0.3s ease-out; } `;