Polymer - 通过 iron-iconset-svg 加载自定义图标答案

【问题标题】：Polymer - Load custom icons via iron-iconset-svgPolymer - 通过 iron-iconset-svg 加载自定义图标
【发布时间】：2015-12-15 13:52:30
【问题描述】：

我正在开发一个使用 Polymer 的应用程序。我需要将IcoMoon Free Fonts 包含在我的应用程序中。出于某种原因，我无法将图标放入我的应用程序。这是我尝试过的：

已选中以上链接中的所有图标。
点击左下角的“生成 SVG、PNG、PDF”按钮。
点击左下角的“下载”按钮。
将 .zip 文件内容提取到一个目录中。
在文本编辑器中打开了 symbol-defs.svg 文件。
复制了defs 元素及其所有内容。
创建了一个名为“icomoon.html”的文件
将以下代码放入icomoon.html，基于this:

icomoon.html

<iron-iconset-svg name="icomoon" size="100">
  <svg>
    <!-- Code copied in step 6 placed here -->
  </svg>
</iron-iconset-svg>

在我的元素中，我添加了<link rel="import" href="[path]/icomoon.html">
然后我尝试通过说<iron-icon icon="icomoon:icon-home"></iron-icon> 来使用图标。

图标没有出现。我不明白为什么。

更新

icomoon.html

<link rel="import" href="../bower/iron-icon/iron-icon.html">
<link rel="import" href="../bower/iron-iconset-svg/iron-iconset-svg.html">

<iron-iconset-svg name="icomoon" size="50">
    <svg>
        <defs>
            <path id="home" d="M1024 590.446l-512-397.428-512 397.428v-162.038l512-397.426 512 397.428zM896 576v384h-768v-384l384-288z"></path>    
        </defs>
    </svg>  
</iron-iconset-svg>

【问题讨论】：

标签： svg polymer icon-fonts

【解决方案1】：

刚刚查看了 icomoon 图标。我无法显示主页图标，但是我发现这行得通：

<g id="icon-spades" viewBox="0 0 38 38"> 
<path d="M25.549 10.88c-6.049-4.496-8.133-8.094-9.549-10.88v0c-0 0-0-0-0-0v0c-1.415 2.785-3.5 6.384-9.549 10.88-10.314 7.665-0.606 18.365 7.93 12.476-0.556 3.654-2.454 6.318-4.381 7.465v1.179h12.001v-1.179c-1.928-1.147-3.825-3.811-4.382-7.465 8.535 5.889 18.244-4.811 7.93-12.476z"/>
</g>

没有视图框就不会显示

【讨论】：

【解决方案2】：

Here is an example for a FontAwesome iconset。我使用 SVG 元素来显示图标字体中的字符。因此，您的用例可能会有所不同。元素结构来自 Dart，所以不要怀疑它是否看起来很奇怪。

我必须添加

<bwu-fontawesome-iconset-svg></bwu-fontawesome-iconset-svg>

使图标可用。 examle code

【讨论】：

我在发布我的问题之前看到了那个例子。我试着模仿它。奇怪的是，它对我上面发布的图标不起作用。 SVG 是 SVG 是 SVG 对吗？该问题似乎特定于上面引用的 SVG 代码。
你能发布整个图标集的代码以及你在哪里使用它吗？
我刚刚更新了帖子以包含 icomoon.html 文件内容。如果我将path 元素的d 属性值替换为另一条评论中发布的“sun”元素的d 属性值，则会出现“sun”。所以我知道我正在正确加载自定义字体。但是，好像路径信息不正确。不过我也不敢相信。

【解决方案3】：

我必须将一些自定义 svg 导入到我的图标集

