首页 > 解决方案 > 导入的 SVG 渲染为字符串

问题描述

我正在使用 editorjs npm 包并创建了一个自定义插件。

要为编辑器显示图标,必须提供 SVG,如下所示 在此处输入图像描述

这在使用内联 svg 时有效,如下所示

return {
            title: 'Image',
            icon: '<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/></svg>',
        }

但是,当我尝试导入 SVG 并改用引用时:

const toolBoxIcon = require('./image.svg');
return {
            title: 'Image',
            icon: toolBoxIcon,
        };

它呈现为字符串:

在此处输入图像描述

我试图弄清楚在第二个实例中加载 SVG 需要做什么。

标签: javascripthtmlreactjseditorjs

解决方案


推荐阅读