@imengyu/vue3-context-menu 1.1.2 → 1.1.3

package/README.CN.md

@@ -17,7 +17,7 @@
 
 ### ❗ 重大升级
 
-版本 1.1.0 做了很大升级，可能会存在与之前版本不兼容的情况，如果出现问题，请安装 1.0.9 版本。
+版本 1.1.0 做了很大升级，如果您从之前的版本升级过来，可能会存在与之前版本不兼容的情况，你需要参考文档修改菜单的数据格式。如果出现问题，请安装 1.0.9 版本。
 
 ## 安装
 
@@ -121,9 +121,46 @@ methods: {
 
 ## 菜单图标
 
-菜单组件不提供任何图标，如果您想添加图标，推荐使用 [iconfont](http://iconfont.cn) 图标库，导入后填写 MenuItem 的 icon 属性，即可在菜单项前面显示图标。
+菜单组件不提供任何图标，如果您想添加图标，推荐使用 [iconfont](http://iconfont.cn) 图标库。
 
-*默认使用 `<i>` 元素来显示图标。*
+### 字体图标
+
+使用 iconfont 图标库，导入字体后填写 `MenuItem` 的 `icon` 属性，即可在菜单项前面显示图标。
+
+* 如果字体名称不一样，可用 `MenuItem` 或者 `MenuOptions` 的 `iconFontClass` 属性指定其他字体。
+* 默认使用 `<i>` 元素来显示图标。
+
+### SVG 图标
+
+支持使用 svg symbol 来显示图标：
+
+```html
+<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
+  <!-- Your icon -->
+  <symbol id="icon-multiply" viewBox="0 0 1024 1024">
+    <path d="M512 64C264.608 64 64 264.608 64 512c0 247.36 200.608 448 448 448 247.36 0 448-200.64 448-448 0-247.392-200.64-448-448-448z m158.4 651.552L512 557.312l-158.4 158.24-45.312-45.248L466.688 512l-158.304-158.4 45.312-45.312L512 466.688l158.4-158.4 45.28 45.312L557.312 512l158.368 158.4-45.28 45.152z" fill="#F74A21"></path>
+  </symbol>
+</svg>
+```
+
+```js
+this.$contextmenu({
+  items: [
+    { 
+      label: "Item with svg icon",
+      svgIcon: "#icon-multiply",
+      svgProps: {
+        fill: '#f60',
+      },
+    },
+  ],
+  //...省略
+} as MenuOptions);
+```
+
+> 注：使用 iconfont 库导出的图标库，会附带 `iconfont.js` ，你只需要在 html 中引入这个js，他会自动为你导入所有的 svg symbol，你可直接复制图标名称使用。
+
+### 自定义渲染
 
 你也可以通过菜单的插槽来完全自定义渲染图标，如：
 
@@ -219,6 +256,8 @@ import '你的样式css文件路径.css'
 | 属性名 | 描述 | 类型 |
 | :----: | :----: | :----: |
 | theme | 菜单主题 | `'light' 'dark'` |
+| isOpen | 指示当前菜单子菜单是否处于打开状态 | `boolean` |
+| hasChildren | 指示当前菜单是否有子级菜单 | `boolean` |
 | onClick | 自定义元素的点击事件回调，它用于菜单内部事件处理，当自定义渲染时，请回调此函数，否则菜单无法正常响应事件 | - |
 | onMouseEnter | 自定义元素的鼠标移入事件回调，它用于菜单内部事件处理，当自定义渲染时，请回调此函数，否则菜单无法正常响应事件 | - |
 | ... | 其他参数与 `MenuItem` 一致 | - |
@@ -235,6 +274,9 @@ import '你的样式css文件路径.css'
 | :----: | :----: | :----: | :----: |
 | label | 菜单项名称 | `string` | — |
 | icon | 菜单项图标 | `string` | — |
+| iconFontClass | 自定义图标字体类名 | `string` | — | `iconfont` |
+| svgIcon | 菜单项图标 svg，仅在 icon 为空时有效 | `string` | — | — |
+| svgProps | 当使用 svg 图标时，自定义 svg 标签属性 | `SVGAttributes` | — | — |
 | disabled | 是否禁用菜单项 | `boolean` | `false` |
 | clickableWhenHasChildren | 指定当本菜单下有子菜单时，点击当前菜单是否触发点击事件 | `boolean` | `false` |
 | clickClose | 点击当前菜单项是否自动关闭整个菜单 | `boolean` | `true` |
@@ -268,6 +310,9 @@ import '你的样式css文件路径.css'
 | :----: | :----: | :----: | :----: |
 | label | 菜单项名称 | `string` | — |
 | icon | 菜单项图标 | `string` | — |
+| iconFontClass | 自定义图标字体类名 | `string` | — | `iconfont` |
+| svgIcon | 菜单项图标 svg，仅在 icon 为空时有效 | `string` | — | — |
+| svgProps | 当使用 svg 图标时，自定义 svg 标签属性 | `SVGAttributes` | — | — |
 | disabled | 是否禁用菜单项 | `boolean` | `false` |
 | clickableWhenHasChildren | 指定当本菜单下有子菜单时，点击当前菜单是否触发点击事件 | `boolean` | `false` |
 | adjustSubMenuPosition | 是否在子菜单超出屏幕后进行自动调整 | `boolean` | `true` |
@@ -335,6 +380,9 @@ import '你的样式css文件路径.css'
 | :----: | :----: | :----: | :----: | :----: |
 | label | 菜单项名称，可传入VNode | `string` or `VNode` or `((label: string) => VNode)` | — | — |
 | icon | 菜单项图标，可传入VNode | `string` or `VNode` or `((icon: string) => VNode)` | — | — |
+| iconFontClass | 自定义图标字体类名 | `string` | — | `iconfont` |
+| svgIcon | 菜单项图标 svg，仅在 icon 为空时有效 | `string` | — | — |
+| svgProps | 当使用 svg 图标时，自定义 svg 标签属性 | `SVGAttributes` | — | — |
 | disabled | 是否禁用菜单项 | `boolean` | — | `false` |
 | adjustSubMenuPosition | 是否在子菜单超出屏幕后进行自动调整 | `boolean` | — | `true` |
 | clickableWhenHasChildren | 指定当本菜单下有子菜单时，点击当前菜单是否触发点击事件 | `boolean` | — | `false` |

package/README.md

@@ -122,11 +122,50 @@ methods: {
 
 ## Menu icon
 
-The menu component does not provide any icons. If you want to add an icon, it is recommended to use [iconfont](http://iconfont.cn) Icon library. After importing, fill in the `icon` attribute of MenuItem to display the icon in front of the menu item.
+The menu component does not provide any icons. If you want to add an icon, it is recommended to use [iconfont](http://iconfont.cn) Icon library.
 
-*By default, the `<i>`  element is used to display icons*
+### Font icon
 
----
+Use iconfont library: After importing, fill in the `icon` attribute of `MenuItem` to display the icon in front of the menu item.
+
+* If the font names are different, you can specify other fonts by writing the `iconFontClass` attribute of `MenuItem` or `MenuOptions`.
+* By default, the `<i>`  element is used to display icons
+
+### SVG Icon
+
+Support the use of svg `<symbol>` to display icons:
+
+```html
+<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
+  <!-- Your icon -->
+  <symbol id="icon-multiply" viewBox="0 0 1024 1024">
+    <path d="M512 64C264.608 64 64 264.608 64 512c0 247.36 200.608 448 448 448 247.36 0 448-200.64 448-448 0-247.392-200.64-448-448-448z m158.4 651.552L512 557.312l-158.4 158.24-45.312-45.248L466.688 512l-158.304-158.4 45.312-45.312L512 466.688l158.4-158.4 45.28 45.312L557.312 512l158.368 158.4-45.28 45.152z" fill="#F74A21"></path>
+  </symbol>
+</svg>
+```
+
+```js
+//Function mode
+this.$contextmenu({
+  items: [
+    { 
+      label: "Item with svg icon",
+      svgIcon: "#icon-multiply",
+      svgProps: {
+        fill: '#f60',
+      },
+    },
+  ],
+  //...
+} as MenuOptions);
+```
+
+```js
+//Component mode
+<context-menu-item label="Item with svg icon" svgIcon="#icon-multiply" :svgProps="{ fill: '#f60' }" />
+```
+
+### Customize icon
 
 You can also completely customize the rendering icon through the slot of the menu, such as:
 
@@ -219,6 +258,8 @@ Menu component.
 | Property | Description | Type |
 | :----: | :----: | :----: |
 | theme | Menu theme | `'light' 'dark'` |
+| isOpen | This value indicates whether the current menu submenu is open | `boolean` |
+| hasChildren | This value indicates whether the current menu has submenus | `boolean` |
 | onClick | Define the click event callback of the element, which is used for the internal event processing of the menu. When rendering item with slot, please call this function back, otherwise the menu cannot respond to the event normally | - |
 | onMouseEnter | Mouse in event callback of custom element. When rendering item with slot, please call this function back, otherwise the menu cannot respond to the event normally | - |
 | ... | Other arguments are same with `MenuItem` | - |
@@ -235,6 +276,9 @@ Menu item component.
 | :----: | :----: | :----: | :----: |
 | label | The label of menu. | `string` | — |
 | icon | The icon for menu item. | `string` | — |
+| iconFontClass | Custom icon library font class name. | `string` | — | `iconfont` |
+| svgIcon | Display icons use svg symbol (`<use xlink:href="...">`) ， only valid when icon attribute is empty. | `string` | — | — |
+| svgProps | The user-defined attribute of the svg tag, which is valid when using `svgIcon`. | `SVGAttributes` | — | — |
 | disabled | Disable menu item? | `boolean` | `false` |
 | clickableWhenHasChildren | When there are subitems in this item, is it allowed to trigger its own click event? | `boolean` | `false` |
 | clickClose | Should close menu when Click this menu item ? | `boolean` | `true` |
@@ -268,6 +312,9 @@ Submenu component.
 | :----: | :----: | :----: | :----: |
 | label | The label of menu. | `string` | — |
 | icon | The icon for menu item. | `string` | — |
+| iconFontClass | Custom icon library font class name. | `string` | — | `iconfont` |
+| svgIcon | Display icons use svg symbol (`<use xlink:href="...">`) ， only valid when icon attribute is empty. | `string` | — | — |
+| svgProps | The user-defined attribute of the svg tag, which is valid when using `svgIcon`. | `SVGAttributes` | — | — |
 | disabled | Disable menu item? | `boolean` | `false` |
 | clickableWhenHasChildren | When there are subitems in this item, is it allowed to trigger its own click event? | `boolean` | `false` |
 | adjustSubMenuPosition | Specifies should submenu adjust it position when the menu exceeds the screen.| `boolean` | `true` |
@@ -335,6 +382,9 @@ Menu separator component.
 | :----: | :----: | :----: | :----: | :----: |
 | label | The label of menu. | `string` or `VNode` or `((label: string) => VNode)` | — | — |
 | icon | The icon for menu item. | `string` or `VNode` or `((icon: string) => VNode)` | — | — |
+| iconFontClass | Custom icon library font class name. | `string` | — | `iconfont` |
+| svgIcon | Display icons use svg symbol (`<use xlink:href="...">`) ， only valid when icon attribute is empty. | `string` | — | — |
+| svgProps | The user-defined attribute of the svg tag, which is valid when using `svgIcon`. | `SVGAttributes` | — | — |
 | disabled | Disable menu item? | `boolean` | — | `false` |
 | adjustSubMenuPosition | Specifies should submenu adjust it position when the menu exceeds the screen. | `boolean` | — | `true` |
 | clickableWhenHasChildren | When there are subitems in this item, is it allowed to trigger its own click event? | `boolean` | — | `false` |

package/examples/index.html

@@ -6,8 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
-    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
+    <script src="https://imengyu.top/static/iconfont-small-test.js"></script>
   </head>
   <body>
     <noscript>
@@ -16,5 +15,7 @@
     <a href="https://github.com/imengyu/vue3-context-menu"><img style="position: absolute; top: 0; left: 0; border: 0; z-index: 100" src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
   </body>
 </html>

package/examples/views/BasicComponent.vue

@@ -87,7 +87,7 @@ export default defineComponent({
       hljs: {
         highlightAll: () => void
       }
-    }).hljs.highlightAll();
+    }).hljs?.highlightAll?.();
   },
   data() {
     return {

package/examples/views/BasicCustomize.vue

@@ -61,7 +61,7 @@ export default defineComponent({
       hljs: {
         highlightAll: () => void
       }
-    }).hljs.highlightAll();
+    }).hljs?.highlightAll?.();
   },
   methods: {
     onContextMenu(e : MouseEvent) {

package/examples/views/BasicUseage.vue

@@ -91,7 +91,7 @@ export default defineComponent({
       hljs: {
         highlightAll: () => void
       }
-    }).hljs.highlightAll();
+    }).hljs?.highlightAll?.();
   },
   methods: {
     test() {
@@ -140,7 +140,6 @@ export default defineComponent({
                   alert("You click Print");
                 } 
               },
-              
               { label: "View source", icon: "icon-terminal" },
               { label: "Inspect" }
             ],
@@ -206,6 +205,21 @@ export default defineComponent({
               },
             ]
           },
+          { 
+            label: 'Item with icon',
+            icon: "icon-reload-1",
+          },
+          { 
+            label: "Item with svg icon",
+            svgIcon: "#icon-clock",
+          },
+          { 
+            label: "Item with svg icon",
+            svgIcon: "#icon-multiply",
+            svgProps: {
+              fill: '#f60',
+            },
+          },
         ],
         iconFontClass: 'iconfont',
         customClass: "class-a",

