WIP Test: Change icons to components with children slot

[jeryj]

Instead of manually copy/pasting the icons over to the paid-icons file, this approach would change the icons we need to add a premium indicator symbol to into a component like:

export default function OpenTableIcon( { children, className } ) {
	return (
		<SVG
			className={ className ? className : null }
			...
		>
			<Path
				fill="#555d66"
				d="..."
			/>
			{ children }
		</SVG>
	);
}

Then, when using the icon in paid-icons.js:

import PaidSymbol from './paid-symbol';
import OpenTableIcon from '../../blocks/opentable/icon';

const openTablePaidIcon = (
	<OpenTableIcon className={ paidBlockClassName }>
		<PaidSymbol cx="24" cy="0" />
	</OpenTableIcon>
);

This removes the duplication of copy/pasted icon definitions when possible, but still allows for copy/pasting when we can't modify the icon. It does mean touching more files in more places, so could be harder to "undo" in the end if we did not need the { children } anymore.

I don't know if there are some contexts in which it would break the icon usage. Open Table uses the icon in the placeholder, and fortunately, this still works in that instance without any further changes:

const blockPlaceholder = (
		<Placeholder
			...
			icon={ <BlockIcon icon={ icon } /> }
			...
		>
			...
		</Placeholder>
	);

Open Table Icon rendered correctly in the block placeholder when the root icon is changed into the new format

[stale]

This PR has been marked as stale. This happened because:

• It has been inactive in the past 3 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this PR has clear testing instructions, is it up to date with master, and it is still valid. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[jeherve]

Closing this now that the base branch is not worked on anymore.