reactjs - 在 preact/react 应用中使用谷歌材质图标

Question

我正在构建一个 preact 应用程序。在哪里，我使用material-components-web。如果我渲染这样的图标

<i class="material-icons" aria-hidden="true">home</i>

它工作正常并显示主页图标。

但是有一些原因我想把它home作为变量，像这样：

let homeIcon = 'home';
<i class="material-icons" aria-hidden="true">{homeIcon}</i>

有没有办法这样做？

谢谢，

score 2 · Accepted Answer

您可以使用以下任何变体来使用材质图标： face 和 

我认为您的变量不会转移到连字，home而是按原样显示。尝试做类似的事情const iconHome = home;或使用数字字符引用。

此示例使用称为连字的排版功能，它允许仅通过使用其文本名称来呈现图标字形。替换由 Web 浏览器自动完成，并提供比等效数字字符引用更具可读性的代码。此外，您还想检查材料组件上的特殊薄包装器是否有 preact：preact-material

score 0 · Accepted Answer

您也可以尝试使用模板文字

{`${homeIcon}`}

2 回答 2