Не видеть иконки на панели инструментов SlateJS

Question

Я пытаюсь воспроизвести примеры, показанные в Slate examples . У меня есть редактор и все функции, кроме внешнего вида панели инструментов. Я импортировал библиотеки 'emotion' и 'Reaction-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

Вы также можете включить стиль иконок материалов UI.

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

Answer 2

Примеры панели инструментов Slate на самом деле в некотором смысле отделены от самой базовой логики Slate - они являются просто примерами того, что вы можете делать с функциями Slate, и должны использоваться для их логики, а не обязательно для их дизайна.

Я согласен, что она не очень хорошо документирована, но панели инструментов не предназначены для точного копирования, поскольку они зависят от комплектации модулей и их собственной конфигурации сборки (см. Папки package.json и support в репозитории Slate), что позволяет material-ui ссылки на классы должны быть заменены на css определенные графики. Они также используют библиотеку css-in-js styled. IMO, было бы больно пытаться эмулировать их точно (если у вас нет точно такой же конфигурации сборки - крайне маловероятно), поэтому я бы попытался использовать ваш собственный доморощенный дизайн панели инструментов, используя ваши библиотеки graphics / css / ui выбора. Так как на самом деле это просто ряд кнопок, он должен довольно быстро раскрутить что-то, почти идентичное их, используя все, что вам удобно.

Если вам нравятся элементы, которые они используют, в частности, вы, безусловно, можете включить их, используя свою собственную методологию комплектации. Я считаю, что пакет https://www.npmjs.com/package/@material-ui/icons содержит все значки материалов, и вы можете просто импортировать из этого все, что вам нужно.