自定义 SVG 图标 ionic 3 选项卡，图标有背景色

Question

我在 ionic 3 选项卡上制作了一个自定义 SVG 图标，在浏览器中一切正常，但是当我在设备或模拟器上测试它时，背景颜色变得错误

如何解决这个问题？

ion-icon {
    &[class*="custom-"] {
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    &[class*="custom-donkey"] {
        mask-image: url(../assets/icon/donkey.svg);
    }
    &[class*="custom-cat-ol"] {
        mask-image: url(../assets/icon/cat-outline.svg);
    }
}

请帮我解决这段代码

background: currentColor;

Answer 1

&[class*="custom-donkey"] {
        mask-image: url(../assets/icon/donkey.svg);
    }
    &[class*="custom-cat-ol"] {
        mask-image: url(../assets/icon/cat-outline.svg);
    }

而不是添加 SVG 图标的 Url/Path 尝试添加 SVG 代码或者您可以直接在 HTML 的底部菜单中添加 SVG 代码并使用 [=13= 调整大小]CSS Class

自定义 SVG 图标 ionic 3 选项卡，图标有背景色

Custom SVG icon ionic 3 tabs, icon has background color

ionic-framework

ionic2

ionic3