我就是这样做的：

    <iron-iconset-svg name="custom" size="50">
    <svg><defs>
    <g id="temp"><path d="M31.666,39.707c0,3.675-2.99,6.664-6.667,6.664c-3.675,0-6.665-2.989-6.665-6.664c0-2.484,1.371-4.748,3.58-5.904
        l0.907-0.477V5.807c0-1.201,0.978-2.178,2.178-2.178s2.179,0.977,2.179,2.178v27.52l0.907,0.476
        C30.293,34.958,31.666,37.223,31.666,39.707z M24.999,1.936c-2.138,0-3.871,1.733-3.871,3.871v26.495
        c-2.666,1.396-4.487,4.188-4.487,7.405c0,4.616,3.742,8.357,8.358,8.357c4.617,0,8.36-3.741,8.36-8.357
        c0-3.221-1.822-6.009-4.489-7.405V5.807C28.87,3.669,27.137,1.936,24.999,1.936 M24.999,0c3.202,0,5.808,2.604,5.808,5.807v25.402
        c2.795,1.906,4.488,5.063,4.488,8.498C35.295,45.382,30.676,50,24.999,50c-5.676,0-10.294-4.618-10.294-10.293
        c0-3.436,1.692-6.591,4.487-8.497V5.807C19.192,2.604,21.797,0,24.999,0L24.999,0z"/></g>

<g id="sun">
    <path d="M48.621,23.622h-9.672c-0.278-2.833-1.401-5.419-3.114-7.505l4.919-4.92c0.539-0.539,0.539-1.412,0-1.951
    s-1.412-0.539-1.951,0l-4.919,4.92c-2.086-1.714-4.672-2.836-7.504-3.114V1.38C26.38,0.618,25.762,0,25,0
    c-0.763,0-1.38,0.618-1.38,1.38v9.672c-2.832,0.278-5.418,1.4-7.504,3.114l-4.92-4.92c-0.539-0.539-1.412-0.539-1.951,0
    c-0.538,0.539-0.538,1.412,0,1.951l4.92,4.92c-1.713,2.086-2.836,4.672-3.114,7.505H1.38c-0.762,0-1.38,0.616-1.38,1.38
    c0,0.761,0.618,1.38,1.38,1.38h9.671c0.278,2.831,1.401,5.417,3.114,7.503l-4.92,4.92c-0.538,0.538-0.538,1.412,0,1.95
    c0.27,0.27,0.623,0.404,0.976,0.404c0.354,0,0.706-0.135,0.976-0.404l4.92-4.919c2.086,1.713,4.672,2.835,7.504,3.113v9.672
    C23.62,49.384,24.237,50,25,50c0.762,0,1.38-0.616,1.38-1.379v-9.672c2.832-0.278,5.418-1.4,7.505-3.113l4.918,4.919
    c0.27,0.27,0.623,0.404,0.977,0.404c0.353,0,0.705-0.135,0.975-0.404c0.539-0.538,0.539-1.412,0-1.95l-4.919-4.92
    c1.713-2.086,2.836-4.672,3.114-7.503h9.672c0.761,0,1.379-0.619,1.379-1.38C50,24.238,49.382,23.622,48.621,23.622z M25,36.26
    c-6.208,0-11.259-5.051-11.259-11.258c0-6.209,5.051-11.261,11.259-11.261c6.209,0,11.26,5.052,11.26,11.261
    C36.26,31.209,31.209,36.26,25,36.26z"/>
</g>

    </defs></svg>
    </iron-iconset-svg>

顺便说一句，你可以根据需要在 a 中添加多少个 svg

别忘了导入这个文件，然后你就可以使用你的图标了：

<iron-icon icon="custom:temp"></iron-icon>

【讨论】：

感谢您的帖子。但是，这不适用于我的场景。我刚刚更新了帖子以包含 icomoon.html 文件内容。如果我将path 元素的d 属性值替换为上面发布的“sun”元素的d 属性值，则会出现“sun”。所以我知道我正在正确加载自定义字体。但是，好像路径信息不正确。不过我也不敢相信。
每个图标都定义在标签中，就像提供的一样，我也开发了我自己的，它工作正常，你必须遵循这个，否则这将不起作用...
@PascalGula 我添加了“g”标签。但是，行为是相同的。当我使用 benjamin 共享的 d 值作为“太阳”时，会出现太阳图标。但是，当我使用上面问题中提供的d 值时，图标不会出现。我不明白为什么。