Ionic 4 中的 ion-searchbar 在浏览器控制台上抛出图标未找到错误

Question

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

  <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>

谁能帮忙。

Answer 1

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

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

Answer 2

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

有了ion-searchbar组件，clear-icon属性automatically defaults to the close-circle icon，但是你可以通过设置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/

Ionic 4 中的 ion-searchbar 在浏览器控制台上抛出图标未找到错误

ion-searchbar in Ionic 4 throws icons not found errors on browser console

ionic-framework

ionic4

ionicons