'Adding custom svgs to ion icons v5 in react

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

htmlreactjssvgionicons


Solution 1:[1]

Your attribute was misspelt, instead of scr it should be src.

<ion-icon src={img}></ion-icon>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Cameron Godwin

Related Questions