How to style custom buttons in the menu bar?

[jtuchel]

I tried to setup a "download" button that should appear in the menu bar

  const downloadButton: MenuButtonItem = {
    onClick: saveDocumentToDisk,
    // icon: {}, // download icon
    text: "Save to disk",
    title: "Save this document to disk",
    className: "jse-button",
  };

Unfortunately it looks like

I want it to look like the original one ( taken from here https://jsoneditoronline.org/ )

Would you mind telling me what's wrong/missing? Is there a public repository for jsoneditoronline I can have a look at?

It would be fine for me if there is no text, just the icon as a button!

[josdejong]

There is an example of a custom menu button with just an icon and no text here: https://github.com/josdejong/svelte-jsoneditor/blob/main/src/routes/examples/custom_menu_buttons/%2Bpage.svelte

By default, the button will be styled like the other buttons in the menu of the editor. You can give the button a className though and apply your own styling with CSS (like demonstrated in the example above too).

It is not possible to create dropdown menu though like in the screenshot you post from https://jsoneditoronline.org/. The repo of jsoneditoronline is not public though, but it has a custom dropdown menu component for this second menu bar.

[jtuchel]

@josdejong thanks for your reply. I installed FontAwesome for my Vue app and I'm trying to reproduce your linked Svelte example. I started with this

<script setup lang="ts">
import type { FontAwesomeIcon } from "vanilla-jsoneditor";
import { faCopy } from '@fortawesome/free-regular-svg-icons';

const myIcon: FontAwesomeIcon = {
  prefix: faCopy.prefix,
  iconName: faCopy.iconName,
  icon: faCopy.icon // this is not possible
};
</script>

I can't assign faCopy.icon to FontAwesomeIcon.icon because of

TS2322: Type '[number, number, string[], string, IconPathData]' is not assignable to type '[number, number, (string | number)[], string, string]'.

faCopy is not of type FontAwesomeIcon, its type is IconDefinition. Did I miss something?

[josdejong]

Good point. I had some troubles with the type definitions of fontawesome and created my own definition FontAwesomeIcon instead. This type doesn't match exactly with the type from fontawesome itself. I'll get rid of the custom interface and use IconDefinition. There is a type IconName used in IconDefinition which prevents from defining a new custom icon, but with a fake cast "... as IconName" we can make TypeScript happy 😢 .

[josdejong]

I've fixed the issue via 9d693f9 (not yet published)

[jtuchel]

I've fixed the issue via 9d693f9 (not yet published)

Thanks for your efforts :) Do you have any plans when this will be released?

[josdejong]

👍 I've published the fix now in v0.8.0.

[jtuchel]

Working perfectly fine :)