10

升级到 Polymer 1.0 后，默认的 iron-icons 设置不起作用。我正在尝试使用默认图标集中的主页图标。

HTML 代码片段：

    <link rel="import" href="/components/iron-flex-layout/classes/iron-flex-layout.html">
    <link rel="import" href="/components/iron-icons/iron-icons.html">
    <link rel="import" href="/components/iron-icons/communication-icons.html">
    <link rel="import" href="/components/iron-form/iron-form.html">
    <link rel="import" href="/components/iron-selector/iron-selector.html">
    <link rel="import" href="/components/iron-pages/iron-pages.html">

    <!-- OOTB paper elements -->
    <link rel="import" href="/components/paper-drawer-panel/paper-drawer-panel.html">
    <link rel="import" href="/components/paper-header-panel/paper-header-panel.html">
    <link rel="import" href="/components/paper-toolbar/paper-toolbar.html">

    <link rel="import" href="/components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="/components/paper-material/paper-material.html">

    <link rel="import" href="/components/paper-menu/paper-menu.html">
    <link rel="import" href="/components/paper-item/all-imports.html">

    <link rel="import" href="/components/paper-tabs/paper-tab.html">
    <link rel="import" href="/components/paper-tabs/paper-tabs.html">
    <link rel="import" href="/components/paper-tabs/paper-tabs-icons.html">

<paper-icon-item id="socialFeed">

        <iron-icon icon="home" item-icon></iron-icon>

        <paper-item-body two-line>
          <div>Social Feed</div>
          <div secondary>2 Unread FB Posts</div>
        </paper-item-body>

</paper-icon-item>

我在 Chrome 调试器中收到警告：[iron-icon::_updateIcon]: could not find iconset icons, did you import the iconset?@ line#167 in iron-icon.html

调试显示在 iron-icon.html 的第 163 行

this._iconset = this.$.meta.byKey(this._iconsetName);

this._iconsetName具有值“图标”但this._iconset未定义。

我在这里错过了一些进口或其他东西吗？

编辑仅在 Meteor 中使用 Blaze 模板引擎时才会出现此问题。只是想为完整的图片添加这一点。

4

3 回答 3

11

现在得到了真正的解决方案（不是解决方法），因此打开了新的答案。

Chrome 调试器中警告的原因是由于以正确的顺序加载链接导入的时间错误。

解决方案：

1.）删除铁图标中的链接导入（以及其他图标集，如果需要，如地图，社交等......）：

  • 上市
    • bower_components
      • 铁图标
        • 铁图标.html
        • maps-icons.html（可选，如果您正在使用它们）
        • social-icons.html（可选，如果您正在使用它们）

铁图标.html：

前：

<!--@group Iron Elements
@element iron-icons
@demo demo/index.html
-->
<link rel='import' href='../iron-icon/iron-icon.html'>
<link rel='import' href='../iron-iconset-svg/iron-iconset-svg.html'>

<iron-iconset-svg name="icons" size="24">
    <svg><defs>
    <g id="3d-rotation"><path d="M7.52 21.48C ..... etc ..... /></g>
    </defs></svg>
</iron-iconset-svg>

后：

<!--@group Iron Elements
@element iron-icons
@demo demo/index.html
-->
<!--<link rel='import' href='../iron-icon/iron-icon.html'>
<link rel='import' href='../iron-iconset-svg/iron-iconset-svg.html'>-->

<iron-iconset-svg name="icons" size="24">
    <svg><defs>
    <g id="3d-rotation"><path d="M7.52 21.48C ..... etc ..... /></g>
    </defs></svg>
</iron-iconset-svg>

最初的链接导入（依赖项）是阻塞的（不是加载异步而是同步，这很好，因为它应该是这样的）。但是，在<link rel='import' href='../iron-icon/iron-icon.html'>iron-icon 的代码中，引用了尚未加载的图标集（<iron-iconset-svg name="icons" size="24">等...），因为它是在初始链接导入之后（由于链接导入的阻塞性质）。因此，在第 164 行它找不到 Default iconset icons，因此在第 167 行抛出了著名的警告：

找不到图标集图标，您是否导入了图标集？

2.)以正确的顺序在项目文件中加载所需的依赖项：

<head>
  <meta charset="utf-8" />
  <title></title>

  <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="/bower_components/polymer/polymer.html">

  <link rel="import" href="/bower_components/iron-meta/iron-meta.html">
  <link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="/bower_components/iron-iconset-svg/iron-iconset-svg.html">
  <link rel="import" href="/bower_components/iron-iconset/iron-iconset.html">

  <link rel="import" href="/bower_components/iron-icons/iron-icons.html">
  <link rel="import" href="/bower_components/iron-icons/maps-icons.html">
  <link rel="import" href="/bower_components/iron-icons/social-icons.html">

  <link rel="import" href="/bower_components/iron-icon/iron-icon.html">
</head>

现在<link rel="import" href="/bower_components/iron-icon/iron-icon.html">加载到最后一个位置，因此此时所有依赖项都可用。

现在对我来说就像一个魅力。

@LuckyRay's：请让我们知道这是否也适合您。我也会在你为 Polymer 团队发表的 github 评论上发布这个。

于 2015-06-08T15:19:46.743 回答
0

我有同样的问题。似乎与<paper-icon-item>. 尝试同时替换它<paper-icon-button>（我很快复制了您的代码，它对我有用：至少您的主页图标现在正确显示）。也许其他人对此问题有其他评论。

因此，您的 HTML：

<paper-icon-button icon="home" id="socialFeed">
  <paper-icon-item>
        <paper-item-body two-line>
          <div>Social Feed</div>
          <div secondary>2 Unread FB Posts</div>
        </paper-item-body>
  </paper-icon-item>
</paper-icon-button>

但是<paper-item-body two-line>，按钮中没有显示（或者尝试设置样式按钮 - >放大等......并稍微摆弄一下）。希望这有助于同时作为一种快速的解决方法....

不过，Polymer 1.0 摇滚。值得努力....聚合物团队做得很好，谢谢。幸运的我们.... :-)

只是尝试了另一种方式，将图标按钮放在<paper-icon-time>：

<paper-icon-item>
  <paper-icon-button icon="home" id="socialFeed"></paper-icon-button> 
  <paper-item-body two-line>
    <div>Social Feed</div>
    <div secondary>2 Unread FB Posts</div>
  </paper-item-body>
</paper-icon-item>
于 2015-06-03T01:16:26.197 回答
0

有一种强制使用影子 DOM 的实验方法。检查底部的这个论坛帖子： https ://forums.meteor.com/t/polymer-1-0-and-iron-router-or-flow-router/5148/16

于 2015-06-24T02:13:58.457 回答