Estaba trabajando para cargar la imagen del archivo svg (Gráficos vectoriales escalables) en React. Probé algunas formas de solución y no recibí ningún resultado. Esas son soluciones que se han probado:
<img src="../../assets/icons/branch.svg" alt="branch" />En primer lugar, estaba leyendo muchos artículos y lo vi de esta manera: Establecer fuente directamente en svg. Pero eso no funcionó.
<i className="branch">:</i> .branch { background-image: url('../../assets/icons/branch.svg'); }En segundo lugar, intenté usar la imagen de fondo y eso no funcionó.
<object type="image/svg+xml" data="../../assets/icons/branch.svg" aria-label="branch"> Image </object>En tercer lugar, intenté usar para objetar y eso no funcionó.
Cuando estaba tratando de usar como un svg en línea, funciona. Pero no me gusta, quiero usar ese svg como externo.
Intenté esas formas y solo funciona la forma en línea. ¿Alguien puede ayudarme a usar ese svg como externo?
también puedes probar esto
import { ReactComponent as Branch } from "../../assets/icons/branch.svg";
y luego usarlo como
<Branch/>
o
import Branch from "../../assets/icons/branch.svg";
background-image: url(${Branch});