angular - Ionic 4 自定义图标在 Android 或 IOS 模拟器和设备上无法正确显示

Question

我在我的解决方案中使用了 svg 图标作为自定义 ionic 项目，如下所示。它在 Web View 中运行良好，但在模拟器或设备上运行不佳，如下所示。

左侧是模拟器，右侧是网页 View

我的实现

Angular.json

....
        "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              },
              {
                "glob": "**/*.svg",
                "input": "src/assets/icon/ion-icons",
                "output": "./svg"
              }
            ],
....

HTML

<ion-icon name="decrease"></ion-icon>

Svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="7" height="4" viewBox="0 0 7 4">
  <defs>
    <clipPath id="clip-path">
      <path id="Shape" d="M2.793,3.5.146,6.146a.5.5,0,0,0,.707.707l3-3a.5.5,0,0,0,0-.707l-3-3A.5.5,0,0,0,.146.854Z"/>
    </clipPath>
  </defs>
  <g id="Group_34" data-name="Group 34" transform="translate(7) rotate(90)" clip-path="url(#clip-path)">
    <g id="COLOR_black" data-name="COLOR/ black" transform="translate(-4 -2.5)">
      <rect id="COLOR_black_background" data-name="COLOR/ black background" width="12" height="12" fill="rgba(0,0,0,0)"/>
      <rect id="Rectangle" width="12" height="12" fill="#0171ad"/>
    </g>
  </g>
</svg>

我已将 ios-decrease.svg 和 md-decrease.svg 放在 src/assets/icon/ion-icons 文件夹中。

Answer 1

SVG 文件有问题。 ClipPath 不适用于 Android。ie浏览器也会出现这种情况。尝试使用此 SVG

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="7" height="4" viewBox="0 0 7 4" style="enable-background:new 0 0 7 4;" xml:space="preserve">
    <path fill="#0171AD" d="M3.5,2.8L0.9,0.1C0.7,0,0.3,0,0.1,0.2C0,0.4,0,0.7,0.1,0.9l3,3C3.3,4,3.7,4,3.9,3.9l3-3C7,0.7,7,0.3,6.9,0.1
	S6.3,0,6.1,0.1L3.5,2.8z"/>
</svg>