时间戳

首页 > 解决方案 > Ionic 5 / React：使用 ion-icon 嵌入自定义 SVG

ionic-framework - Ionic 5 / React：使用 ion-icon 嵌入自定义 SVG

问题描述

我在 Ionic 5 中有一个 React 应用程序，我想向它添加一些自定义 SVG。

这个 SO 问题是关于 Angular 的，但我的问题是关于 React 的。

我的应用程序文件夹结构如下所示：

这是SvgListen.tsx：

import React from 'react';
import { ReactComponent as ListenSvg } from './listen.svg';
import { IonIcon } from '@ionic/react';

const SvgListen = () => (
  <>
    <ListenSvg />
    <IonIcon src="./listen.svg" font-size="48px" />

  </>
);

export default SvgListen;

在 Chrome 中测试应用程序时，我得到了这个 HTML：

<ion-icon src="./listen.svg" font-size="48px" role="img" class="ios hydrated"></ion-icon>

我导入的<ListenSvg />显示正确；但是，不显示离子图标。也没有错误消息。

我检查了这篇博文，但那里概述的方法也没有运气。

如何<IonIcon>在 Ionic 5 中显示自定义 SVG？

标签： ionic-frameworksvgionic5ionic-react

解决方案

根据Create React App 文档，您可以导入图像以在输出包中获取它们的最终路径：

import React from 'react';
import { IonIcon } from '@ionic/react';
import listenSvg from './listen.svg';

const SvgListen = () => (
  <IonIcon src={listenSvg} font-size="48px" />
);

export default SvgListen;

推荐阅读