古腾堡内联 svg 图标实际上不起作用吗？

Question

我正在创建一个古腾堡块，我为它设计了一个快速 "test" svg 图标。这是它的来源：

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path fill="none" d="M0 0h24v24H0V0z"></path><g><path d="M19 6H5L3 8v8l2 2h14l2-2V8l-2-2zm0 10H5V8h14v8z"></path></g></svg>

我的区块已成功添加到古腾堡版页面。然而，该图标并未在后台使用。检查源代码，DOM 似乎 不存在 。只有包装元素还空着：

<div class="editor-block-icon has-colors"></div>

所以，我发现很多教程都在重复同样的事情：我们可以使用标识符字符串，或者生成图标（通过 wp.element.createElement）。但是我发现没有使用字符串的工作示例。 The documentation 似乎也不稳定，因为 svg 字符串没有被引号括起来，这破坏了我的 JS。来自文档：

// Specifying a custom svg for the block
icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>,

然而，即使有引号，我最终还是得到一个空的图标容器。我想我错过了什么。所以，这是我的测试结果。只有第一个实际显示了一些东西：

// Works
icon: 'format-gallery',

// Doc example, empty
icon: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>',

// Doc example, invalid character JS error starting at "<svg..."
icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>,

// My icon, empty
icon: '<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><g><path d="M181,49v93H17V49H181 M189,41H9v109h180V41L189,41z"/></g><g><line class="st0" x1="31.5" y1="68.5" x2="111.5" y2="68.5"/></g><line class="st0" x1="31.5" y1="80" x2="71.5" y2="80"/><line class="st1" x1="31.5" y1="98" x2="105.5" y2="98"/><line class="st1" x1="31.5" y1="105" x2="105.5" y2="105"/><line class="st1" x1="31.5" y1="112" x2="105.5" y2="112"/><line class="st1" x1="31.5" y1="119" x2="81.5" y2="119"/></svg>',

Answer 1

您可以分配给变量图标值，然后在 registerBlockType 部分中使用它。

const el = element.createElement;

const icon = el('svg', { className: 'icon-class-name', width: 24, height: 24 },
    el('path', { d: "M 13.327481..." } ),
    el('path', { d: "..." } )
);

registerBlockType( 'block/block-block', {
    title: 'Block title',
    description: 'Block description',
    icon: icon, //Icon variable
    category: 'common',
    attributes: { },

在你的情况下（*在你的例子中 svg 有很多空行）：

const icon = el('svg', { width: 24, height: 24 },
    el('path', { d: "M 22.933333,5.7999995 V 18.2 H 1.066667 V 5.7999995 H 22.933333 M 24,4.7333335 H 0 V 19.266666 h 24 z" } )
);

Answer 2

SVG 代码不应包含在单引号或双引号中，这是工作 svg 图标的片段 -

icon: <svg class="svg-icon" viewBox="0 0 20 20" role="img" aria-hidden="true" focusable="false">
          <path fill="none" d="M12.871,9.337H7.377c-0.304,0-0.549,0.246-0.549,0.549c0,0.303,0.246,0.55,0.549,0.55h5.494
             c0.305,0,0.551-0.247,0.551-0.55C13.422,9.583,13.176,9.337,12.871,9.337z M15.07,6.04H5.179c-0.304,0-0.549,0.246-0.549,0.55
             c0,0.303,0.246,0.549,0.549,0.549h9.891c0.303,0,0.549-0.247,0.549-0.549C15.619,6.286,15.373,6.04,15.07,6.04z M17.268,1.645
             H2.981c-0.911,0-1.648,0.738-1.648,1.648v10.988c0,0.912,0.738,1.648,1.648,1.648h4.938l2.205,2.205l2.206-2.205h4.938
             c0.91,0,1.648-0.736,1.648-1.648V3.293C18.916,2.382,18.178,1.645,17.268,1.645z M17.816,13.732c0,0.607-0.492,1.1-1.098,1.1
             h-4.939l-1.655,1.654l-1.656-1.654H3.531c-0.607,0-1.099-0.492-1.099-1.1v-9.89c0-0.607,0.492-1.099,1.099-1.099h13.188
             c0.605,0,1.098,0.492,1.098,1.099V13.732z"></path></svg>,

所以你的svg代码应该是-

icon: <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><g><path d="M181,49v93H17V49H181 M189,41H9v109h180V41L189,41z"/></g><g><line class="st0" x1="31.5" y1="68.5" x2="111.5" y2="68.5"/></g><line class="st0" x1="31.5" y1="80" x2="71.5" y2="80"/><line class="st1" x1="31.5" y1="98" x2="105.5" y2="98"/><line class="st1" x1="31.5" y1="105" x2="105.5" y2="105"/><line class="st1" x1="31.5" y1="112" x2="105.5" y2="112"/><line class="st1" x1="31.5" y1="119" x2="81.5" y2="119"/></svg>,

Answer 3

编写示例的语言是JSX, not Javascript. It needs to be precompiled to Javascript, for example with babeljs and the appropriate plugin。

对我来说，以下 babel 选项

presets: ['@babel/preset-env'],
plugins: [
    ["@babel/plugin-transform-react-jsx", {
        "pragma": "el"
    }]
]

转换了这个 JSX 源代码

function Icon () {
    return <svg 
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        role="img"
        focusable="false"  
        viewBox="0 0 24 24"
        width="24"
        height="24"
    >
        <path d="M19 6H5L3 8v8l2 2h14l2-2V8l-2-2zm0 10H5V8h14v8z" />
    </svg>
}

registerBlockType( 'crw-block-editor/shortcode', {
    title: 'Block title',
    description: 'Block description',
    icon: <Icon />,
    ...
});

到此编译Javascript:

function Icon() {
    return el("svg", {
        "aria-hidden": "true",
        role: "img",
        focusable: "false",
        viewBox: "0 0 24 24",
        width: "24",
        height: "24"
    }, el("path", {
        d: "M19 6H5L3 8v8l2 2h14l2-2V8l-2-2zm0 10H5V8h14v8z"
    }));
}

registerBlockType("crw-block-editor/shortcode", {
    title: 'Block title',
    description: 'Block description',
    icon: el(Icon, null),
    ...
});

古腾堡内联 svg 图标实际上不起作用吗？

Does Gutenberg inline svg icon actually not work?

svg

wordpress-gutenberg