Добавление пользовательских svgs к ионным значкам v5 в реакции

Я не устанавливал значки ионов для React, а импортировал их в свой index.html, до сих пор это работало с иконками из значков ионов, найденных здесь, однако я знаю, что вы можете иметь собственные svgs, указав атрибут src для ion-icon сцена такая

<ion-icon scr={'./Resources/Sat 2.svg'}></ion-icon>

поэтому импорт SVG в реакцию должен быть таким

import img from "./Resources/Sat 2.svg";

поэтому код должен выглядеть так

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

однако SVG не отображается, вот вся моя кодовая база

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>
  );
};

пожалуйста помогите большое спасибо

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
17
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш атрибут написан с ошибкой, вместо scr должно быть src.

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

Другие вопросы по теме