如何为自定义Gutenberg短代码区块设置插件内SVG图标？

我帮你梳理了两种可行的实现方案，按需选择就行：

方式一：内联SVG（推荐） #

这种方式最稳定，能让图标完美适配Gutenberg编辑器的样式（比如选中时的颜色变化），还能避免路径加载问题。

操作步骤： #

1. 打开你插件images文件夹里的自定义SVG图标，复制<svg>标签内的所有形状元素（比如<path>、<rect>这类）；
2. 在区块注册的JS代码里，把SVG转换成React元素，替换原来的图标定义：

(function( wp ) {
    var __ = wp.i18n.__;
    var el = wp.element.createElement;
    var registerBlockType = wp.blocks.registerBlockType;

    // 定义自定义图标：把你复制的SVG形状元素放到这里
    const CustomBlockIcon = el('svg', {
        width: 20,
        height: 20,
        viewBox: '0 0 20 20', // 必须添加viewBox，否则SVG会显示变形
        xmlns: 'http://www.w3.org/2000/svg'
    },
    // 示例：替换成你自己的SVG形状代码
    el('path', {
        d: 'M10 2C5.589 2 2 5.589 2 10s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 14c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zm1-10h-2v6h2V6zm0 8h-2v2h2v-2z'
    })
    );

    // 注册你的短代码区块
    registerBlockType('your-plugin/shortcode-block', {
        title: __('Shortcode Block', 'your-plugin-domain'),
        icon: CustomBlockIcon, // 这里用上自定义图标
        category: 'widgets',
        attributes: {
            // 你的区块属性（比如短代码内容）
        },
        edit: function( props ) {
            // 编辑界面逻辑，按需编写
            return el('div', {}, __('Insert your shortcode here', 'your-plugin-domain'));
        },
        save: function( props ) {
            // 静态区块的保存逻辑，通常返回null或渲染后的短代码
            return null;
        }
    });
})( window.wp );

方式二：引用外部SVG文件 #

如果你不想内联SVG，也可以直接引用插件里的图标文件，但需要先把插件URL传递到JS环境：

步骤1：在PHP中传递插件URL #

在注册区块脚本的PHP代码里，用wp_localize_script把插件根URL传给JS：

// 注册区块JS脚本
wp_register_script(
    'your-plugin-block-script',
    plugin_dir_url(__FILE__) . 'js/block.js',
    array('wp-blocks', 'wp-i18n', 'wp-element'),
    filemtime(plugin_dir_path(__FILE__) . 'js/block.js')
);

// 把插件URL注入到JS变量
wp_localize_script('your-plugin-block-script', 'PluginData', array(
    'pluginUrl' => plugin_dir_url(__FILE__)
));

wp_enqueue_script('your-plugin-block-script');

步骤2：在JS中引用SVG #

(function( wp ) {
    var __ = wp.i18n.__;
    var el = wp.element.createElement;
    var registerBlockType = wp.blocks.registerBlockType;

    // 用img标签引用插件里的SVG文件
    const CustomBlockIcon = el('img', {
        src: PluginData.pluginUrl + 'images/custom-icon.svg',
        width: 20,
        height: 20,
        alt: __('Shortcode Block Icon', 'your-plugin-domain')
    });

    // 注册区块（其余逻辑和方式一一致）
    registerBlockType('your-plugin/shortcode-block', {
        title: __('Shortcode Block', 'your-plugin-domain'),
        icon: CustomBlockIcon,
        category: 'widgets',
        // 你的区块属性、edit、save逻辑...
    });
})( window.wp );

关键提醒 #

• 内联SVG必须添加viewBox属性，否则图标会变形或显示不全；
• 引用外部SVG时，确认PluginData.pluginUrl正确指向你的插件根目录，避免路径错误；
• 如果SVG自带固定填充色，可以删掉fill属性，让图标继承Gutenberg编辑器的默认颜色，适配不同界面状态。

内容的提问来源于stack exchange，提问作者Bhavya Hegde