grapesjs-icon-set

A massive, high-performance icon library for GrapesJS featuring over 10,000+ SVG icons. This package includes multiple style variants (Round, Sharp, Two-Tone, etc.) organized for easy integration into the GrapesJS Block Manager and Asset Manager.

Key Features

• 10,000+ Icons: A complete set of professional icons.
• Variant Support: Access round, sharp, twotone, and outlined styles.
• Tree-Shakeable: Import only the icons you need to keep your bundle small.
• GrapesJS Optimized: Ready-to-use snippets for custom blocks and assets.

Installation

Install the package into your project using npm:

npm install grapesjs-icon-set

🛠 Usage

1. Basic Import

Import the icon set into your GrapesJS configuration file:

import grapesjs from 'grapesjs';
import { icons } from 'grapesjs-icon-set';
import 'grapesjs/dist/css/grapes.min.css';
import grapesjsIconSet from 'grapesjs-icon-set'; 

const editor = grapesjs.init({
  container: '#gjs',
  plugins: [grapesjsIconSet],
  pluginsOpts: {
      [grapesjsIconSet]: {
        category: 'UI Icons',
        addDefaultIcons: false, // Set to false if you want to add icons manually for performance
      },
    },
  // ... rest of your config
});

2. Adding Icons to the Block Manager

To let users drag icons into their canvas, add them as blocks:

editor.Blocks.add('icon-zoom-out', {
  label: 'Zoom Out',
  media: icons.zoom_out.round, // Use the SVG string from the package
  content: { 
    type: 'svg', 
    content: icons.zoom_out.round,
    attributes: { style: 'width: 50px; height: 50px;' }
  },
  category: 'Icons',
});

3. Integrating with Asset Manager

If you want to provide these as selectable images for users:

const am = editor.AssetManager;

am.add([
  { src: 'node_modules/grapesjs-icon-set/src/svg/home/round.svg', name: 'Home' },
  { src: 'node_modules/grapesjs-icon-set/src/svg/zoom_out/sharp.svg', name: 'Zoom Out' }
]);

📁 Directory Structure

Your installation includes the following organized paths:

• dist/: Optimized production builds (index.js, index.esm.js).
• src/svg/: Raw SVG source files categorized by name and style.
• icons.json: A manifest file for programmatically looping through the set.

📄 License

MIT