grapesjs-icon-set 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,51 @@
+function grapesjsIconSet(editor, opts = {}) {
+  const options = {
+    root: opts.root || "",
+    icons: opts.icons || [],
+  };
+
+  editor.Commands.add("open-icon-popup", {
+    run(editor) {
+      const modal = editor.Modal;
+      modal.setTitle("Select Icon");
+
+      let content = `<div style="display:grid;grid-template-columns:repeat(6,1fr);gap:10px;">`;
+
+      options.icons.forEach((icon) => {
+        content += `
+          <img 
+            src="${options.root}/${icon}.svg"
+            data-icon="${icon}"
+            style="width:40px;cursor:pointer;"
+          />
+        `;
+      });
+
+      content += `</div>`;
+
+      modal.setContent(content);
+      modal.open();
+
+      modal.getContentEl().onclick = (e) => {
+        const icon = e.target.getAttribute("data-icon");
+        if (!icon) return;
+
+        editor.addComponents(`
+          <img src="${options.root}/${icon}.svg" 
+               style="width:40px;height:40px;" />
+        `);
+
+        modal.close();
+      };
+    },
+  });
+
+  editor.Panels.addButton("options", {
+    id: "icon-set",
+    className: "fa fa-star",
+    command: "open-icon-popup",
+    attributes: { title: "Insert Icon" },
+  });
+}
+
+export { grapesjsIconSet as default };

package/dist/index.js

@@ -0,0 +1,59 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.grapesjsIconSet = factory());
+})(this, (function () { 'use strict';
+
+  function grapesjsIconSet(editor, opts = {}) {
+    const options = {
+      root: opts.root || "",
+      icons: opts.icons || [],
+    };
+
+    editor.Commands.add("open-icon-popup", {
+      run(editor) {
+        const modal = editor.Modal;
+        modal.setTitle("Select Icon");
+
+        let content = `<div style="display:grid;grid-template-columns:repeat(6,1fr);gap:10px;">`;
+
+        options.icons.forEach((icon) => {
+          content += `
+          <img 
+            src="${options.root}/${icon}.svg"
+            data-icon="${icon}"
+            style="width:40px;cursor:pointer;"
+          />
+        `;
+        });
+
+        content += `</div>`;
+
+        modal.setContent(content);
+        modal.open();
+
+        modal.getContentEl().onclick = (e) => {
+          const icon = e.target.getAttribute("data-icon");
+          if (!icon) return;
+
+          editor.addComponents(`
+          <img src="${options.root}/${icon}.svg" 
+               style="width:40px;height:40px;" />
+        `);
+
+          modal.close();
+        };
+      },
+    });
+
+    editor.Panels.addButton("options", {
+      id: "icon-set",
+      className: "fa fa-star",
+      command: "open-icon-popup",
+      attributes: { title: "Insert Icon" },
+    });
+  }
+
+  return grapesjsIconSet;
+
+}));

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "grapesjs-icon-set",
+  "version": "1.0.0",
+  "description": "Custom SVG icon set plugin for GrapesJS",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "keywords": [
+    "grapesjs",
+    "icons",
+    "svg",
+    "plugin"
+  ],
+  "author": "Ragul",
+  "license": "MIT",
+  "peerDependencies": {
+    "grapesjs": "^0.21.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "rollup -c"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "rollup": "^4.59.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,17 @@
+import resolve from "@rollup/plugin-node-resolve";
+
+export default {
+  input: "src/index.js",
+  output: [
+    {
+      file: "dist/index.js",
+      format: "umd",
+      name: "grapesjsIconSet"
+    },
+    {
+      file: "dist/index.esm.js",
+      format: "es"
+    }
+  ],
+  plugins: [resolve()]
+};