2

Estoy utilizando react para crear un componente que renderiza un svg, he decidido crearlo como componente para poder manipular sus colores.

import React from 'react';
const Home = ({ color}) => (
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
  <rect fill="none" className="a" width="30" height="30"/>
  <path fill={color} lass="b" d="M20.865,443.084l-8.482-8.362-.569-.561a.7.7,0,0,0-.975,0l-9.051,8.923a1.384,1.384,0,0,0-.309.457,1.364,1.364,0,0,0-.1.539A1.41,1.41,0,0,0,2.8,445.451h.933V452.5H18.92v-7.053h.953a1.407,1.407,0,0,0,.994-.407,1.372,1.372,0,0,0,0-1.96Zm-8.309,7.86H10.1v-4.417h2.459Zm4.783-7.053v7.053H13.961v-4.937a.872.872,0,0,0-.878-.866H9.571a.872.872,0,0,0-.878.866v4.937H5.314v-7.053H3.207l8.122-8,.507.5,7.613,7.5Z" transform="translate(3.239 -428.194)"/>
</svg>
);

export default Home;

Mi problema ahora es que necesito utilizar ese componente en un background-image. Hay manera de poder exportar ese componente como svg con sus respectivas modificaciones de color asignadas. 🤔

1 respuesta 1

1

Directamente como background no ,ya que es un componente , exportarlo si que puedes y cambiarle los colores solo importas el componente donde lo necesitas

import React from "react";
const Svg = ({ color }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="30"
    height="30"
    viewBox="0 0 30 30"
  >
    <rect fill="none" className="a" width="30" height="30" />
    <path
      fill={color}
      lass="b"
      d="M20.865,443.084l-8.482-8.362-.569-.561a.7.7,0,0,0-.975,0l-9.051,8.923a1.384,1.384,0,0,0-.309.457,1.364,1.364,0,0,0-.1.539A1.41,1.41,0,0,0,2.8,445.451h.933V452.5H18.92v-7.053h.953a1.407,1.407,0,0,0,.994-.407,1.372,1.372,0,0,0,0-1.96Zm-8.309,7.86H10.1v-4.417h2.459Zm4.783-7.053v7.053H13.961v-4.937a.872.872,0,0,0-.878-.866H9.571a.872.872,0,0,0-.878.866v4.937H5.314v-7.053H3.207l8.122-8,.507.5,7.613,7.5Z"
      transform="translate(3.239 -428.194)"
    />
  </svg>
);
const General = () => {
  return (
    <div className="someClassName" style={{ backgroundImage: Svg }}>
      <Svg color="red" />
    </div>
  );
};
export default General;
1
  • 1
    Si comprendo que esa es la solución, si lo que quisiera renderizar fuera un componente. Pero necesito las propiedades de css como backgroud-repeat entre otras.
    – DoubleM
    Commented el 28 sept. 2021 a las 15:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.