使用内联svg时，chrome中不显示单个图标

Posted 2021-04-02

我正在使用这样的内联svg

<use xlink:href=""></use>

但由于某些原因，Chrome中没有显示某个特定图标（但它在Firefox和ios Safari中显示），Chrome中也会显示其他图标。

这是图标本身（从icomoon导出）

<symbol id="icon-phone" viewBox="0 0 32 32"> <title>phone</title> <path d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"></path> </symbol>

我也尝试使用href而不是xlink：href，但它也没有用。

答案

<symbol id="icon-phone" viewBox="0 0 32 32">

和

</symbol>

包装并用它替换

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">

和

</svg>