Better support for heroicons mini variant

Made the vue component more like the one from vuetify/iconsets/mdi-svg. Updated dependencies.
Yzen90 · Feb 22, 2023 · 95b561f · 95b561f
1 parent 485e816
commit 95b561f
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 54 deletions.
diff --git a/index.ts b/index.ts
@@ -1,6 +1,6 @@
-import { mergeProps, createVNode, toRefs, JSXComponent } from 'vue';
-import { defineComponent, propsFactory } from 'vuetify/lib/util/index.mjs';
-import { IconValue } from 'vuetify/lib/composables/icons.mjs';
+import { mergeProps, createVNode, JSXComponent } from 'vue';
+import { defineComponent } from 'vuetify/lib/util/index.mjs';
+import { makeIconProps } from 'vuetify/lib/composables/icons.mjs';
 
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import type { IconProps, IconSet } from 'vuetify';
@@ -13,73 +13,52 @@ export const embedIcon = (icon: string) => icon;
 export const mdiEmbed = embedIcon;
 export const mdilEmbed = embedIcon;
 
-export const hisToString = (icon: string) => `SVG;0 0 24 24;${icon};;;evenodd`;
-export const hioToString = (icon: string) => `SVG;0 0 24 24;${icon};none;1.5`;
-export const himToString = (icon: string) => `SVG;0 0 20 20;${icon}`;
+export const hisToString = (icon: string) => `SVG;;${icon};;;evenodd`;
+export const hioToString = (icon: string) => `SVG;;${icon};none;1.5`;
+export const himToString = (icon: string) => `SVG;0 0 20 20;${icon};;;evenodd`;
 export const hisEmbed = hisToString;
 export const hioEmbed = hioToString;
 export const himEmbed = himToString;
 
 export const SVGIcon: JSXComponent<IconProps> = defineComponent({
   name: 'SVGIcon',
   inheritAttrs: false,
-  props: propsFactory(
-    {
-      icon: {
-        type: IconValue,
-        required: true,
-      },
-      tag: {
-        type: String,
-        required: true,
-      },
-    },
-    'icon',
-  )(),
-  setup(props: IconProps, _ref: { attrs: Record<string, unknown> }) {
-    const { icon, tag } = toRefs(props);
-    const { attrs } = _ref;
-
-    const svgProps: Record<string, any> = {
+  props: makeIconProps(),
+  setup(props: IconProps, { attrs }: any) {
+    const svgAttrs: Record<string, any> = {
       class: 'v-icon__svg',
       xmlns: 'http://www.w3.org/2000/svg',
       viewBox: '0 0 24 24',
       role: 'img',
       'aria-hidden': 'true',
     };
 
-    let d = icon?.value as string;
+    let d = props.icon as string;
 
     if (d.startsWith?.('SVG;')) {
       const parts = d.split(';');
-      svgProps['viewBox'] = parts[1] ?? '';
+
       d = parts[2] ?? '';
 
-      if (parts[3] && parts[3].length > 0) {
-        svgProps['fill'] = parts[3];
-        svgProps['style'] = `fill: ${parts[3]};`;
-      }
+      if (parts[1]?.length) svgAttrs['viewBox'] = parts[1];
 
-      if (parts[4] && parts[4].length > 0) {
-        svgProps['stroke-width'] = parts[4];
-        svgProps['stroke'] = 'currentColor';
+      if (parts[3]?.length) {
+        svgAttrs['fill'] = parts[3];
+        svgAttrs['style'] = `fill: ${parts[3]};`;
       }
 
-      if (parts[5] && parts[5].length > 0) {
-        svgProps['fill-rule'] = parts[5];
+      if (parts[4]?.length) {
+        svgAttrs['stroke-width'] = parts[4];
+        svgAttrs['stroke'] = 'currentColor';
       }
+
+      if (parts[5]?.length) svgAttrs['fill-rule'] = parts[5];
     }
 
     return () => {
-      return createVNode(
-        tag.value,
-        mergeProps(attrs, {
-          style: null,
-        }),
-        {
-          default: () => [createVNode('svg', svgProps, [createVNode('path', { d }, null)])],
-        },
-      );
+      return createVNode(props.tag, mergeProps(attrs, { style: null }), {
+        default: () => [createVNode('svg', svgAttrs, [createVNode('path', { d }, null)])],
+      });
     };
   },
 });

diff --git a/package.json b/package.json
@@ -45,9 +45,9 @@
     "rimraf": "4.1.2",
     "ts-node": "10.9.1",
     "typescript": "4.9.5",
-    "vite": "4.1.2",
+    "vite": "4.1.4",
     "vue": "3.2.47",
-    "vuetify": "3.1.5"
+    "vuetify": "3.1.6"
   },
   "engines": {
     "yarn": ">=1.22.19"

diff --git a/yarn.lock b/yarn.lock
@@ -581,10 +581,10 @@ v8-compile-cache-lib@^3.0.1:
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
   integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
 
-[email protected].2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.1.2.tgz#6908882984e490c44c28e784a2c52de556f04b41"
-  integrity sha512-MWDb9Rfy3DI8omDQySbMK93nQqStwbsQWejXRY2EBzEWKmLAXWb1mkI9Yw2IJrc+oCvPCI1Os5xSSIBYY6DEAw==
+[email protected].4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.1.4.tgz#170d93bcff97e0ebc09764c053eebe130bfe6ca0"
+  integrity sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==
   dependencies:
     esbuild "^0.16.14"
     postcss "^8.4.21"
@@ -604,10 +604,10 @@ [email protected]:
     "@vue/server-renderer" "3.2.47"
     "@vue/shared" "3.2.47"
 
-[email protected].5:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.1.5.tgz#6cf56891f2fa7502feec1a7b50bef6aa4bc4623e"
-  integrity sha512-6DJYNuKrbxuL+MThmj+VbtvK9X3mY+s8Rqj1juj4RyeLSIAhE3byZf8Bo2/GxrU5Jv3zR07LZdpiq4wIl0ONzA==
+[email protected].6:
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.1.6.tgz#9ba513ac7b3ca9b0c7817dc63a8c18079eea9e49"
+  integrity sha512-4We27L5ksy8esNKfUPWPucEU+M7XJDO2o66zXL5qiBVbALwshcK2CAobLQMx+ALtkLENXAYNH3RzvfAYjTi3Aw==
 
 [email protected]:
   version "3.1.1"