无法使用 IonIcon 更改 svg 文件的大小和颜色答案

【问题标题】：Can't change size and color of svg file using IonIcon无法使用 IonIcon 更改 svg 文件的大小和颜色
【发布时间】：2021-07-19 20:04:51
【问题描述】：

我有一个从 ionicons 网站下载的本地 svg 文件。我正在尝试更改它们的字体大小和颜色，但没有任何效果。我尝试使用 img 标签并更改 css 文件，但没有成功。我尝试使用 IonIcon，但它也不起作用。

这就是我现在拥有的：

const AppHeader = () => {
return (
    <div className="header">
        <div className="iconsContainer">
            <IonIcon src={searchIcon} size="36px" color="white"></IonIcon>
            <IonIcon src={cartIcon} size="36px" color="white"></IonIcon>
        </div>
    </div>
);
};

我在 Ionic 的网站上也找不到任何关于 IonIcon 的信息，并且 IonIcon 在 VSCode 中的 go to definition 由于某种原因不起作用。 svg 会显示，但我无法更改大小和颜色。

【问题讨论】：

您为 IonIcon 使用的软件包。我使用 ion icon 并使用 fontSize 和颜色提供样式总是改变大小和颜色。
@moshfiqrony 我刚刚从网站上下载了图标。我没有为此使用任何软件包。
这个IonIcon组件是从哪个包导入的？
尝试在css中使用fill，例如fill:red
@moshfiqrony 好像不是从任何库导入的（我猜这是基本的Ionic React库）

标签： ionic-framework svg

【解决方案1】：

这样使用

<IonIcon icon={searchIcon} style={{fontSize:32, color: 'white'}}/>

【讨论】：

编辑解决方案。

【解决方案2】：

你是这样导入 IonIcon 的吗：-

import { IonIcon } from "@ionic/react";

如果您尝试使用离子图标，您还需要导入名称：-

import { search } from "ionicons/icons";

SVG/图像示例

<IonIcon src="/assets/icons/searchIcon"/>

离子图标示例

<IonIcon icon={search} style={{fontSize:36, color: 'white'}} />

【讨论】：