html - 未找到带有 css 类定义的 html 图标

Question

调试网页时，页面上显示一个图标，但找不到类定义！例如，下面的代码使用一个类“icon icon-md ion-md-power”，libray 应该包含这个类来使用这个图标。欢迎任何教程，因为我是网络编程的新手！

<ion-icon name="md-power" role="img" class="icon icon-md ion-md-power" aria-label="power"></ion-icon>

Answer 1

ionicons 不使用 CSS 来显示图标。ionicon 有 svg 图标并通过 JavaScript 基于ion-icon的属性获取 svg 内容。您可以在一篇MDN 文章中了解 ionicon 用于显示图标的 Shadow DOM 技术。

图标.tsx , utils.ts#getUrl()

  loadIcon() {
    if (Build.isBrowser && this.isVisible) {
      const url = getUrl(this); // <-- get URL of SVG icon! getUrl() declare at utils.ts.
      if (url) {
        if (ioniconContent.has(url)) {
          this.svgContent = ioniconContent.get(url);
        } else {
          getSvgContent(url).then(() => this.svgContent = ioniconContent.get(url));
        }
      }
    }