我在哪里可以找到古腾堡的区块图标？

时间：2019-02-12 作者：Sam

WordPress文档中是否有显示古腾堡方块图标名称的文档？

为了给你一些背景，我使用ACF blocks for Gutenberg, 并且需要为\'icon\'.

add_action(\'acf/init\', \'my_acf_init\');
function my_acf_init() {

    // check function exists
    if( function_exists(\'acf_register_block\') ) {

        // register a testimonial block
        acf_register_block(array(
            \'name\'              => \'testimonial\',
            \'title\'             => __(\'Testimonial\'),
            \'description\'       => __(\'A custom testimonial block.\'),
            \'render_callback\'   => \'my_acf_block_render_callback\',
            \'category\'          => \'formatting\',
            \'icon\'              => \'admin-comments\',
            \'keywords\'          => array( \'testimonial\', \'quote\' ),
        ));
    }
}

5 个回复

最合适的回答,由SO网友:moped 整理而成

古腾堡正在使用dashicons
您可以找到示例图标here, 和dashicons的备忘单here.

SO网友:Jules

在这里，您可以找到所有古腾堡图标的列表，包括名称和预览：https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library

为了使用它，您需要复制实际的SVG源代码。

<小时/>

Example: register an ACF block with the postExcerpt icon

您需要检查实际元素并从中提取SVG图标的源代码https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library:

<svg><path d="M12.75 9.333c0 .521-.102.977-.327 1.354-.23.386-.555.628-.893.774-.545.234-1.183.227-1.544.222l-.12-.001v-1.5h.123c.414.001.715.002.948-.099a.395.395 0 00.199-.166c.05-.083.114-.253.114-.584V7.2H8.8V4h3.95v5.333zM7.95 9.333c0 .521-.102.977-.327 1.354-.23.386-.555.628-.893.774-.545.234-1.183.227-1.544.222l-.12-.001v-1.5h.123c.414.001.715.002.948-.099a.394.394 0 00.198-.166c.05-.083.115-.253.115-.584V7.2H4V4h3.95v5.333zM13 20H4v-1.5h9V20zM20 16H4v-1.5h16V16z"></path></svg>

然后，可以按如下方式注册块：

add_action(\'acf/init\', \'my_acf_blocks_init\');
function my_acf_blocks_init() {

    // Check function exists.
    if( function_exists(\'acf_register_block_type\') ) {

        // Register a testimonial block.
        acf_register_block_type(array(
            \'name\'              => \'testimonial\',
            \'title\'             => __(\'Testimonial\'),
            \'description\'       => __(\'A custom testimonial block.\'),
            \'render_template\'   => \'template-parts/blocks/testimonial/testimonial.php\',
            \'category\'          => \'formatting\',
            \'icon\'              => \'<svg><path d="M12.75 9.333c0 .521-.102.977-.327 1.354-.23.386-.555.628-.893.774-.545.234-1.183.227-1.544.222l-.12-.001v-1.5h.123c.414.001.715.002.948-.099a.395.395 0 00.199-.166c.05-.083.114-.253.114-.584V7.2H8.8V4h3.95v5.333zM7.95 9.333c0 .521-.102.977-.327 1.354-.23.386-.555.628-.893.774-.545.234-1.183.227-1.544.222l-.12-.001v-1.5h.123c.414.001.715.002.948-.099a.394.394 0 00.198-.166c.05-.083.115-.253.115-.584V7.2H4V4h3.95v5.333zM13 20H4v-1.5h9V20zM20 16H4v-1.5h16V16z"></path></svg>\'
        ));
    }
}

Result: