Add routine to generate a PHP repository of SVG icons

[bobbingwide]

Gutenberg now uses SVG instead of dashicons for the pretty images used for blocks, block icons etc. The [bw_dash] shortcode and associated block should also support SVG images. In the first version of bw_dash I extracted the d= attribute from the svg tag and hand crafted a PHP array that could be used in the server to return the required icon. I now want to automate the process of updating this file. There are 3 sources for the icons:

Source	Contains	Number
gutenberg/packages/block-library/src/social-link/icons	social link icons	43 .js files
gutenberg/packages/icons/src/library	icons in the WordPress icons library	235 .js files
https://github.com/WordPress/dashicons/tree/master/sources/svg	orginal dashicons	342 .svg files

Notes:

• The files are only in the source repositories.
• They are not part of the runtime plugin.

Requirement

• To build a PHP repository of the Gutenberg social icons, WordPress icons and SVG dashicons
• To be used by the PHP shared library class OIK_SVG_icons
• May also be used by the oik-bbw/dashicons block.

Proposed solution

• [x] Write a batch routine to process the 600 or so input files. svg2php.php
• [x] Use the file name for the icon name - key of the $icons array.
• [x] Extract the value of the d attribute from the Path tag as the value of the $icons array
• [x] Generate a .php file to load in class OIK_SVG_icons, using require_once ?
• [x] Deliver the file ( it was originally called oik-dash-svg-list.php ) as a shared library file
• [x] Cater for duplicate keys. Solution TBC. Probably newest version trumps the others.

Structure of the file

function bw_dash_list_svg_icons() {
   $icons = array();
   $icons['admin-appearance'] 
=  'M14.48 11.06L7.41 3.99l1.5-1.5c.5-.56 2.3-.47 3.51.32 1.21.8 1.43 1.28 2.91 2.1 1.18.64 2.45 1.26 4.45.85zm-.71.71L6.7 4.7 4.93 6.47c-.39.39-.39 1.02 0 1.41l1.06 1.06c.39.39.39 1.03 0 1.42-.6.6-1.43 1.11-2.21 1.69-.35.26-.7.53-1.01.84C1.43 14.23.4 16.08 1.4 17.07c.99 1 2.84-.03 4.18-1.36.31-.31.58-.66.85-1.02.57-.78 1.08-1.61 1.69-2.21.39-.39 1.02-.39 1.41 0l1.06 1.06c.39.39 1.02.39 1.41 0z';

 ...

return $icons;
}

/**
 * WordPress dependencies
 */
import { Path, SVG } from '@wordpress/primitives';

const wordpress = (
    <SVG xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
        <Path d="M20 10c0-5.51-4.49-10-10-10C4.48 0 0 4.49 0 10c0 5.52 4.48 10 10 10 5.51 0 10-4.48 10-10zM7.78 15.37L4.37 6.22c.55-.02 1.17-.08 1.17-.08.5-.06.44-1.13-.06-1.11 0 0-1.45.11-2.37.11-.18 0-.37 0-.58-.01C4.12 2.69 6.87 1.11 10 1.11c2.33 0 4.45.87 6.05 2.34-.68-.11-1.65.39-1.65 1.58 0 .74.45 1.36.9 2.1.35.61.55 1.36.55 2.46 0 1.49-1.4 5-1.4 5l-3.03-8.37c.54-.02.82-.17.82-.17.5-.05.44-1.25-.06-1.22 0 0-1.44.12-2.38.12-.87 0-2.33-.12-2.33-.12-.5-.03-.56 1.2-.06 1.22l.92.08 1.26 3.41zM17.41 10c.24-.64.74-1.87.43-4.25.7 1.29 1.05 2.71 1.05 4.25 0 3.29-1.73 6.24-4.4 7.78.97-2.59 1.94-5.2 2.92-7.78zM6.1 18.09C3.12 16.65 1.11 13.53 1.11 10c0-1.3.23-2.48.72-3.59C3.25 10.3 4.67 14.2 6.1 18.09zm4.03-6.63l2.58 6.98c-.86.29-1.76.45-2.71.45-.79 0-1.57-.11-2.29-.33.81-2.38 1.62-4.74 2.42-7.1z" />
    </SVG>
);

export default wordpress;

[bobbingwide]

The current logic can't handle SVG's which are not in the simple form <Path d="SVG stuff"> There are approximately 70 of these, reducing the number of icons from 620 to 550. An example is the icon for Query Pagination. https://github.com/WordPress/gutenberg/blob/trunk/packages/icons/src/library/query-pagination.js

This uses Rect.

<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <Rect x="4" y="10.5" width="6" height="3" rx="1.5" fill="#000" />
        <Rect x="12" y="10.5" width="3" height="3" rx="1.5" fill="#000" />
        <Rect x="17" y="10.5" width="3" height="3" rx="1.5" fill="#000" />
    </SVG>

Others use <g>, <polygon>, etc.

There are also some icons which have other attributes for the <Path> tag. And a few which have different values for viewBox on the <SVG> tag.

[bobbingwide]

The SVG version of some of the dashicons doesn't look right. I'll create a page showing the dashicon and SVG icon version for each icon that's wrong then investigate

Icon	Expect problems ?	Explanation
archive-title	Yes	<Path stroke
query-pagination	Yes	3 Rects
query-pagination-next	Yes	3 Rects
query-pagination-numbers	Yes	Rect
query pagination-previous	Yes	Rect and stroke and strokeWidth
star empty	Yes	fillRule and clipRule
telegram	?	viewBox="0 0 128 128"
term-description	Yes	2 Paths with stroke, strokeWidth, and fill
wordpress	?	SVG version for social links implements wordpress-alt ?

should also look at the 70 or so that don't get included

[bobbingwide]

Extract the value of the d attribute from the Path tag as the value of the $icons array

As noted above, this method didn't work for approx 80 of the icons. The pragmatic solution is to extract the full SVG and to adjust the SVG tag in the code that displays the icon.

[bobbingwide]

Generate a .php file to load in class OIK_SVG_icons, using require_once ?

• The file generated is oik-dash-svg-list.php.
• It implements the shared library function bw_dash_list_svg_icons()
• The file is generated in the libs folder for three plugins: oik, oik-bob-bing-wide, oik-libs
• These are assumed to be present

[bobbingwide]

Deliver the file ( it was originally called oik-dash-svg-list.php ) as a shared library file

oik-dash-svg-list.php is loaded as a shared library file by the class-oik-svg-icons shared library file. See OIK_SVG_icons::list_svg_icons()

[bobbingwide]

Cater for duplicate keys. Solution TBC. Probably newest version trumps the others.

When a duplicate key is found a new entry is created with a suffix indicating which set of icons it's associated with. The dash icons are processed first, followed by icons, then the Social links icons. Example duplicate is:

• wordpress - the original dashicon
• wordpress-icons - from the icons set
• wordpress-links - from the social links set

Note: wordpress-icons and wordpress-links are actually more like the wordpress-alt dashicon.