问题描述
我在 Ionic 5 中有一个 React 应用程序,我想向其中添加一些自定义 SVG。
This SO question is about Angular, 但我的问题是关于 React。
我的应用文件夹结构如下:
- 源代码
- 资产
- listen.svg
- SvgListen.tsx
- 资产
这是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 />
显示正确;但是,不显示离子图标。也没有错误消息。
我检查了 this blog post,但那里概述的方法也不走运。
如何在 Ionic 5 中使用 <IonIcon>
显示自定义 SVG?
解决方法
根据 Create React App docs,您可以导入图像以获取其在输出包中的最终路径:
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;