package/index.d.ts

@@ -1,4 +1,4 @@
-import { App, Slot, VNode } from "vue";
+import { App, Slot, SVGAttributes, VNode } from "vue";
 
 declare module 'vue3-context-menu' {
 }
@@ -44,7 +44,7 @@ export declare interface MenuOptions {
    */
   customClass	?:	string,
   /**
-   * Custom icon library font class name.
+   * Custom icon library font class name. (global)
    */
   iconFontClass ?:	string,
   /**
@@ -73,6 +73,18 @@ export declare interface MenuItem {
    * The icon for menu item.
    */
   icon ?: string|VNode|((icon: string) => VNode),
+  /**
+   * Custom icon library font class name.
+   */
+  iconFontClass ?:	string,
+  /**
+   * Display icons use svg symbol (`<use xlink:href="...">`) ， only valid when icon attribute is empty.
+   */
+  svgIcon ?: string,
+  /**
+   * The user-defined attribute of the svg tag, which is valid when using `svgIcon`.
+   */
+  svgProps ?: SVGAttributes,
   /**
    * Disable menu item?
    */
@@ -125,6 +137,14 @@ export declare interface MenuItemRenderData extends Omit<MenuItem, 'children'|'c
    * Global theme
    */
   theme: 'light'|'dark',
+  /**
+   * This value indicates whether the current menu submenu is open
+   */
+  isOpen: boolean,
+  /**
+   * This value indicates whether the current menu has submenus
+   */
+  hasChildren: boolean,
   /**
    * Click event callback of custom element, which is used for menu internal event
    */

package/lib/vue3-context-menu.common.js

@@ -2469,7 +2469,7 @@ var MenuConstOptions = {
   defaultMaxWidth: 600,
   defaultZindex: 100
 };
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextSubMenu.vue?vue&type=template&id=4e374736&ts=true
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextSubMenu.vue?vue&type=template&id=2dab0b5e&ts=true
 
 var _hoisted_1 = {
   "class": "mx-context-menu-scroll",
@@ -2519,14 +2519,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_ContextMenuItem, {
         clickHandler: item.onClick,
         disabled: item.disabled,
-        iconFontClass: item.customClass,
         icon: item.icon,
+        iconFontClass: item.iconFontClass,
+        svgIcon: item.svgIcon,
+        svgProps: item.svgProps,
         label: item.label,
         customRender: item.customRender,
         customClass: item.customClass,
         clickClose: item.clickClose,
         clickableWhenHasChildren: item.clickableWhenHasChildren,
-        showRightArrow: item.children && item.children.length > 0
+        showRightArrow: item.children && item.children.length > 0,
+        hasChildren: item.children && item.children.length > 0
       }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
         _: 2
       }, [item.children && item.children.length > 0 ? {
@@ -2539,7 +2542,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             adjustPosition: item.adjustSubMenuPosition
           }, null, 8, ["items", "maxWidth", "minWidth", "adjustPosition"])];
         })
