在
起初的设计是所有icon先在
for="item in list" :key="item._id" :id="'icon-' + item._id">
然后再需要用到的地方用克隆下来，感觉很完美。
但是理想很丰满，现实很骨感。由于某些功能会被影响到，不能使用Symbol方式引入，最后只能选择Font class引入svg。于是代码变为了下列
for="item in list" :key="item._id" :id="'icon-' + item._id">
但是在需要的地方使用克隆下来，会发现在谷歌浏览器上却完全显示不出标签的内容，即不显示iconfont图标。
刚开始，我以为是不能在
但是查看引用
这下就有点头绪了，原来是浏览器内核原因。那简单，我们找个Gecko内核的浏览器验证下就知道了，Gecko内核最出名的就是FireFox浏览器（火狐浏览器）了。其实我的电脑也装了火狐浏览器，但是由于我开发一直用的是谷歌浏览器，确实也是好久好久没打开火狐了，放着吃灰，这次也确实没想到可能是浏览器本身的问题。打开火狐浏览器，果然能显示标签的内容，即显示了iconfont图标。
不过为什么会出现这样的情况呢，另一个叫Dirk Schulze的程序员表示：出于复杂性的原因，WebKit不允许引用foreignObject。 我们没有时间查看所有影响（包括安全影响），如果内容是基于HTML的，那么对foreignObject的支持永远不会很好。（Blink修复了后半部分）
也就是说Blink内核修复了后半段，使浏览器更好的支持了
最后直接弃用
虽然不够优雅，但是真香。
事情原本到这就应该结束了，但是我还是不死心，不知道为什么WebKit要做这样的一个策略。最后，功夫不负有心人，我在Bugzilla又找到了一个提交给WebKit的bug：https://bugs.webkit.org/show_bug.cgi?id=91515。底下有一名名为Nikolas Zimmermann的程序员对此进行了回应：
原文大意是：
是的。由于与foreignObject相关的潜在问题，我们故意禁止它。它需要经过充分测试，仅此而已。
当启用它时，我们需要注意新类型的循环引用，这就是它变得棘手的地方。
foo.svg，包含
blub.svg 引用"symbol"。other.html包含foo.svg作为html:img。... -> 循环
或者考虑 我们基本上需要将循环检测扩展到所有可以引用其他文件的 HTML 元素/属性。 不过这个bug之后在2020年被其他人重新提起，于是，应该是Nikolas Zimmermann的同事Said Abou-Hallawa在底下也对这个bug进行了补充评论。 原文大意是： 上述测试用例在FireFox中有效，但在WebKit或Chrome中无效。 由于foreignObjectTag不是createAllowedElementSet允许的标记之一，因此foreignObject 及其后代被removeDisallowedElementsFromSubtree() 删除。但是即使添加它也不能解决问题，因为 HTML 元素将被删除（此处应该是指bug提交人的示例中的p标签），因为它的标签是不允许的。 为了解决这个问题，我们需要重新实现removeDisallowedElementsFromSubtree()，并且正如 Nikolas 上面提到的，我们需要将循环检测扩展到所有 HTML 元素，以防它们中的任何一个引用其他文件。 所以，很明显，到目前为止，他们也没解决这个问题，导致他们做出这个策略的一个原因是因为removeDisallowedElementsFromSubtree()这个方法写的不够完善，在某些场景下会出现循环引用的bug，最简单粗暴的办法就是直接不让你在 这下事情是真的结束了，最后大致扫一眼名单，这个团队的很多人最后都去了苹果，不得不说苹果真的挖人有一套，满屏的apple。 __EOF__
如果您感到有挑战，请随时开始，否则我将不实施解决这个问题。
