I haven't installed ion icons for React rather imported it into my index.html this has been working so far with icons from ion icons found here however I do know that you can have custom svgs by supplying an src attribute to the ion-icon stage like so
<ion-icon scr={'./Resources/Sat 2.svg'}></ion-icon>
so importing the SVG into react should be like so
import img from "./Resources/Sat 2.svg";
therefore the code should look like
<ion-icon scr={img}></ion-icon>
however, the SVG does not render here is my whole codebase
import React from "react";
import { Col, Row } from "react-bootstrap";
import classes from "./SatelliteCard.module.css";
import img from "./Resources/Sat 2.svg";
export const SatelliteCard = ({name, id}) => {
return (
<Col md={3}>
<Row className={classes.card}>
<Col lg={2}>
<ion-icon scr={img}></ion-icon>
</Col>
<Col lg={7}>
<h3>{name}</h3>
<p>Satellite Id: {id}</p>
</Col>
<Col className={classes.trash} lg={3}>
<ion-icon name="trash-outline"></ion-icon>
</Col>
</Row>
</Col>
);
};
please help thank you so much
Your attribute was misspelt, instead of scr it should be src.
<ion-icon src={img}></ion-icon>