Question

我正在创建一个Gutenberg块，并为此设计了一个快速的“测试” 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>

我的图块已成功添加到Gutenberg版本页面。但是该图标未在后台使用。检查源代码，它似乎在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

示例所用的语言是JSX，而不是Javascript。它需要预先编译为Javascript，例如使用babeljs和相应的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),
    ...
});

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

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

numeric

在您的情况下（*在您的示例中svg许多空行）：

registerBlockType

Gutenberg内嵌svg图标实际上不起作用吗？

3 个答案: