Dashicons in custom toolbar control button

[jbr]

I’m trying to figure this out for completeness as much as anything else, and I’m convinced I’ve just missed something somewhere.

I’ve been creating custom toolbar controls (like the High Contrast example) with JSX SVGs without issue, but I can’t seem to work out how to use a dashicon as the control icon (as opposed to the block icon). It’s output inline rather than as a property of the button.

Does something need to be imported from Dashicon in wp-components?

[Zac Gordon]

Does it not work the same was as using a dashicon for the main block icon?

I sort of remember there being some trick to using Dashicons anywhere in your theme or plugin. What have you tried so far?

[jbr]

Not too much yet, I’d tried adding the icon name as an attribute to the button in the JSX, and trying to find a way to import from Dashicons.

Do you know if the icons are stored anywhere in WP in JSX format so they can be called in the same way as the SVG icons?

i.e. like

import icon from './icon';

.
.
.

 <Toolbar>
                            <Tooltip text={ __( 'High Contrast', 'jsforwpblocks' )  }>
                                <Button
                                    className={ classnames(
                                        'components-icon-button',
                                        'components-toolbar__control',
                                        { 'is-active': highContrast },
                                    ) }
                                    onClick={ () => setAttributes( { highContrast: ! highContrast } ) }
                                >
                                    { icon }
                                </Button>
                            </Tooltip>
                        </Toolbar>

[Zac Gordon]

See that’s the trick. You can refer to them by name for the icon parameter.

I remember exploring how to add them to your own svg and went with custom ones at the time instead.

This may be a good question to ask in #core-editor Slack channel and see what they say.

[jbr]

I think I’ve actually just found what I was looking for through some Google-Fu, you’ll never guess where 😀

https://wp.zacgordon.com/2018/01/01/how-to-use-the-tooltip-component-in-gutenberg/

This is the code I ended up with (in this case it’s a quick toggle for a thick border around the element).

 <Toolbar>
                            <Tooltip text={ __( 'Thick Border', 'jsforwpblocks' )  }>
                                <Button
                                    className={ classnames(
                                        'components-icon-button',
                                        'components-toolbar__control',
                                        { 'is-active': thickBorder },
                                    ) }
                                    
                                    onClick={ () => setAttributes( { thickBorder: ! thickBorder } ) }
                                >
                                     <Dashicon icon="grid-view" />
                                </Button>
                            </Tooltip>
                        </Toolbar>

Thanks for the help, really impressed with the course!

[Zac Gordon]

Ahahahahaha 🤣

Glad could be a help and not remember ;p

Post up again if you get stuck with anything else 🙂

[Author]

Posts