A3: Custom icons do not appear in the context menu

[stepanjakl]

Hello, I noticed that setting/defining the icons in a custom module does not work nor when it is added it via the global list in modules/@apostrophecms/asset/lib/globalIcons.js

I am using the latest Apostrophe version 3.14.2.

module.exports = {
    extend: '@apostrophecms/widget-type',
    options: {
        label: 'Container',
        icon: 'plus-box'
    },
    icons: {
        'plus-box': 'PlusBox'
    }
}

[stepanjakl]

It seems that APOS_DEV=1 is needed when running the app.

[boutell]

Yes (in dev only of course, a production deployment would involve explicitly running the asset build task, which would always build the admin UI).

On Thu, Mar 3, 2022 at 6:16 PM stepanjakl @.***> wrote:

Closed #3671 https://github.com/apostrophecms/apostrophe/issues/3671.

— Reply to this email directly, view it on GitHub https://github.com/apostrophecms/apostrophe/issues/3671#event-6181733917, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAH27IFBCOB7K6OIBD52O3U6FB5JANCNFSM5P3PVI4A . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you are subscribed to this thread.Message ID: @.*** com>

--

THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

[waldemar-p]

I have run into a similar issue. Currently I am working with the rich-text-widget.

But even with APOS_DEV=1 the icon is not rendered.

// modules/@apostrophecms/asset/lib/globalIcons.js
module.exports = {
  'size-s-icon': 'SizeS',
};

// modules/@apostrophecms/rich-text-widget/index.js
const defaultModule = require('apostrophe/modules/@apostrophecms/rich-text-widget');

module.exports = {
  options: {
    editorTools: {
      ...defaultModule.options.editorTools,
      strike: {
        component: 'AposTiptapButton',
        label: 'apostrophe:richTextStrikethrough',
        icon: 'size-s-icon',
        command: 'toggleStrike',
      },
    },
  },
}

[BoDonkey]

Hi @waldemar-p, For visibility reasons, it is usually better to start a new issue, rather than making comments on a closed one.

Onto your problem! So I would make a few changes in your code. I don't think you can extend the globalIcons.js in that way. Instead, register the icon right in your /modules/@apostrophecms/rich-text-widget/index.js file. After the options add:

icons: {
  'size-s-icon': 'SizeS'
}

Although your code seems to be working, I would also refactor your project-level rich-text-widget configuration. Remove the require and the editorTools section from the options. Instead, move them to an init() section:

module.exports = {
  init(self) {
    self.options.editorTools = {
      ...self.options.editorTools,
      slant: {
        component: 'AposTiptapButton',
        label: 'apostrophe:richTextStrikethrough',
        icon: 'size-s-icon',
        command: 'toggleStrike'
      }
    };
  },
  options: {
    ...
  },
  icons: {
    'size-s-icon': 'SizeS'
  }
};

Hope this helps!

[waldemar-p]

Thanks, it works and is much more elegant!

I still struggle sometimes to understand what modules can be extended in what way. 😅

But correct me if I am wrong, but I don't think I would have found that solution while looking in the documentation.

[BoDonkey]

So, not a direct example like this using the rich-text-widget, but it is documented in two places.

For the init(self) it is in the reference section: https://v3.docs.apostrophecms.org/reference/module-api/module-overview.html

For the icon registration: https://v3.docs.apostrophecms.org/reference/module-api/module-options.html#icon

Not sure how to make it easier to navigate or another piece of documentation that would help. Any suggestions?

[waldemar-p]

Thanks for providing me with the sources.

Sadly I wouldn't know a good place to put some good links now. But if it comes to me I'll mention it. I'll be working with apostrophe for the next couple of months at least, so maybe an idea might strike me.

[BoDonkey]

Exciting (the working with Apostrophe part)! Please share your site on our Discord when you are done, if it is allowed.