ion-searchbar в Ioni c 4 выбрасывает значки не найденные ошибки на консоли браузера

Question

Я пытаюсь реализовать ion-searchbar в моем Ioni c 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>

Может кто-нибудь, пожалуйста, помогите.

Answer 1

С Ioni c 4 вы можете получить доступ к Ionicons, не включая ссылки на скрипты. Следует также отметить, что с выпуском Ioni c 5 стиль Ionicons получил обновление, а предыдущие ссылки на стиль md или ios были удалены в пользу трех различных вариантов стиля для каждый значок (outline, filled и sharp).

С компонентом ion-searchbar свойство clear-icon автоматически по умолчанию принимает значок close-circle , но вы можете изменить это, установив атрибут 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/

Answer 2

Поскольку для ionic2 не требуется никаких внешних ссылок для встроенной функции ioni c, поэтому вы можете удалить эти ссылки из индекса. html.

Или вы можете загрузить ioni c 4 ioni c -conference-app [демонстрационный шаблон] для дополнительной информации.