Estoy tratando de apuntar a la propiedad de relleno de mi svg a través de css en componentes con estilo, pero sin éxito.
Este es mi svg
<svg width="65" height="19" viewBox="0 0 65 19" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.8667V13.7334H6.83075H13.6615V6.8667V0H6.83075H0V6.8667ZM34.2257 6.8667V13.7334H41.0564H47.8872V6.8667V0H41.0564H34.2257V6.8667ZM9.47623 4.36809L9.4552 4.92533L8.50249 4.94546L7.54978 4.96542V7.44408V9.92256H6.83075H6.11173V7.44408V4.96542L5.15902 4.94546L4.20631 4.92533L4.18527 4.36809L4.16424 3.81084H6.83075H9.49726L9.47623 4.36809ZM41.9414 3.91815C45.0675 4.73227 45.0675 9.00113 41.9414 9.81525C41.6333 9.8956 41.1073 9.92256 39.8549 9.92256H38.1803V6.8667V3.81084H39.8549C41.1073 3.81084 41.6333 3.8378 41.9414 3.91815ZM17.1128 11.1809V18.0476H23.9436H30.7743V11.1809V4.31416H23.9436H17.1128V11.1809ZM51.3385 11.1809V18.0476H58.1693H65V11.1809V4.31416H58.1693H51.3385V11.1809ZM39.6184 6.8667V8.77212H40.4722C42.1033 8.77212 42.7981 8.20301 42.7981 6.8667C42.7981 5.53039 42.1033 4.96128 40.4722 4.96128H39.6184V6.8667ZM24.8519 8.15304C26.4692 8.58374 27.4607 10.08 27.1943 11.6878C26.6101 15.2135 21.1343 15.1689 20.6341 11.6344C20.3085 9.33458 22.4991 7.52659 24.8519 8.15304ZM59.0776 8.15304C60.6948 8.58374 61.6864 10.08 61.42 11.6878C60.8358 15.2135 55.36 15.1689 54.8598 11.6344C54.5342 9.33458 56.7247 7.52659 59.0776 8.15304ZM23.3477 9.37772C22.5318 9.5972 22.0475 10.3193 22.0862 11.2585C22.1877 13.7233 25.7723 13.6477 25.7723 11.1809C25.7723 9.86019 24.652 9.02701 23.3477 9.37772ZM57.5734 9.37772C56.7574 9.5972 56.2732 10.3193 56.3118 11.2585C56.4134 13.7233 59.9979 13.6477 59.9979 11.1809C59.9979 9.86019 58.8777 9.02701 57.5734 9.37772Z" fill="#1F1F2A"/> </svg>Así es como lo estoy usando:
export const Logo = styled.svg` background-image: url('./logo.svg'); background-repeat: no-repeat; background-size: contain; height: 2em; & path { fill: #a4a4bc; } @media ${devices.desktop}{ height: 3.4em; } `Así es como lo importo y lo uso
import { Logo } from '../styles/pages/home' <LogoWrapper> <Logo /> <legend>{formatter(homeContent[locale].title)}</legend> </LogoWrapper>Probé otras variaciones para cambiar el relleno, ninguna de las cuales funcionó. ¿Algunas ideas?
Debe eliminar las propiedades de fondo como la imagen de fondo de los estilos. porque svg es un vector y no es necesario volver a configurar la imagen, excepto en situaciones especiales.
Puede extender el componente LogoWrapper para diseñar la imagen svg como se muestra a continuación:
export const StyledLogoWrapper = styled(LogoWrapper)` svg { height: 2em; & path { fill: #a4a4bc; } @media ${devices.desktop}{ height: 3.4em; } } `Usando react-inlinesvg logro que funcione
import SVG from 'react-inlinesvg' export const Logo = styled(SVG)` & path { fill: #a4a4bc; } @media ${devices.desktop}{ height: 3.4em; } `