Create Compass Dashicon

[ashleyshaw]

Is your feature request related to a problem? Please describe

The Tour Operator plugin logo is a compass, and we need to create a custom SVG Dashicon styled like WordPress Dashicons. This will help integrate our brand identity directly within the block editor and use it consistently across our block variations.

Describe the solution you'd like

Design a compass SVG icon that follows the visual style of Dashicons and integrate it into the Tour Operator Plugin by registering it within the block.json file. This icon will be used for both block category registration and as a visual representation in block variations.

Describe alternatives you've considered

An alternative could be using a generic Dashicon, but creating a custom compass icon styled similarly will provide a more cohesive brand experience. This will also make it easier to visually distinguish our custom blocks in the editor.

Additional context**

Dashicons are scalable and optimized for display within the WordPress block editor. To ensure that the icon meets WordPress standards, refer to the Dashicon Component Documentation and Dashicons guidelines.

Block.json Integration:

When defining custom Dashicons in the block.json file, ensure that the icon is properly registered to be used in block variations, providing a consistent visual identifier for our blocks.

Acceptance Criteria:

• Create a compass SVG icon styled according to Dashicons specifications.
• Ensure the icon displays correctly within the block editor and matches the visual style of existing Dashicons.

Tasks:

• Design and optimize the compass SVG icon.
• Test the icon's appearance across different editor views and block variations.

Icons

Link to Icon Page in. Figma

Code Samples

To use components like Dashicons in the WordPress block editor, you can import them using the following code:

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

const MyDashicon = () => (
    <div>
        <Dashicon icon="palmtree" />
    </div>
);

This approach utilizes the Dashicon component from @wordpress/components, making it easy to integrate icons into your custom blocks.

For more details, visit the WordPress components documentation.

The code snippet for importing and using the Dashicon component would typically go into the JavaScript file where you define the block’s edit function or its component structure. Commonly, this is found in the file named edit.js, index.js, or another block-specific file within your block’s source directory.

This structure ensures that the Dashicon appears within the block editor interface, properly integrated with the block’s settings or appearance.

To define a custom SVG as a Dashicon, you would typically handle it within the JavaScript file using the wp.blocks.updateCategory() function. Here’s how to do it:

import { SVG } from '@wordpress/primitives';
import { updateCategory } from '@wordpress/blocks';

const CompassIcon = (
    <SVG width="20" height="20" viewBox="0 0 20 20">
        <circle cx="10" cy="10" r="8" fill="none" stroke="#0073aa" strokeWidth="2" />
        <line x1="10" y1="2" x2="10" y2="18" stroke="#0073aa" strokeWidth="1.5" />
        <line x1="2" y1="10" x2="18" y2="10" stroke="#0073aa" strokeWidth="1.5" />
    </SVG>
);

updateCategory('tour-operator', { icon: CompassIcon });

This code snippet uses wp.blocks.updateCategory() to set the SVG as the custom Dashicon for the “Tour Operator” block category, ensuring it integrates well with WordPress’s block editor interface. This code would typically go into the main JavaScript file for your block registration, such as index.js or editor.js.

[krugazul]

The compass icon has been added into the Block category, and it is available for use for anywhere else. Both the black and white version have been added to the repo. (NB this will be pulled through to the site with Beta 3)