-      } : undefined]), 1032, ["clickHandler", "disabled", "iconFontClass", "icon", "label", "customRender", "customClass", "clickClose", "clickableWhenHasChildren", "showRightArrow"]), item.divided && _ctx.globalHasSlot('speratorRender') ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_VNodeRender, {
+      } : undefined]), 1032, ["clickHandler", "disabled", "icon", "iconFontClass", "svgIcon", "svgProps", "label", "customRender", "customClass", "clickClose", "clickableWhenHasChildren", "showRightArrow", "hasChildren"]), item.divided && _ctx.globalHasSlot('speratorRender') ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_VNodeRender, {
         key: 0,
         vnode: function vnode() {
           return _ctx.globalRenderSlot('speratorRender', {});
@@ -2560,7 +2563,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, _hoisted_5, 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, _ctx.overflow && _ctx.scrollValue > -_ctx.scrollHeight]])], 512)], 6);
 }
-;// CONCATENATED MODULE: ./src/ContextSubMenu.vue?vue&type=template&id=4e374736&ts=true
+;// CONCATENATED MODULE: ./src/ContextSubMenu.vue?vue&type=template&id=2dab0b5e&ts=true
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.number.constructor.js
 var es_number_constructor = __webpack_require__(9653);
@@ -2617,23 +2620,24 @@ var VNodeRender = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObjec
     };
   }
 });
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextMenuItem.vue?vue&type=template&id=4200a0a0&ts=true
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextMenuItem.vue?vue&type=template&id=119046a6&ts=true
 
