代码之家 › 专栏 › 技术社区 › Patrick Kenny

Ionic 5/React:使用ion图标嵌入自定义SVG

ionic-react ionic5 svg ionic-framework

Patrick Kenny · 技术社区 · 4 年前

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

This SO question is about Angular, 但我的问题是关于React的。

我的应用程序文件夹结构如下:

src
- 资产
  - 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 ,但其中概述的方法也没有成功。

如何使用显示自定义SVG <IonIcon> Ionic 5?

0 回复 | 直到 4 年前

Thomas 4 年前

根据do the 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;

推荐文章

Gh05d · 更新到3后无法同步iOS项目

2 年前

Balram dangi · 离子电容器应用程序在ios中只显示白色的空白屏幕

2 年前

deszok · 电容器/离子文件系统写入文件到csv

2 年前

Fernando Aureliano · 无法在Ubuntu上升级离子版

2 年前

Rafael de Castro · 关于内存:在服务上存储json数据,还是在需要时随时获取?

2 年前

Anurag Singh · 通过mediacapture插件录制视频,但在通过文件插件-离子电容器上传时出现问题

2 年前

Andreea Purta · 未定义(读“coords”),使用@ionic native/geolocation-ionic/react

2 年前

plotnik · 发布Cordova插件的离子包装器

2 年前

Alex · 如何在Ionic Pro中设置正确版本的游戏服务

6 年前

Krishanu Mukherjee · 点击paypal时,Ionic 3 IOS应用程序崩溃

6 年前