1

I am running into some trouble in importing the wordpress icons package. Trying to do what is described on this page.

https://developer.wordpress.org/block-editor/components/placeholder/

Just like every other package, I have imported the package via npm, then placed the import statement at the top of my file.

import { pin, list, grid } from '@wordpress/icons';

and then using it like this.

<Placeholder icon={ pin } label={ __( 'My Projects' ) }>

When I view the block in the editor, my block is now broken and I get an error in the console:

TypeError: Cannot read property 'pin' of undefined

Is there an extra step I need to take to get the icon package to work?

1 Answer 1

1

I have ran across this before. The code looks fine and this should work. What the error indicates is that those imports are not being found. This can be for several of reasons.

  1. Did you import the @wordpress/icons package through npm?
  2. Is the package a current or recent version? Can run npm outdated to see which packages are outdated.
  3. Is the build properly building? <- this is what got me. My build was building but I was using an old version of @wordpress/scripts which resulted in the icons not being loaded due to a JSX conflict. Once I updated this the icons started loading properly.

Hope this helps and gives you things you can look at.

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.