-var ContextMenuItemvue_type_template_id_4200a0a0_ts_true_hoisted_1 = {
+var ContextMenuItemvue_type_template_id_119046a6_ts_true_hoisted_1 = {
   "class": "mx-context-menu-item-wrapper"
 };
-var ContextMenuItemvue_type_template_id_4200a0a0_ts_true_hoisted_2 = {
+var ContextMenuItemvue_type_template_id_119046a6_ts_true_hoisted_2 = ["xlink:href"];
+var ContextMenuItemvue_type_template_id_119046a6_ts_true_hoisted_3 = {
   key: 1
 };
 
-var ContextMenuItemvue_type_template_id_4200a0a0_ts_true_hoisted_3 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", {
+var ContextMenuItemvue_type_template_id_119046a6_ts_true_hoisted_4 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", {
   "class": "mx-right-arrow"
 }, null, -1);
 
-function ContextMenuItemvue_type_template_id_4200a0a0_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
+function ContextMenuItemvue_type_template_id_119046a6_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_VNodeRender = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("VNodeRender");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ContextMenuItemvue_type_template_id_4200a0a0_ts_true_hoisted_1, [_ctx.globalHasSlot('itemRender') ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_VNodeRender, {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ContextMenuItemvue_type_template_id_119046a6_ts_true_hoisted_1, [_ctx.globalHasSlot('itemRender') ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_VNodeRender, {
     key: 0,
     vnode: function vnode() {
       return _ctx.globalRenderSlot('itemRender', _ctx.getItemDataForChildren());
@@ -2644,7 +2648,7 @@ function ContextMenuItemvue_type_template_id_4200a0a0_ts_true_render(_ctx, _cach
     data: _ctx.getItemDataForChildren()
   }, null, 8, ["vnode", "data"])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 2,
-    "class": (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)('mx-context-menu-item' + (_ctx.disabled ? ' disabled' : '') + (_ctx.customClass ? ' ' + _ctx.customClass : '')),
+    "class": (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['mx-context-menu-item', _ctx.disabled ? 'disabled' : '', _ctx.customClass ? ' ' + _ctx.customClass : '', _ctx.showSubMenu ? 'open' : '']),
     onClick: _cache[0] || (_cache[0] = //@ts-ignore
     function () {
       return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
@@ -2660,11 +2664,16 @@ function ContextMenuItemvue_type_template_id_4200a0a0_ts_true_render(_ctx, _cach
         vnode: function vnode() {
           return _ctx.globalRenderSlot('itemIconRender', _ctx.getItemDataForChildren());
         }
-      }, null, 8, ["vnode"])) : typeof _ctx.icon === 'string' ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("i", {
+      }, null, 8, ["vnode"])) : typeof _ctx.svgIcon === 'string' && _ctx.svgIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
         key: 1,
-        "class": (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(_ctx.icon + ' icon ' + _ctx.iconFontClass)
-      }, null, 2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_VNodeRender, {
+        "class": "icon svg"
+      }, _ctx.svgProps), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("use", {
+        "xlink:href": _ctx.svgIcon
+      }, null, 8, ContextMenuItemvue_type_template_id_119046a6_ts_true_hoisted_2)], 16)) : typeof _ctx.icon === 'string' ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("i", {
         key: 2,
+        "class": (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(_ctx.icon + ' icon ' + _ctx.iconFontClass + ' ' + _ctx.globalIconFontClass)
+      }, null, 2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_VNodeRender, {
+        key: 3,
         vnode: _ctx.icon,
         data: _ctx.icon
       }, null, 8, ["vnode", "data"]))];
