ionicons未在ionic 7.1.1 / Angular：17.0.8中显示

2w2cym1i 于 12个月前发布在 Ionic

关注(0)|答案(1)|浏览(132)

我使用的是Angular独立组件，ionic的版本是7.1.1 /Angular的版本：17.0.8。
这就是HTML：

<div id="container">
  <strong>{{ name }}</strong>
  <div class="icon-container">
    <p>Windows Shop</p>
        <div class="win-icon">
          <ion-icon name="logo-windows"></ion-icon>          
        </div>
  </div>
</div>

字符串
这就是TS类：

import { Component, Input } from '@angular/core';
import { IonIcon } from '@ionic/angular/standalone'; 
import { CommonModule } from '@angular/common';
import {logoWindows} from 'ionicons/icons';

@Component({
  selector: 'app-explore-container',
  templateUrl: './explore-container.component.html',
  styleUrls: ['./explore-container.component.scss'],
  imports: [IonIcon],
  standalone: true,
})

export class ExploreContainerComponent {
  @Input() name?: string;

  constructor(){
    addIcons:{{logoWindows}}
  }
}

型
如前所述，离子图标不显示，这是浏览器控制台中的错误：

index.js:32 Uncaught TypeError: Failed to construct 'URL': Invalid base URL
    at getAssetPath (index.js:32:22)
    at getNamedUrl (icon.js:46:22)
    at getUrl (icon.js:27:12)
    at Icon.loadIcon (icon.js:296:25)
    at icon.js:257:18
    at Icon.waitUntilVisible (icon.js:291:13)
    at Icon.connectedCallback (icon.js:255:14)
    at Icon.connectedCallback (index.js:3390:43)
    at DefaultDomRenderer2.insertBefore (platform-browser.mjs:563:26)
    at nativeInsertBefore (core.mjs:8495:14)
index.js:32 Uncaught TypeError: Failed to construct 'URL': Invalid base URL
    at getAssetPath (index.js:32:22)
    at getNamedUrl (icon.js:46:22)
    at getUrl (icon.js:27:12)
    at Icon.loadIcon (icon.js:296:25)
    at icon.js:257:18
    at Icon.waitUntilVisible (icon.js:291:13)
    at Icon.connectedCallback (icon.js:255:14)
    at Icon.connectedCallback (index.js:3390:43)
    at StackController.transition (ionic-angular-common.mjs:1351:29)
    at ionic-angular-common.mjs:1242:29
src_app_tab1_tab1_page_ts.js:2 TypeError: Failed to construct 'URL': Invalid base URL
    at getAssetPath (index.js:32:22)
    at getNamedUrl (icon.js:46:22)
    at getUrl (icon.js:27:12)
    at Icon.loadIcon (icon.js:296:25)
    at Icon.componentDidLoad (icon.js:268:18)
    at safeCall (index.js:2389:36)
    at postUpdateComponent (index.js:2299:13)
    at index.js:2207:9
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1) undefined

型
顺便说一句，我试图安装最新的离子版本与以下命令：npm install -g @ionic/npm @latest，但它保持当前版本是：7.1.1
你有什么建议？

ionic-framework

来源：https://stackoverflow.com/questions/77726607/ionicons-are-not-displayed-in-ionic-7-1-1-angular-17-0-8

1条答案

按热度按时间

ddrv8njm1#

要使用离子图标，您必须单独导入它们：
举例来说：

import { IonIcon } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons'; // Import this
import { cameraOutline } from 'ionicons/icons';

@Component({
  selector: 'app-youcomponent',
  templateUrl: 'youcomponent.component.html',
  styleUrls: ['youcomponent.component.scss'],
  standalone: true,
  imports: [ IonIcon ]
})

export class Youcomponent {
  constructor(){
   addIcons({ cameraOutline }); // you are missing addIcons Import
  }
}

字符串

赞(0）回复(0）举报 12个月前

我来回答

ionicons未在ionic 7.1.1 / Angular：17.0.8中显示

1条答案

相关问题

热门标签

最新问答