This plugin works in conjunction with The Icon Block and my fork of Enable Button Icons. Nearly every big project with a custom theme requires some custom icons and this provides a straightforward workflow for building them into your project.
- Install this plugin along with The Icon Block and (optionally) my fork of Enable Button Icons.
- Put SVG icon files in the
/wp-content/plugins/project-icons/project-icons/
directory. - Ensure the icons have hyphenated file names. For example, "paper-plane.svg" will have the slug "paper-plane" and the label "Paper Plane"
- Optionally create directories inside
/wp-content/plugins/project-icons/project-icons
/ and put your icons inside them. For example,wp-content/plugins/project-icons/project-icons/category-one/paper-plane.svg
. The paper plane icon will now be part of "Category One." - If an icon should be a member of two (or more) categories, just put a copy inside each category directory.
- In your terminal, navigate to this plugins directory and install its dependecies with
npm install
- Compile your icons with
npm run build
- Activate the plugin and you'll find your icons in the "Icon Library" when using the Icon Block or the core/button block.
As the project evolves over time simply add more icons to the directory and re-run npm run build
![Screenshot 2024-12-12 at 2 45 34 PM](https://private-user-images.githubusercontent.com/2152870/395352240-c74cf50d-3bcb-40e5-b320-0df4ca0b1d6a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1OTkwODEsIm5iZiI6MTczOTU5ODc4MSwicGF0aCI6Ii8yMTUyODcwLzM5NTM1MjI0MC1jNzRjZjUwZC0zYmNiLTQwZTUtYjMyMC0wZGY0Y2EwYjFkNmEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTVUMDU1MzAxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZTZiMDc0MzBhNjM1NTEyNTVmOWU5NmQzNWNlNmQwZjA3YTA0ZGJiNDIwZTk5NmY4YzY1YzA3Y2I4ZjkwODNkYiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.qU5toO9FqbgIuPAR0MKi-3TKimbo0xAdrV2KuhLAVmg)