@@ -2674,7 +2683,7 @@ function ContextMenuItemvue_type_template_id_4200a0a0_ts_true_render(_ctx, _cach
         vnode: function vnode() {
           return _ctx.globalRenderSlot('itemLabelRender', _ctx.getItemDataForChildren());
         }
-      }, null, 8, ["vnode"])) : typeof _ctx.label === 'string' ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", ContextMenuItemvue_type_template_id_4200a0a0_ts_true_hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(_ctx.label), 1)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_VNodeRender, {
+      }, null, 8, ["vnode"])) : typeof _ctx.label === 'string' ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", ContextMenuItemvue_type_template_id_119046a6_ts_true_hoisted_3, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(_ctx.label), 1)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_VNodeRender, {
         key: 2,
         vnode: _ctx.label,
         data: _ctx.label
@@ -2687,13 +2696,13 @@ function ContextMenuItemvue_type_template_id_4200a0a0_ts_true_render(_ctx, _cach
         vnode: function vnode() {
           return _ctx.globalRenderSlot('itemRightArrowRender', _ctx.getItemDataForChildren());
         }
-      }, null, 8, ["vnode"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ContextMenuItemvue_type_template_id_4200a0a0_ts_true_hoisted_3];
+      }, null, 8, ["vnode"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ContextMenuItemvue_type_template_id_119046a6_ts_true_hoisted_4];
     }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)];
   })], 34)), _ctx.showSubMenu ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "submenu", {
     key: 3
   }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./src/ContextMenuItem.vue?vue&type=template&id=4200a0a0&ts=true
