html 未找到具有 css class 定义的图标

Question

调试网页时，页面显示图标但找不到class定义！例如，下面的代码使用 class "icon icon-md ion-md-power"，库应该包含它才能使用此图标。欢迎任何教程，因为我是网络编程的新手！

<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 图标，并根据 ion-icon 的属性通过 JavaScript 获取 svg 内容。您可以了解 ionicon 用于在 MDN article.

中显示图标的 Shadow DOM 技术

icon.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));
        }
      }
    }

html 未找到具有 css class 定义的图标

html icon with css class definition not found

html

css

ionicons