0

我正在尝试ion-searchbar在我的Ionic 4应用程序中实现。

  <ion-toolbar mode="ios">
    <ion-grid>
      <ion-row>
        <ion-searchbar></ion-searchbar>
      </ion-row>
    </ion-grid>
  </ion-toolbar>

但是，它会在浏览器控制台中引发以下错误。我无法在搜索栏中显示明文图标。

Cannot find "/dist/ionicons/svg/ios-close-circle.svg" in ionicons@5.0.0

请注意我有这两个脚本文件index.html

<script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>

谁能帮忙。

4

2 回答 2

1

使用 Ionic 4，您可以在不包括脚本引用的情况下访问 Ionicons。还应该注意的是，随着Ionic 5的发布，Ionicons 样式得到了升级，并且以前对样式的引用md已ios被删除，以支持每个图标的三种不同样式选择（outline、filled和sharp）。

对于ion-searchbar组件，该clear-icon属性自动默认为close-circleicon，但您可以通过设置clear-icon属性来更改它：

<ion-searchbar clear-icon="close-sharp"></ion-searchbar>

作为参考，如果你想单独包含一个图标ion-searchbar，你可以这样做：

<ion-icon name="close-circle-outline"></ion-icon>

其中outline名称的部分可以替换为filled或者sharp取决于您的样式偏好。以下是所有更新图标及其名称的列表：https ://ionicons.com/

于 2020-03-17T15:09:39.723 回答
0

由于 ionic2 的 ionic 内置功能不需要外部链接，因此您可以从 index.html 中删除这些链接。

或者您可以下载 ionic 4 ionic-conference-app [演示模板] 以获取更多参考。

于 2020-03-17T05:26:44.600 回答