+;// CONCATENATED MODULE: ./src/ContextMenuItem.vue?vue&type=template&id=119046a6&ts=true
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextMenuItem.vue?vue&type=script&lang=ts
 
@@ -2752,6 +2761,18 @@ function ContextMenuItemvue_type_template_id_4200a0a0_ts_true_render(_ctx, _cach
       "default": 'iconfont'
     },
 
+    /**
+     * Menu icon (for svg)
+     */
+    svgIcon: {
+      type: String,
+      "default": ''
+    },
+    svgProps: {
+      type: Object,
+      "default": null
+    },
+
     /**
      * Show right arrow on this menu?
      */
@@ -2759,6 +2780,10 @@ function ContextMenuItemvue_type_template_id_4200a0a0_ts_true_render(_ctx, _cach
       type: Boolean,
       "default": false
     },
+    hasChildren: {
+      type: Boolean,
+      "default": false
+    },
 
     /**
      * Should close menu when Click this menu item ?
@@ -2786,7 +2811,8 @@ function ContextMenuItemvue_type_template_id_4200a0a0_ts_true_render(_ctx, _cach
         label = _toRefs.label,
         icon = _toRefs.icon,
         iconFontClass = _toRefs.iconFontClass,
-        showRightArrow = _toRefs.showRightArrow;
+        showRightArrow = _toRefs.showRightArrow,
+        hasChildren = _toRefs.hasChildren;
 
     var showSubMenu = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(false);
     var globalHasSlot = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.inject)('globalHasSlot');
@@ -2797,9 +2823,9 @@ function ContextMenuItemvue_type_template_id_4200a0a0_ts_true_render(_ctx, _cach
     function onClick(e) {
       if (e.target.classList.contains('mx-context-no-clickable')) return;
 
-      if (context.slots.submenu) {
+      if (hasChildren.value) {
         //Has submenu
-        if (clickableWhenHasChildren && typeof clickHandler.value === 'function') clickHandler.value();
+        if (clickableWhenHasChildren.value && typeof clickHandler.value === 'function') clickHandler.value();
       } else {
         //Call hander from options
         if (typeof clickHandler.value === 'function') clickHandler.value();
@@ -2815,13 +2841,17 @@ function ContextMenuItemvue_type_template_id_4200a0a0_ts_true_render(_ctx, _cach
 
     function onMouseEnter() {
       if (!menuContext.checkCloseOtherSubMenuTimeOut()) menuContext.closeOtherSubMenu();
-      menuContext.addOpenedSubMenu(function () {
-        showSubMenu.value = false;
-      });
-      showSubMenu.value = true;
+
+      if (hasChildren.value) {
+        menuContext.addOpenedSubMenu(function () {
+          showSubMenu.value = false;
+        });
+        showSubMenu.value = true;
+      }
     }
 
     var globalTheme = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.inject)('globalTheme');
+    var globalIconFontClass = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.inject)('globalIconFontClass');
     return {
       //Data for custom render
       getItemDataForChildren: function getItemDataForChildren() {
@@ -2834,6 +2864,8 @@ function ContextMenuItemvue_type_template_id_4200a0a0_ts_true_render(_ctx, _cach
           clickClose: clickClose.value,
           clickableWhenHasChildren: clickableWhenHasChildren.value,
           theme: globalTheme,
+          isOpen: showSubMenu,
+          hasChildren: hasChildren,
           onClick: onClick,
           onMouseEnter: onMouseEnter
         };
@@ -2841,6 +2873,7 @@ function ContextMenuItemvue_type_template_id_4200a0a0_ts_true_render(_ctx, _cach
       showSubMenu: showSubMenu,
       globalHasSlot: globalHasSlot,
       globalRenderSlot: globalRenderSlot,
+      globalIconFontClass: globalIconFontClass,
       onMouseEnter: onMouseEnter,
       onClick: onClick
     };
@@ -2856,7 +2889,7 @@ var exportHelper = __webpack_require__(3744);
 
 
 ;
-const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ContextMenuItemvue_type_script_lang_ts, [['render',ContextMenuItemvue_type_template_id_4200a0a0_ts_true_render]])
+const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ContextMenuItemvue_type_script_lang_ts, [['render',ContextMenuItemvue_type_template_id_119046a6_ts_true_render]])
 
 /* harmony default export */ const ContextMenuItem = (__exports__);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextMenuSperator.vue?vue&type=template&id=c306a596&ts=true
