GrapesJS SVG icon

by artur_arseniev

HTML

<script src="https://unpkg.com/grapesjs"></script>
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
<script src="https://unpkg.com/grapesjs-blocks-basic"></script>
<div id="gjs">
  <div style="padding: 25px">Hello World!!!</div>
</div>

CSS

body, html {
  margin: 0;
  height: 100%;
}

Babel + JSX

const svgComp = editor => {
	editor.DomComponents.addType('info-icon', {
    extend: 'svg',
    model: {
      defaults: {
      	tagName: 'svg',
        name: 'InfoIcon',
        attributes: {
          xmlns: 'http://www.w3.org/2000/svg',
          viewBox: '0 0 24 24',
        },
        components: '<path d="M12 2L1 21h22M12 6l7.53 13H4.47M11 10v4h2v-4m-2 6v2h2v-2"></path>',
        script: function () {
          setTimeout(() => {
          	console.log(this, this instanceof SVGElement);
          })
        },
      }
    }
	});
};

const editor = grapesjs.init({
	container: '#gjs',
  fromElement: 1,
  height: '100%',
  storageManager: 0,
  plugins: [svgComp],
});
window.gjsEditor = editor;

editor.BlockManager.add('testBlock', {
	label: 'InfoIcon',
	content: { type: 'info-icon' },
})