ror*_*ray 10 meteor polymer meteor-blaze polymer-1.0
升级到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.html中的@ line#167
调试显示在iron-icon.html的第163行中
this._iconset = this.$.meta.byKey(this._iconsetName);
this._iconsetName有值"图标"但this._iconset未定义.
我错过了一些进口或其他什么吗？
编辑只有在Meteor中使用Blaze模板引擎时才会出现此问题.只想添加这一位以获得完整的图片.
Jue*_*ink 11
现在得到了真正的解决方案(不是解决方法),因此开启了新的答案.
Chrome调试器中出现警告的原因是错误的按正确顺序加载链接导入的时间.
1.)删除铁图标中的链接导入(如果需要,还可以删除其他图标集,如地图,社交等...):
之前:
<!--@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">etc ...),因为它是在初始链接导入之后(由于链接导入的阻塞性质).因此,在第164行,它找不到默认图标集图标,因此在第167行抛出着名的警告:
找不到iconset图标,你导入了iconset吗？
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:请告诉我们这是否也适合您.我也会在聚合物团队的github评论中发布此信息.