@@ -3070,10 +3103,10 @@ var fillPadding = 10; //padding for submenu position adjust
 }));
 ;// CONCATENATED MODULE: ./src/ContextSubMenu.vue?vue&type=script&lang=ts
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextSubMenu.vue?vue&type=style&index=0&id=4e374736&lang=scss
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextSubMenu.vue?vue&type=style&index=0&id=2dab0b5e&lang=scss
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/ContextSubMenu.vue?vue&type=style&index=0&id=4e374736&lang=scss
+;// CONCATENATED MODULE: ./src/ContextSubMenu.vue?vue&type=style&index=0&id=2dab0b5e&lang=scss
 
 ;// CONCATENATED MODULE: ./src/ContextSubMenu.vue
 
@@ -3119,12 +3152,14 @@ const ContextSubMenu_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(Con
   },
   provide: function provide() {
     var _this$options,
+        _this$options2,
         _this = this;
 
     return {
       globalOptions: this.options,
       globalCloseMenu: this.closeMenu,
       globalTheme: ((_this$options = this.options) === null || _this$options === void 0 ? void 0 : _this$options.theme) || 'light',
+      globalIconFontClass: ((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.iconFontClass) || 'iconfont',
       //check slot exists
       globalHasSlot: function globalHasSlot(name) {
         return _this.$slots[name] !== undefined;
@@ -3165,7 +3200,7 @@ const ContextSubMenu_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(Con
     }
   },
   render: function render() {
-    var _this$options2;
+    var _this$options3;
 
     //Hidden
     if (!this.show) return []; //Create SubMenu
@@ -3177,7 +3212,7 @@ const ContextSubMenu_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(Con
       }
     }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.h)(ContextSubMenu, {
       "class": 'mx-menu-host',
-      items: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.items,
+      items: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.items,
       maxWidth: this.options.maxWidth || MenuConstOptions.defaultMaxWidth,
       minWidth: this.options.minWidth || MenuConstOptions.defaultMinWidth
     }, {
@@ -3237,10 +3272,10 @@ const ContextSubMenu_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(Con
 }));
 ;// CONCATENATED MODULE: ./src/ContextMenu.vue?vue&type=script&lang=ts
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextMenu.vue?vue&type=style&index=0&id=3cf1f00e&lang=css
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextMenu.vue?vue&type=style&index=0&id=994229e2&lang=css
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/ContextMenu.vue?vue&type=style&index=0&id=3cf1f00e&lang=css
+;// CONCATENATED MODULE: ./src/ContextMenu.vue?vue&type=style&index=0&id=994229e2&lang=css
 
 ;// CONCATENATED MODULE: ./src/ContextMenu.vue
 
@@ -3251,12 +3286,23 @@ const ContextSubMenu_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(Con
 const ContextMenu_exports_ = ContextMenuvue_type_script_lang_ts;
 
 /* harmony default export */ const ContextMenu = (ContextMenu_exports_);
+;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/typeof.js
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextMenuGroup.vue?vue&type=script&lang=ts
 
 
 
 
 
+
 /* harmony default export */ const ContextMenuGroupvue_type_script_lang_ts = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.defineComponent)({
   name: 'ContextMenuGroup',
   props: {
@@ -3345,7 +3391,8 @@ const ContextMenu_exports_ = ContextMenuvue_type_script_lang_ts;
       showRightArrow: true,
       maxWidth: undefined,
       minWidth: undefined,
-      adjustSubMenuPosition: undefined
+      adjustSubMenuPosition: undefined,
+      hasChildren: _typeof(this.$slots["default"]) !== undefined
     }), this.$slots["default"] ? {
       //Create SubMenu
       submenu: function submenu() {