Editor.js自定义插件引入外部SVG渲染为字符串如何解决

问题核心 #

默认情况下你的打包工具导入SVG文件时，返回的是文件的访问路径而非原始SVG代码字符串，Editor.js的icon字段仅支持直接传入原生SVG字符串，因此无法正常渲染。

不同打包工具的配置方案 #

Webpack 环境 #

1. 安装依赖：

npm install svg-inline-loader --save-dev

2. 修改webpack配置文件，新增SVG处理规则：

module.exports = {
  // 其他配置保持不变
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader',
        exclude: /node_modules/
      }
    ]
  }
}

如果不想修改全局配置，可以在导入时临时指定loader：

const toolBoxIcon = require('!!svg-inline-loader!./image.svg');

Vite 环境 #

无需修改全局配置，导入时添加?raw后缀即可直接获取SVG原始字符串：

// CommonJS 写法
const toolBoxIcon = require('./image.svg?raw');
// ES 模块写法
import toolBoxIcon from './image.svg?raw';

替代方案（无需修改打包配置） #

如果不想调整打包规则，可以直接把SVG代码封装为JS字符串导出使用：
新建icons.js文件：

export const ImageToolIcon = `<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>`

使用时直接导入赋值即可：

import { ImageToolIcon } from './icons.js';
return {
  title: 'Image',
  icon: ImageToolIcon,
};

内容的提问来源于stack exchange，提问作者Yoofi Brown-Pobee