Introduce the ability for themes to provide custom icons for the Icon block

[EvanHerman]

Resolves #923

Introduce the ability to use custom icons directly within the icon block.

No UI is introduced in this PR to manage custom icons (add/remove). Icons (.svg files) must be manually added to the proper directory (listed below) in your theme root. This PR lays the groundwork for the behind the scenes work - in a future release we could potentially create a UI to manage these icons.

How To

1. Create a coblocks/icons/ directory inside of your theme root. (eg: wp-content/themes/primer/coblocks/icons/)
2. Drop your .svg files into this directory
3. Check the icon block for your custom icons 🎉

When the config.json file (see below) is not present, these values are generated from the icons file name.
eg: adobe-photoshop.svg => Label: Adobe Photoshop, Keywords: adobe, photoshop

Optional Icon Configuration File

Users can also create an optional config.json file inside of the coblocks/icons/ directory in the theme root. In this file, they can further define settings for each icon.

• label - The label for the icon
• keywords - The keywords used to search for the icon
• icon_outlined - The name of the outlined version of the icon (eg: adobe-photoshop-outlined.svg)

Demo

Filled

Outlined

Demo Icons/config.json

coblocks-custom-icons.zip

[richtabor]

@paranoia1906 Do you mind updating this support ticket that we're working/experimenting on this: https://wordpress.org/support/topic/icon-block-2/

[AnthonyLedesma]

Users can also create an optional config.json file inside of the coblocks/icons/ directory in the theme root. In this file, they can further define settings for each icon.

I found that if config.json is not present in the coblocks/icons/ directory that the custom icons do not populate. Is the config.json mandatory or optional? Good work on this!

Now works with or without the config.json present

[AnthonyLedesma]

How-To Use Custom Icons

The CoBlocks Icon block now allows the use of custom icons by examining the directory of your active theme in search of SVG files. This documentation will explain the steps and requirements needed to upload custom icons to use with CoBlocks.

Steps

1. You should create a directory and subdirectory within the root of your active theme/child theme as follows:
   coblocks/icons/
   eg: wp-content/themes/twentytwenty/coblocks/icons.
2. Drop your .svg icons into this directory.

• See SVG Requirements

3. Optionally configure the icons

• See Optional Configuration File

4. Check the icon block for your custom icons 🎉

SVG requirements

SVG files used for custom icons may not contain XML markup. For example, we can look at this sample .svg file.

Original

<?xml version="1.0" encoding="iso-8859-1"?>
<svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><circle class="inner-circle" cx="20" cy="20" r="8" stroke-width="8" stroke-dasharray="50.2655 50.2655" stroke-dashoffset="0"></circle></svg>

Edited

<svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><circle class="inner-circle" cx="20" cy="20" r="8" stroke-width="8" stroke-dasharray="50.2655 50.2655" stroke-dashoffset="0"></circle></svg>

Optional Configuration File

Your custom icons can be further configured by placing a config.json file within the coblocks/icons folder alongside your SVG icons. The configuration file will allow you to specify search keywords, labels, and outline style.

Example config.json file:

{
    "adobe-photoshop": {
        "label": "Adobe Photoshop",
        "keywords": "adobe photoshop",
        "icon_outlined": "adobe-photoshop-outlined.svg"
    },
    "apple-logo": {
        "label": "Apple Logo",
        "keywords": "apple logo",
        "icon_outlined": "apple-logo-outlined.svg"
    },
    "chrome": {
        "label": "Chrome",
        "keywords": "chrome web browser",
        "icon_outlined": "chrome-outlined.svg"
    },
    "mac-logo": {
        "label": "Mac Logo",
        "keywords": "mac logo computer",
        "icon_outlined": "mac-logo-outlined.svg"
    }
}

[richtabor]

Works great though I didn't test it using a child theme with coblocks/icons/* svgs added to it.

[richtabor]

Looks good to me though I'd like @jrtashjian's technical review as well. 👍

[jrtashjian]

This is awesome! Works wonderfully and is a great addition.