1

I'm trying to use the @wordpress/icons npm package:

npm install @wordpress/icons --save

To display the dashicons-post-status icon within the block editor:

import { Icon, postStatus } from '@wordpress/icons';

<Icon icon={ postStatus } />;

The issue - As far as I can tell, this icon doesn't exist within the icons package. Either that, or I'm utterly blind and need my eyes tested? Would one of you lovely people be able to confirm what I'm not seeing? 👌

I appreciate any help.

Note: I've also asked this question in the wordpress.org/gutenberg repo on Github for more exposure. Link to thread discussion.

2
  • Hello, These icons are dashicons available in WordPress Core. This is surely a sprite css Commented Aug 25, 2022 at 19:00
  • 1
    @SébastienSerre I was under the impression that the dashicons were ported to gutenburg, and added to the @wordpress/icons package for use in gutes react development. Am I wrong?
    – Lewis
    Commented Aug 26, 2022 at 11:53

1 Answer 1

3

So after a little digging and being maybe a little bit oblivious 😅. The correct way to use dashicons within WordPress is as follows;

import { Dashicon } from "@wordpress/components";

<Dashicon icon="post-status" />

Note: This info can be found in the Developer Resources: Dashicons docs, but annoyingly it is buried at the bottom of the page. There are no links to this info at the top of the page, so I didn't even know it existed. 🙃

Anyways, here's a direct link to the instructions on how to use Dashicons from @wordpress/components You'll find the specifics under Block Usage.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.