Search code examples
javascriptreactjsemotionslate.js

Not seeing Icons in SlateJS toolbar

I am trying to reproduce the examples shown in Slate Examples. I have the editor and all the functionalities working except the appearance of Toolbar. I have imported the 'emotion' and 'react-emotion' libraries. But I dont see the icons rendered and instead see text in place of them: enter image description here

I see below code in 'components.js' defining the Icons:

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

` Is there any other library that I need to import to get the Icons show up or do any other config?

Solution

  • The Slate toolbar examples are really in some sense separate from the core slate logic itself -- they are just examples of what you can do with the Slate functions and should be used for their logic, not necessarily for their design.

    I agree its not documented super well but the toolbars are not meant to be copied verbatim because they depend on module bundling and their own build configuration (see the package.json and support folder in the Slate repo) which enables the material-ui class references to be replaced with css defined graphics. They are also using the css-in-js styled library. IMO, it'd be a pain to try to emulate them exactly (unless you have the exact same build config -- extremely unlikely), so I'd try to go with your own homegrown toolbar design using your graphics/css/ui libraries of choice. Since it really just a row of buttons, it should be pretty quick to spin up something almost identical to theirs using whatever you are comfortable with.

    If you like the elements they use in particular, you can certainly included them using your own bundling methodology. I believe the https://www.npmjs.com/package/@material-ui/icons package contains all of the material icons, and you can just import what you need from that.