Add custom icons to Social Link Block (Editor)

social-link-custom-icons.js

/**
 * Dependencies
 */
import { addFilter } from '@wordpress/hooks';
import { Path, SVG } from '@wordpress/primitives';

/**
 * Constants
 */
const { assign, merge } = lodash;

/**
 * Icons
 */
const DocumentIcon = () => (
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
        <Path d="M5,3H13.1667V8.83333H19V21.6667H5V3ZM19,7.66667H14.3333V3L19,7.66667Z" />
    </SVG>
);
const FaxIcon = () => (
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
        <Path d="M7,4.5V8.25H9.5V4.5H17.1055L18.25,5.64453V8.25H20.75V5.64453C20.75,4.98047,20.4883,4.34375,20.0195,3.875L18.875,2.73047C18.4062,2.26172,17.7695,2,17.1055,2H9.5C8.12109,2,7,3.12109,7,4.5ZM2,8.25V20.75C2,21.4414,2.55859,22,3.25,22H4.5C5.19141,22,5.75,21.4414,5.75,20.75V8.25C5.75,7.55859,5.19141,7,4.5,7H3.25C2.55859,7,2,7.55859,2,8.25ZM20.75,9.5H7V20.75C7,21.4414,7.55859,22,8.25,22H20.75C21.4414,22,22,21.4414,22,20.75V10.75C22,10.0586,21.4414,9.5,20.75,9.5ZM12,12C12.3315,12,12.6495,12.1317,12.8839,12.3661C13.1183,12.6005,13.25,12.9185,13.25,13.25C13.25,13.5815,13.1183,13.8995,12.8839,14.1339C12.6495,14.3683,12.3315,14.5,12,14.5C11.6685,14.5,11.3505,14.3683,11.1161,14.1339C10.8817,13.8995,10.75,13.5815,10.75,13.25C10.75,12.9185,10.8817,12.6005,11.1161,12.3661C11.3505,12.1317,11.6685,12,12,12ZM15.75,13.25C15.75,12.9185,15.8817,12.6005,16.1161,12.3661C16.3505,12.1317,16.6685,12,17,12C17.3315,12,17.6495,12.1317,17.8839,12.3661C18.1183,12.6005,18.25,12.9185,18.25,13.25C18.25,13.5815,18.1183,13.8995,17.8839,14.1339C17.6495,14.3683,17.3315,14.5,17,14.5C16.6685,14.5,16.3505,14.3683,16.1161,14.1339C15.8817,13.8995,15.75,13.5815,15.75,13.25ZM17,17C17.3315,17,17.6495,17.1317,17.8839,17.3661C18.1183,17.6005,18.25,17.9185,18.25,18.25C18.25,18.5815,18.1183,18.8995,17.8839,19.1339C17.6495,19.3683,17.3315,19.5,17,19.5C16.6685,19.5,16.3505,19.3683,16.1161,19.1339C15.8817,18.8995,15.75,18.5815,15.75,18.25C15.75,17.9185,15.8817,17.6005,16.1161,17.3661C16.3505,17.1317,16.6685,17,17,17ZM10.75,18.25C10.75,17.9185,10.8817,17.6005,11.1161,17.3661C11.3505,17.1317,11.6685,17,12,17C12.3315,17,12.6495,17.1317,12.8839,17.3661C13.1183,17.6005,13.25,17.9185,13.25,18.25C13.25,18.5815,13.1183,18.8995,12.8839,19.1339C12.6495,19.3683,12.3315,19.5,12,19.5C11.6685,19.5,11.3505,19.3683,11.1161,19.1339C10.8817,18.8995,10.75,18.5815,10.75,18.25Z" />
    </SVG>
);
const MobileIcon = () => (
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
        <Path d="M9.45455,4.54545V5.18182C9.45455,5.53182,9.74091,5.81818,10.0909,5.81818H13.9091C14.2591,5.81818,14.5455,5.53182,14.5455,5.18182V4.54545H15.8182C16.1682,4.54545,16.4545,4.83182,16.4545,5.18182V19.1818C16.4545,19.5318,16.1682,19.8182,15.8182,19.8182H8.18182C7.83182,19.8182,7.54545,19.5318,7.54545,19.1818V5.18182C7.54545,4.83182,7.83182,4.54545,8.18182,4.54545H9.45455ZM8.18182,2C6.42386,2,5,3.42386,5,5.18182V19.1818C5,20.9398,6.42386,22.3636,8.18182,22.3636H15.8182C17.5761,22.3636,19,20.9398,19,19.1818V5.18182C19,3.42386,17.5761,2,15.8182,2H8.18182ZM9.45455,17.9091C9.45455,18.2591,9.74091,18.5455,10.0909,18.5455H13.9091C14.2591,18.5455,14.5455,18.2591,14.5455,17.9091C14.5455,17.5591,14.2591,17.2727,13.9091,17.2727H10.0909C9.74091,17.2727,9.45455,17.5591,9.45455,17.9091Z" />
    </SVG>
);
const PhoneIcon = () => (
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
        <Path d="M2,3.25L7.625,2L10.75,7.625L7.47656,10.2422C8.88672,12.9141,11.082,15.1094,13.7578,16.5234L16.375,13.25L22,16.375L20.75,22H19.5C9.83594,22,2,14.1641,2,4.5V3.25Z" />
    </SVG>
);
const WebsiteIcon = () => (
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
        <Path d="M15.7529,12C15.7529,12.8672,15.7061,13.7031,15.624,14.5H13.0107L13.5029,12.8281C13.9209,11.4062,12.6006,10.082,11.1748,10.5L8.26074,11.3555C8.27637,10.7188,8.31934,10.0977,8.38184,9.5H15.624C15.71,10.2969,15.7529,11.1328,15.7529,12ZM2.7998,12.9609C2.52246,13.043,2.28809,13.1758,2.09277,13.3477C2.03418,12.9062,2.00293,12.457,2.00293,12C2.00293,11.1367,2.1123,10.3008,2.31934,9.5H7.12793C7.05371,10.2188,7.01465,10.9609,7.00684,11.7266L2.7998,12.9609ZM11.042,21.2031L12.6436,15.75H15.4521C15.2139,17.1719,14.8467,18.4297,14.3975,19.4453C13.9873,20.3672,13.5303,21.0352,13.0889,21.457C12.6514,21.875,12.2881,22,12.0029,22C11.7217,22,11.3662,21.8789,10.9365,21.4766C10.9756,21.3906,11.0107,21.2969,11.042,21.1992V21.2031ZM16.8779,9.5H21.6865C21.8936,10.3008,22.0029,11.1367,22.0029,12C22.0029,12.8633,21.8936,13.6992,21.6865,14.5H16.8779C16.96,13.6953,17.0029,12.8594,17.0029,12C17.0029,11.1406,16.96,10.3047,16.8779,9.5ZM21.2764,8.25H16.7178C16.3271,5.75391,15.5537,3.66406,14.5576,2.32812C17.6162,3.13672,20.1045,5.35547,21.2725,8.25H21.2764ZM8.55371,8.25C8.79199,6.82812,9.15918,5.57031,9.6084,4.55078C10.0186,3.62891,10.4756,2.96094,10.917,2.53906C11.3545,2.125,11.7178,2,12.0029,2C12.2881,2,12.6514,2.125,13.0889,2.53906C13.5303,2.96094,13.9873,3.62891,14.3975,4.55078C14.8506,5.56641,15.2139,6.82422,15.4521,8.25H8.55371ZM7.28809,8.25H2.72949C3.90137,5.35547,6.38574,3.13672,9.44824,2.32812C8.45215,3.66406,7.67871,5.75391,7.28809,8.25ZM21.2764,15.75C20.1045,18.6445,17.6201,20.8633,14.5615,21.6719C15.5576,20.3359,16.3271,18.2461,16.7217,15.75H21.2764ZM3.52637,14.0508L11.5264,11.6992C11.999,11.5586,12.4404,12,12.3037,12.4766L9.95215,20.4766C9.79199,21.0195,9.0459,21.0859,8.79199,20.5781L7.6709,18.3398C7.64355,18.2891,7.6123,18.2383,7.57324,18.1953L4.13574,21.6328C3.64746,22.1211,2.85449,22.1211,2.36621,21.6328C1.87793,21.1445,1.87793,20.3516,2.36621,19.8633L5.80371,16.4258C5.76074,16.3867,5.71387,16.3516,5.65918,16.3281L3.4248,15.2109C2.91699,14.957,2.9834,14.2109,3.52637,14.0508Z" />
    </SVG>
);

/**
 * Variations
 */
function addCustomVariations(settings, name) {
    if ( name === 'core/social-link' ) {
        return assign({}, settings, {
            variations: merge(settings.variations, [
                {
                    name: 'document',
                    attributes: { service: 'document' },
                    title: 'Document',
                    icon: DocumentIcon,
                },
                {
                    name: 'fax',
                    attributes: { service: 'fax' },
                    title: 'Fax',
                    icon: FaxIcon,
                },
                {
                    name: 'mobile',
                    attributes: { service: 'mobile' },
                    title: 'Mobile',
                    icon: MobileIcon,
                },
                {
                    name: 'phone',
                    attributes: { service: 'phone' },
                    title: 'Phone',
                    icon: PhoneIcon,
                },
                {
                    name: 'website',
                    attributes: { service: 'website' },
                    title: 'Website',
                    icon: WebsiteIcon,
                },
            ]),
        });
    }
    return settings;
}
addFilter(
    'blocks.registerBlockType',
    'block-mods/social-link-block/add-custom-variations',
    addCustomVariations,
);