通过故障排除,我认为我缩小了我的更大问题"直到下面的问题。 (但我可能是错的。):
如何将最新版本的<iron-icons>
正确下载到我的本地计算机?
通过&#34;最新版本,&#34;我的意思是通过以下方式导入的版本:
<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">
导入<iron-icons>
works on my demo here.
但是,当我执行以下任一操作时:
bower install --save PolymerElements/iron-icons
bower update --save
尝试在我的本地服务器上导入,如下所示:
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
它无声地失败,我看不到任何图标。但我确实看到了图标应该渲染的额外空间。
我想让我的<iron-icons>
在浏览器中正确呈现。
我希望看到这样的两个<iron-icon>
元素:
(锚定在其他测试元素之间:Hello World
和<img>
)
根本没有图标。但是他们应该渲染的空白区域。
运行
bower install --save PolymerElements/iron-icons
或者,如果已安装<iron-icons>
:
bower update --save
然后
polyserve
或
polymer serve
我相信我使用的是<iron-icons>
的v2.0.1。 Here is the entire contents of the bower.json file.
"iron-icons": "PolymerElements/iron-icons#^2.0.1",
以下代码按预期呈现<iron-icons>
:
<base href="//polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-icon/iron-icon.html">
<dom-module id="demo-el">
<template>
Hello world
<iron-icon icon="add"></iron-icon>
<iron-icon icon="favorite"></iron-icon>
<img src="//lorempixel.com/400/200/" />
</template>
<script>
class DemoEl extends Polymer.Element {
static get is() {
return 'demo-el'
}
constructor() {
super();
}
}
customElements.define(DemoEl.is, DemoEl);
</script>
</dom-module>
以下代码未按预期呈现<iron-icons>
(在本地提供):
<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/webcomponentsjs/webcomponents-lite.js">
<link rel="import" href="/bower_components/iron-icon/iron-icon.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-input/paper-input.html">
<dom-module id="app-main">
<template>
Hello world
<iron-icon icon="add"></iron-icon>
<iron-icon icon="favorite"></iron-icon>
<img src="//lorempixel.com/400/200/" />
</template>
<script>
class AppMain extends Polymer.Element {
static get is() {
return 'app-main'
}
constructor() {
super();
}
}
customElements.define(AppMain.is, AppMain);
</script>
</dom-module>
但是,当我直接替换:
时,上面的代码会按预期呈现<iron-icons>
<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">
的
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
通过使用CDN比较导入文件的文本
<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">
和本地导入:
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
我发现iron-iconset-svg.html
文件的导入版本存在差异。我的bower.json文件说依赖版本是"iron-iconset-svg": "1 - 2"
或"iron-iconset-svg": "polymerelements/iron-iconset-svg#^2.0.0"
,但这里的bower.json文件说依赖版本是"iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.0"
所以,现在这个问题似乎减少了如何让iron-icons.html
的本地版本导入与在线CDN导入版本相同版本的iron-iconset-svg.html
。
当我从CDN复制iron-iconset-svg.html
文件并将其粘贴到我的本地文件系统时,问题仍然存在。所以,显然还有其他事情正在发生。
I followed the instructions here for upgrading to Polymer 2.0:
https://www.polymer-project.org/2.0/docs/upgrade#update-bower-dependencies
- 删除现有的bower_components文件夹。
醇>
rm -rf bower_components
- 将bower.json中的Polymer版本更新为最新版本。
醇>
Component | Version
---------------------|--------
Polymer | ^2.0.0
webcomponentsjs | ^1.0.0
web-component-tester | ^6.0.0
Polymer elements | ^2.0.0
- 安装新的依赖项。
醇>
bower install
这并没有解决问题。但是,我无法将Polymer elements
更新为^2.0.0
"dependencies" : {
...
"polymer-elements" : "^2.0.0",
...
}
导致错误,所以:
bower.json"dependencies" : {
...
"polymerelements" : "^2.0.0",
...
}
所以:
bower.json"dependencies" : {
...
"PolymerElements" : "^2.0.0",
...
}
答案 0 :(得分:3)
@Ofisora在评论中提出的解决方案适用于我 - 更新iron-selector
和iron-meta
:
bower install --save PolymerElements/iron-meta
bower install --save PolymerElements/iron-selector
答案 1 :(得分:1)
iron-icons
是一个实用程序导入,包含的定义iron-icon
元素,iron-iconset-svg
元素以及导入 对于默认图标集。
这意味着iron-icons
直接依赖于iron-icon
和iron-iconset-svg
。 iron-icon
和iron-iconset-svg
元素都取决于iron-meta
。
当您将iron-icons
更新为最新版本时,这些元素iron-icon
,iron-iconset-svg
和iron-meta
可能无法更新,因为默认情况下您将获得所有这些组件。因此,更新iron-meta
是解决方案之一。
无法为铁图标找到合适的版本,请选择一个 输入以下数字之一:
根据您拥有的其他元素,始终选择合适的或最新的版本。
完成更新或安装后,您会看到如下注释:
Please note that,
iron-iconset-svg#a47e824859 depends on iron-meta#2.0-preview which resolved to iron-meta#7404b31da3
iron-icon#1.0.13, iron-icon#1.0.13, iron-icon#1.0.13, iron-iconset-svg#1.1.2, iron-iconset-svg#1.1.2 depends on iron-meta#^1.0.0 which resolved to iron-meta#1.1.3
iron-icon#2.0.0, iron-iconset-svg#2.0.0 depends on iron-meta#1 - 2 which resolved to iron-meta#2.0.2
请务必阅读此内容并安装/更新所需的依赖项。
<小时/> 注意:在我的情况下,我必须更新iron-selector
,因为我在iron-icon
内使用了iron-selector
。