使用IonIcon无法修改本地SVG文件的大小和颜色该如何解决

• 当使用IonIcon组件的src属性传入本地自定义SVG时，size、color属性仅对Ionic官方内置图标生效，不会作用于外部引入的SVG资源
• 使用img标签引入SVG时，SVG作为外部独立资源加载，CSS无法直接修改其内部的fill等样式属性
• 若本地SVG文件内部的<path>等节点写死了固定fill属性值，外部样式也无法覆盖修改颜色

方案1：内嵌SVG代码（最稳定） #

直接将下载的SVG文件内的代码复制到组件中，自定义类名控制样式：

const AppHeader = () => {
return (
    <div className="header">
        <div className="iconsContainer">
            {/* 替换为你下载的search SVG代码 */}
            <svg className="custom-icon" viewBox="0 0 512 512">
                <path d="xxx"/>
            </svg>
            {/* 替换为你下载的cart SVG代码 */}
            <svg className="custom-icon" viewBox="0 0 512 512">
                <path d="xxx"/>
            </svg>
        </div>
    </div>
);
};

对应CSS：

.custom-icon {
  width: 36px;
  height: 36px;
  fill: white;
}

注意：如果SVG代码里的path节点有写死的fill属性，直接删掉或者改成fill="currentColor"即可让外部fill生效。

方案2：强制修改IonIcon内部样式 #

保留现有IonIcon写法，通过深层CSS选择器控制渲染后的SVG属性：

/* 控制图标大小 */
.iconsContainer ion-icon {
  width: 36px !important;
  height: 36px !important;
}
/* 控制图标颜色 */
.iconsContainer ion-icon svg {
  fill: white !important;
}

同样需要提前把本地SVG文件内写死的fill属性删除或改为currentColor。

方案3：使用CSS mask实现 #

不需要修改SVG源文件，也不用IonIcon组件，自定义元素实现：

const AppHeader = () => {
return (
    <div className="header">
        <div className="iconsContainer">
            <span className="search-icon"></span>
            <span className="cart-icon"></span>
        </div>
    </div>
);
};

对应CSS：

.search-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-color: white;
  mask: url('../assets/search.svg') no-repeat center / contain;
  -webkit-mask: url('../assets/search.svg') no-repeat center / contain;
}
.cart-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-color: white;
  mask: url('../assets/cart.svg') no-repeat center / contain;
  -webkit-mask: url('../assets/cart.svg') no-repeat center / contain;
}

VSCode无法跳转IonIcon定义、无属性提示的问题，是因为未正确导入IonIcon组件，或未安装对应框架的Ionic依赖包：
如果使用React框架，需先执行npm i @ionic/react安装依赖，再在组件头部添加import { IonIcon } from '@ionic/react'引入组件即可正常跳转。

内容的提问来源于stack exchange，提问作者John Doah