3

我在我的解决方案中使用了 svg 图标作为自定义离子项目，如下所示。它适用于 web 视图但在模拟器或设备上运行良好，如下所示。

在此处输入图像描述

左侧是模拟器，右侧是网页视图

我的实现

角.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夹。

4

1 回答 1

1

SVG 文件有问题。ClipPath 不适用于安卓系统。这也发生在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>

于 2019-02-18T05:50:45.143 回答