How to Put Custom Icon Inside GrapesJs Panel Button?

Are you tired of using the same old icons in your GrapesJs panel buttons? Want to add a personal touch to your website or application? Look no further! In this comprehensive guide, we’ll show you how to put custom icons inside GrapesJs panel buttons. Yes, you read that right – custom icons! With these simple steps, you’ll be able to create stunning and unique buttons that reflect your brand’s identity.

What You’ll Need

Before we dive into the tutorial, make sure you have the following:

• GrapesJs installed and configured on your website or application
• A basic understanding of HTML, CSS, and JavaScript
• A code editor or IDE of your choice
• A custom icon in SVG or PNG format (we’ll discuss this later)

Step 1: Prepare Your Custom Icon

For this tutorial, we’ll assume you have a custom icon in SVG format. If you don’t have one, you can create your own using a vector graphics editor like Adobe Illustrator or Figma. You can also use an online icon generator tool.

Once you have your custom icon, save it in a folder within your project directory. For example, create a folder called `icons` and save your icon as `custom-icon.svg`.

 project/
  icons/
    custom-icon.svg
  index.html
  script.js

Step 2: Add the Custom Icon to Your GrapesJs Panel Button

In your GrapesJs panel, create a new button or edit an existing one. We’ll use JavaScript to add the custom icon to the button.

  const button = {
    label: 'Custom Icon Button',
    command: 'my-command',
    icon: {
      type: 'custom',
      node: `
        
      `,
    },
  };

In the code above, we’re creating a new button with a custom icon. We’re using the `icon` property and setting its `type` to `custom`. The `node` property contains the SVG code for our custom icon.

Replace the `` comment with the actual SVG code of your custom icon. You can use an online SVG converter tool to get the code if you don’t have it.

  const button = {
    label: 'Custom Icon Button',
    command: 'my-command',
    icon: {
      type: 'custom',
      node: `
        
      `,
    },
  };

Step 3: Add CSS Styles to Customize the Icon

To customize the appearance of our custom icon, we’ll add some CSS styles. Create a new CSS file or add the following code to your existing stylesheet:

  .gjs-button[command="my-command"] .gjs-icon {
    width: 20px;
    height: 20px;
    fill: #333; /* Change the icon color */
    stroke: #666; /* Change the icon stroke color */
  }

In the code above, we’re targeting the `.gjs-icon` element within the button with the `command` attribute set to `my-command`. We’re adding styles to customize the icon’s width, height, fill color, and stroke color.

Step 4: Add the Button to Your GrapesJs Panel

Now that we have our custom icon button, let’s add it to our GrapesJs panel. Use the following code:

  const panel = grapesjs.init({
    container: '#gjs',
    components: [
      {
        type: 'button',
        button,
      },
    ],
  });

In the code above, we’re creating a new GrapesJs panel instance and adding our custom button to it. The `button` variable contains the configuration for our custom icon button.

Common Issues and Troubleshooting

While following this tutorial, you might encounter some issues. Here are some common problems and their solutions:

Issue	Solution
Custom icon not displaying	Check if the icon SVG code is correct and if the icon file is in the correct location.
Icon color or stroke color not changing	Check if the CSS styles are being applied correctly and if the selectors are targeting the correct elements.
Button not appearing in the GrapesJs panel	Check if the button configuration is correct and if the panel instance is being created successfully.

Conclusion

And there you have it! With these simple steps, you’ve successfully added a custom icon to your GrapesJs panel button. Remember to experiment with different icon designs and styles to create a unique look for your website or application.

If you have any questions or need further assistance, feel free to ask in the comments below. Happy coding!

Bonus Tip: Using PNG Icons

If you prefer to use PNG icons instead of SVG, you can use the following code:

  const button = {
    label: 'Custom Icon Button',
    command: 'my-command',
    icon: {
      type: 'img',
      src: 'icons/custom-icon.png',
    },
  };

In this case, replace `icons/custom-icon.png` with the actual path to your PNG icon file.

Final Thoughts

Customizing your GrapesJs panel buttons is a great way to add personality to your website or application. With custom icons, you can create a unique and engaging user experience. Don’t be afraid to experiment and try new things – and remember, practice makes perfect!

Frequently Asked Question

Get ready to unleash your creativity and learn how to add a custom icon inside a GrapesJs panel button!