在反应中将自定义 svgs 添加到离子图标 v5

Question

我没有为 React 安装 ion 图标，而是将它导入我的 index.html 到目前为止，这一直在使用来自找到的 ion 图标的图标 here 但是我知道您可以自定义svgs 通过像这样向 ion-icon 阶段提供 src 属性

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

所以将 SVG 导入 React 应该是这样的

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

请帮忙，非常感谢

Answer 1

您的属性拼错了，应该是 src 而不是 scr。

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

在反应中将自定义 svgs 添加到离子图标 v5

Adding custom svgs to ion icons v5 in react

html

reactjs

svg

ionicons