在 SlateJS 工具栏中看不到图标

Question

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

我在定义图标的 '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 功能执行的操作的示例，应该用于它们的逻辑，不一定用于它们的设计。

我同意它没有很好的记录，但工具栏不能逐字复制，因为它们依赖于模块捆绑和它们自己的构建配置（参见 package.json 和 support 文件夹Slate repo)，它使 material-ui class 引用可以替换为 css 定义的图形。他们还使用 css-in-js styled 库。 IMO，尝试完全模拟它们会很痛苦（除非你有完全相同的构建配置——极不可能），所以我会尝试使用你的 graphics/css/ui 库来进行你自己的工具栏设计选择。因为它实际上只是一排按钮，所以使用您喜欢的任何东西都可以很快地旋转出与他们几乎相同的东西。

如果您特别喜欢它们使用的元素，您当然可以使用您自己的捆绑方法将它们包括在内。我相信 https://www.npmjs.com/package/@material-ui/icons 包包含所有 material 图标，你可以从中导入你需要的东西。

Answer 2

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

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

在 SlateJS 工具栏中看不到图标

Not seeing Icons in SlateJS toolbar

javascript

emotion

reactjs

slatejs