在SlateJS工具栏中看不到图标

Question

我正在尝试重现Slate Examples中显示的示例。我有编辑器和所有的功能，除了工具栏的外观。我已经导入了‘情感’和‘反应-情感’库。但我看不到呈现的图标，而是看到文本代替它们：

​

我在“components.js”中看到了定义图标的以下代码：

export const Icon = styled(({ className, ...rest }) => {
return <span className={`material-icons ${className}`} {...rest} />
})`
font-size: 18px;
vertical-align: text-bottom;

`是否还有其他库需要我导入才能显示图标或进行任何其他配置？

Answer 1

Slate工具栏示例在某种意义上实际上与核心slate逻辑本身是分开的--它们只是您可以使用Slate函数执行的操作的示例，应该用于它们的逻辑，而不一定用于它们的设计。

我同意它没有很好的文档化，但工具栏并不意味着要被逐字复制，因为它们依赖于模块捆绑和它们自己的构建配置(参见Slate中的package.json和support文件夹)，这使得material-ui类引用可以被css定义的图形替换。他们也在使用css-in-js styled库。因此，我会尝试使用您选择的图形/css/ui库，使用您自己开发的工具栏设计。因为它实际上只是一排按钮，它应该是相当快的旋转与他们几乎相同的东西，使用任何你感到舒服的东西。

如果您特别喜欢它们使用的元素，那么您当然可以使用自己的捆绑方法来包含它们。我相信https://www.npmjs.com/package/@material-ui/icons包包含了所有的材料图标，你可以直接导入你需要的东西。

Answer 2

您还可以包含material ui图标样式。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">