@nstc-design/icons 0.0.3 → 0.0.4

package/packages/vue/icons/Minimum.js

@@ -0,0 +1,39 @@
+import { defineComponent, h, ref } from "vue";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const toButtonIconSize = (size) => typeof size === "number" ? `${Math.max(0, size - 8)}px` : `max(0px, calc(${size} - 8px))`;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const Minimum = defineComponent({
+  name: "Minimum",
+  inheritAttrs: false,
+  props: {
+    size: { type: [String, Number], default: undefined },
+    color: { type: String, default: undefined },
+    originColor: { type: Boolean, default: false },
+    button: { type: Boolean, default: false },
+    background: { type: Boolean, default: true },
+  },
+  setup(props, { attrs, expose }) {
+    const root = ref(null);
+    expose({ el: root });
+    return () => {
+      const originColor = props.originColor;
+      const renderedSize = props.size ?? 16;
+      const buttonSize = props.size ?? 24;
+      const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+      const style = props.color === undefined ? attrs.style : [attrs.style, { color: props.color }];
+      const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+      const svg = h("svg", props.button
+        ? { ...svgAttributes, width: toButtonIconSize(buttonSize), height: toButtonIconSize(buttonSize), "aria-hidden": true }
+        : { ...attrs, ...svgAttributes, ref: root, width: toSize(renderedSize), height: toSize(renderedSize), style }, [h("path", { "d": "M170.667 853.333h768v85.334H128A42.667 42.667 0 0 1 85.333 896V85.333h85.334zm128-42.666h-85.334v-85.334h85.334zm128 0h-85.334v-85.334h85.334zm128 0h-85.334v-85.334h85.334zm128 0h-85.334v-85.334h85.334zm128 0h-85.334v-85.334h85.334zm128 0h-85.334v-85.334h85.334zM895.21 136.149c-70.038 360.107-178.774 546.518-340.544 546.518-161.771 0-270.507-186.39-340.544-546.518l83.754-16.298c62.72 322.56 153.11 477.482 256.79 477.482S748.715 442.39 811.456 119.851z" })]);
+      if (!props.button) return svg;
+      return h("button", {
+        ...attrs,
+        ref: root,
+        type: attrs.type ?? "button",
+        class: joinClassNames("nstc-icon-button", props.background && "nstc-icon-button--background", attrs.class),
+        style: buttonStyle,
+      }, [svg]);
+    };
+  },
+});

package/packages/vue/icons/Minus.d.ts

@@ -0,0 +1,10 @@
+import type { DefineComponent } from "vue";
+
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+export declare const Minus: DefineComponent<IconProps>;

package/packages/vue/icons/Minus.js

@@ -0,0 +1,39 @@
+import { defineComponent, h, ref } from "vue";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const toButtonIconSize = (size) => typeof size === "number" ? `${Math.max(0, size - 8)}px` : `max(0px, calc(${size} - 8px))`;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const Minus = defineComponent({
+  name: "Minus",
+  inheritAttrs: false,
+  props: {
+    size: { type: [String, Number], default: undefined },
+    color: { type: String, default: undefined },
+    originColor: { type: Boolean, default: false },
+    button: { type: Boolean, default: false },
+    background: { type: Boolean, default: true },
+  },
+  setup(props, { attrs, expose }) {
+    const root = ref(null);
+    expose({ el: root });
+    return () => {
+      const originColor = props.originColor;
+      const renderedSize = props.size ?? 16;
+      const buttonSize = props.size ?? 24;
+      const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+      const style = props.color === undefined ? attrs.style : [attrs.style, { color: props.color }];
+      const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+      const svg = h("svg", props.button
+        ? { ...svgAttributes, width: toButtonIconSize(buttonSize), height: toButtonIconSize(buttonSize), "aria-hidden": true }
+        : { ...attrs, ...svgAttributes, ref: root, width: toSize(renderedSize), height: toSize(renderedSize), style }, [h("path", { "d": "M213.333 565.333h597.334V458.667H213.333z" })]);
+      if (!props.button) return svg;
+      return h("button", {
+        ...attrs,
+        ref: root,
+        type: attrs.type ?? "button",
+        class: joinClassNames("nstc-icon-button", props.background && "nstc-icon-button--background", attrs.class),
+        style: buttonStyle,
+      }, [svg]);
+    };
+  },
+});

package/packages/vue/icons/Mobile.d.ts

@@ -0,0 +1,10 @@
+import type { DefineComponent } from "vue";
+
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+export declare const Mobile: DefineComponent<IconProps>;

package/packages/vue/icons/Mobile.js

@@ -0,0 +1,39 @@
+import { defineComponent, h, ref } from "vue";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const toButtonIconSize = (size) => typeof size === "number" ? `${Math.max(0, size - 8)}px` : `max(0px, calc(${size} - 8px))`;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const Mobile = defineComponent({
+  name: "Mobile",
+  inheritAttrs: false,
+  props: {
+    size: { type: [String, Number], default: undefined },
+    color: { type: String, default: undefined },
+    originColor: { type: Boolean, default: false },
+    button: { type: Boolean, default: false },
+    background: { type: Boolean, default: true },
+  },
+  setup(props, { attrs, expose }) {
+    const root = ref(null);
+    expose({ el: root });
+    return () => {
+      const originColor = props.originColor;
+      const renderedSize = props.size ?? 16;
+      const buttonSize = props.size ?? 24;
+      const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+      const style = props.color === undefined ? attrs.style : [attrs.style, { color: props.color }];
+      const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+      const svg = h("svg", props.button
+        ? { ...svgAttributes, width: toButtonIconSize(buttonSize), height: toButtonIconSize(buttonSize), "aria-hidden": true }
+        : { ...attrs, ...svgAttributes, ref: root, width: toSize(renderedSize), height: toSize(renderedSize), style }, [h("path", { "d": "M789.333 85.333A42.667 42.667 0 0 1 832 128v768a42.667 42.667 0 0 1-42.667 42.667H234.667A42.667 42.667 0 0 1 192 896V128a42.667 42.667 0 0 1 42.667-42.667zm-512 768h469.334V170.667H277.333zm341.334-42.666H405.333v-64h213.334zM576 192v64H448v-64z" })]);
+      if (!props.button) return svg;
+      return h("button", {
+        ...attrs,
+        ref: root,
+        type: attrs.type ?? "button",
+        class: joinClassNames("nstc-icon-button", props.background && "nstc-icon-button--background", attrs.class),
+        style: buttonStyle,
+      }, [svg]);
+    };
+  },
+});

package/packages/vue/icons/Module.d.ts

@@ -0,0 +1,10 @@
+import type { DefineComponent } from "vue";
+
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+export declare const Module: DefineComponent<IconProps>;

package/packages/vue/icons/Module.js

@@ -0,0 +1,39 @@
+import { defineComponent, h, ref } from "vue";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const toButtonIconSize = (size) => typeof size === "number" ? `${Math.max(0, size - 8)}px` : `max(0px, calc(${size} - 8px))`;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const Module = defineComponent({
+  name: "Module",
+  inheritAttrs: false,
+  props: {
+    size: { type: [String, Number], default: undefined },
+    color: { type: String, default: undefined },
+    originColor: { type: Boolean, default: false },
+    button: { type: Boolean, default: false },
+    background: { type: Boolean, default: true },
+  },
+  setup(props, { attrs, expose }) {
+    const root = ref(null);
+    expose({ el: root });
+    return () => {
+      const originColor = props.originColor;
+      const renderedSize = props.size ?? 16;
+      const buttonSize = props.size ?? 24;
+      const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+      const style = props.color === undefined ? attrs.style : [attrs.style, { color: props.color }];
+      const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+      const svg = h("svg", props.button
+        ? { ...svgAttributes, width: toButtonIconSize(buttonSize), height: toButtonIconSize(buttonSize), "aria-hidden": true }
+        : { ...attrs, ...svgAttributes, ref: root, width: toSize(renderedSize), height: toSize(renderedSize), style }, [h("path", { "d": "M938.667 128a42.667 42.667 0 0 1 42.666 42.667v682.666A42.667 42.667 0 0 1 938.667 896H85.333a42.667 42.667 0 0 1-42.666-42.667V170.667A42.667 42.667 0 0 1 85.333 128zM128 810.667h128V469.333H128zm213.333 0H896v-128H341.333zm0-213.334H896v-128H341.333zM128 384h768V213.333H128zm85.333-128a42.667 42.667 0 1 1 0 85.333 42.667 42.667 0 0 1 0-85.333m128 0a42.667 42.667 0 1 1 0 85.333 42.667 42.667 0 0 1 0-85.333m128 0a42.667 42.667 0 1 1 0 85.333 42.667 42.667 0 0 1 0-85.333" })]);
+      if (!props.button) return svg;
+      return h("button", {
+        ...attrs,
+        ref: root,
+        type: attrs.type ?? "button",
+        class: joinClassNames("nstc-icon-button", props.background && "nstc-icon-button--background", attrs.class),
+        style: buttonStyle,
+      }, [svg]);
+    };
+  },
+});

package/packages/vue/icons/Money.d.ts

@@ -0,0 +1,10 @@
+import type { DefineComponent } from "vue";
+
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+export declare const Money: DefineComponent<IconProps>;

package/packages/vue/icons/Money.js

@@ -0,0 +1,39 @@
+import { defineComponent, h, ref } from "vue";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const toButtonIconSize = (size) => typeof size === "number" ? `${Math.max(0, size - 8)}px` : `max(0px, calc(${size} - 8px))`;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const Money = defineComponent({
+  name: "Money",
+  inheritAttrs: false,
+  props: {
+    size: { type: [String, Number], default: undefined },
+    color: { type: String, default: undefined },
+    originColor: { type: Boolean, default: false },
+    button: { type: Boolean, default: false },
+    background: { type: Boolean, default: true },
+  },
+  setup(props, { attrs, expose }) {
+    const root = ref(null);
+    expose({ el: root });
+    return () => {
+      const originColor = props.originColor;
+      const renderedSize = props.size ?? 16;
+      const buttonSize = props.size ?? 24;
+      const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+      const style = props.color === undefined ? attrs.style : [attrs.style, { color: props.color }];
+      const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+      const svg = h("svg", props.button
+        ? { ...svgAttributes, width: toButtonIconSize(buttonSize), height: toButtonIconSize(buttonSize), "aria-hidden": true }
+        : { ...attrs, ...svgAttributes, ref: root, width: toSize(renderedSize), height: toSize(renderedSize), style }, [h("path", { "d": "M938.667 128a42.667 42.667 0 0 1 42.666 42.667v682.666A42.667 42.667 0 0 1 938.667 896H85.333a42.667 42.667 0 0 1-42.666-42.667V170.667A42.667 42.667 0 0 1 85.333 128zM128 810.667h768V213.333H128zm558.144-442.56-85.824 61.29h61.013v85.334H554.667v32h106.666v85.333H554.667v85.333h-85.334v-85.333H362.667v-85.333h106.666v-32H362.667v-85.334h61.013l-85.803-61.29 49.6-69.44L512 387.627l124.544-88.96z" })]);
+      if (!props.button) return svg;
+      return h("button", {
+        ...attrs,
+        ref: root,
+        type: attrs.type ?? "button",
+        class: joinClassNames("nstc-icon-button", props.background && "nstc-icon-button--background", attrs.class),
+        style: buttonStyle,
+      }, [svg]);
+    };
+  },
+});

package/packages/vue/icons/MoneyCollect.d.ts

@@ -0,0 +1,10 @@
+import type { DefineComponent } from "vue";
+
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+export declare const MoneyCollect: DefineComponent<IconProps>;

package/packages/vue/icons/MoneyCollect.js

@@ -0,0 +1,39 @@
+import { defineComponent, h, ref } from "vue";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const toButtonIconSize = (size) => typeof size === "number" ? `${Math.max(0, size - 8)}px` : `max(0px, calc(${size} - 8px))`;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const MoneyCollect = defineComponent({
+  name: "MoneyCollect",
+  inheritAttrs: false,
+  props: {
+    size: { type: [String, Number], default: undefined },
+    color: { type: String, default: undefined },
+    originColor: { type: Boolean, default: false },
+    button: { type: Boolean, default: false },
+    background: { type: Boolean, default: true },
+  },
+  setup(props, { attrs, expose }) {
+    const root = ref(null);
+    expose({ el: root });
+    return () => {
+      const originColor = props.originColor;
+      const renderedSize = props.size ?? 16;
+      const buttonSize = props.size ?? 24;
+      const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+      const style = props.color === undefined ? attrs.style : [attrs.style, { color: props.color }];
+      const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+      const svg = h("svg", props.button
+        ? { ...svgAttributes, width: toButtonIconSize(buttonSize), height: toButtonIconSize(buttonSize), "aria-hidden": true }
+        : { ...attrs, ...svgAttributes, ref: root, width: toSize(renderedSize), height: toSize(renderedSize), style }, [h("path", { "d": "M832 85.333A42.667 42.667 0 0 1 874.667 128v447.744l17.365-12.757 34.347-25.323 50.602 68.693-34.346 25.323-67.968 50.07v.917h-1.216L537.3 930.347a42.67 42.67 0 0 1-50.602 0l-336.15-247.68h-1.216v-.896L81.365 631.68 47.02 606.379l50.624-68.694 34.325 25.302 17.365 12.8V128A42.667 42.667 0 0 1 192 85.333zM234.667 638.635 512 843.008l277.333-204.373V170.667H234.667zm451.477-326.592-85.845 61.29h61.013v85.334H554.645v32h106.667V576H554.645v85.333h-85.333V576H362.645v-85.333h106.667v-32H362.645v-85.334h61.014l-85.803-61.29 49.621-69.44 124.48 88.96 124.587-88.96z" })]);
+      if (!props.button) return svg;
+      return h("button", {
+        ...attrs,
+        ref: root,
+        type: attrs.type ?? "button",
+        class: joinClassNames("nstc-icon-button", props.background && "nstc-icon-button--background", attrs.class),
+        style: buttonStyle,
+      }, [svg]);
+    };
+  },
+});

package/packages/vue/icons/MoneyPay.d.ts

@@ -0,0 +1,10 @@
+import type { DefineComponent } from "vue";
+
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+export declare const MoneyPay: DefineComponent<IconProps>;

package/packages/vue/icons/MoneyPay.js

@@ -0,0 +1,39 @@
+import { defineComponent, h, ref } from "vue";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const toButtonIconSize = (size) => typeof size === "number" ? `${Math.max(0, size - 8)}px` : `max(0px, calc(${size} - 8px))`;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const MoneyPay = defineComponent({
+  name: "MoneyPay",
+  inheritAttrs: false,
+  props: {
+    size: { type: [String, Number], default: undefined },
+    color: { type: String, default: undefined },
+    originColor: { type: Boolean, default: false },
+    button: { type: Boolean, default: false },
+    background: { type: Boolean, default: true },
+  },
+  setup(props, { attrs, expose }) {
+    const root = ref(null);
+    expose({ el: root });
+    return () => {
+      const originColor = props.originColor;
+      const renderedSize = props.size ?? 16;
+      const buttonSize = props.size ?? 24;
+      const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+      const style = props.color === undefined ? attrs.style : [attrs.style, { color: props.color }];
+      const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+      const svg = h("svg", props.button
+        ? { ...svgAttributes, width: toButtonIconSize(buttonSize), height: toButtonIconSize(buttonSize), "aria-hidden": true }
+        : { ...attrs, ...svgAttributes, ref: root, width: toSize(renderedSize), height: toSize(renderedSize), style }, [h("path", { "d": "M486.699 93.653a42.67 42.67 0 0 1 50.602 0l336.15 247.68h1.216v.896l67.968 50.091 34.346 25.301-50.602 68.694-34.347-25.302-17.365-12.8V896A42.667 42.667 0 0 1 832 938.667H192A42.667 42.667 0 0 1 149.333 896V448.213l-17.365 12.8-34.347 25.323-50.624-68.693 34.347-25.323 67.99-50.133v-.854h1.215zm-252.032 291.67v468.01h554.666V385.365L512 180.992 234.667 385.344zm451.477 25.45-85.824 61.291h61.013v85.333H554.667v32h106.666v85.334H554.667v85.333h-85.334v-85.333H362.667v-85.334h106.666v-32H362.667v-85.333h61.013l-85.824-61.29 49.621-69.44 124.48 88.96 124.587-88.96z" })]);
+      if (!props.button) return svg;
+      return h("button", {
+        ...attrs,
+        ref: root,
+        type: attrs.type ?? "button",
+        class: joinClassNames("nstc-icon-button", props.background && "nstc-icon-button--background", attrs.class),
+        style: buttonStyle,
+      }, [svg]);
+    };
+  },
+});

package/packages/vue/icons/Monitor.d.ts

@@ -0,0 +1,10 @@
+import type { DefineComponent } from "vue";
+
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+export declare const Monitor: DefineComponent<IconProps>;

package/packages/vue/icons/Monitor.js

@@ -0,0 +1,39 @@
+import { defineComponent, h, ref } from "vue";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const toButtonIconSize = (size) => typeof size === "number" ? `${Math.max(0, size - 8)}px` : `max(0px, calc(${size} - 8px))`;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const Monitor = defineComponent({
+  name: "Monitor",
+  inheritAttrs: false,
+  props: {
+    size: { type: [String, Number], default: undefined },
+    color: { type: String, default: undefined },
+    originColor: { type: Boolean, default: false },
+    button: { type: Boolean, default: false },
+    background: { type: Boolean, default: true },
+  },
+  setup(props, { attrs, expose }) {
+    const root = ref(null);
+    expose({ el: root });
+    return () => {
+      const originColor = props.originColor;
+      const renderedSize = props.size ?? 16;
+      const buttonSize = props.size ?? 24;
+      const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+      const style = props.color === undefined ? attrs.style : [attrs.style, { color: props.color }];
+      const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+      const svg = h("svg", props.button
+        ? { ...svgAttributes, width: toButtonIconSize(buttonSize), height: toButtonIconSize(buttonSize), "aria-hidden": true }
+        : { ...attrs, ...svgAttributes, ref: root, width: toSize(renderedSize), height: toSize(renderedSize), style }, [h("path", { "d": "M512 42.667c200.299 0 362.667 162.368 362.667 362.666 0 121.814-60.054 229.547-152.15 295.318l125.099 216.682c16.427 28.438-4.117 64-36.95 64H213.334c-32.853 0-53.376-35.562-36.949-64l125.077-216.682c-92.096-65.771-152.128-173.526-152.128-295.318 0-200.298 162.368-362.666 362.667-362.666m135.68 699.072A361.7 361.7 0 0 1 512 768a361.6 361.6 0 0 1-135.701-26.261l-89.067 154.24h449.515zM512 128c-153.173 0-277.333 124.16-277.333 277.333S358.827 682.667 512 682.667s277.333-124.16 277.333-277.334S665.173 128 512 128m0 128a149.333 149.333 0 1 1 0 298.667A149.333 149.333 0 0 1 512 256m0 85.333a64 64 0 1 0 0 128 64 64 0 0 0 0-128" })]);
+      if (!props.button) return svg;
+      return h("button", {
+        ...attrs,
+        ref: root,
+        type: attrs.type ?? "button",
+        class: joinClassNames("nstc-icon-button", props.background && "nstc-icon-button--background", attrs.class),
+        style: buttonStyle,
+      }, [svg]);
+    };
+  },
+});

package/packages/vue/icons/MonitorFill.d.ts

@@ -0,0 +1,10 @@
+import type { DefineComponent } from "vue";
+
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+export declare const MonitorFill: DefineComponent<IconProps>;

package/packages/vue/icons/MonitorFill.js

@@ -0,0 +1,39 @@
+import { defineComponent, h, ref } from "vue";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const toButtonIconSize = (size) => typeof size === "number" ? `${Math.max(0, size - 8)}px` : `max(0px, calc(${size} - 8px))`;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const MonitorFill = defineComponent({
+  name: "MonitorFill",
+  inheritAttrs: false,
+  props: {
+    size: { type: [String, Number], default: undefined },
+    color: { type: String, default: undefined },
+    originColor: { type: Boolean, default: false },
+    button: { type: Boolean, default: false },
+    background: { type: Boolean, default: true },
+  },
+  setup(props, { attrs, expose }) {
+    const root = ref(null);
+    expose({ el: root });
+    return () => {
+      const originColor = props.originColor;
+      const renderedSize = props.size ?? 16;
+      const buttonSize = props.size ?? 24;
+      const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+      const style = props.color === undefined ? attrs.style : [attrs.style, { color: props.color }];
+      const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+      const svg = h("svg", props.button
+        ? { ...svgAttributes, width: toButtonIconSize(buttonSize), height: toButtonIconSize(buttonSize), "aria-hidden": true }
+        : { ...attrs, ...svgAttributes, ref: root, width: toSize(renderedSize), height: toSize(renderedSize), style }, [h("path", { "d": "m744.768 739.157 102.848 178.176c16.427 28.438-4.117 64-36.95 64H213.334c-32.853 0-53.376-35.562-36.949-64L290.731 719.19A382.2 382.2 0 0 0 512 789.333c82.39 0 158.699-25.984 221.227-70.144zM512 42.667c200.299 0 362.667 162.368 362.667 362.666 0 160.534-104.32 296.662-248.854 344.406l-2.88.938a375 375 0 0 1-23.936 6.784l-2.965.704a367 367 0 0 1-11.861 2.624l-1.771.342c-3.67.725-7.339 1.386-11.05 2.005l-2.753.448c-4.01.64-8.021 1.195-12.074 1.707l-2.838.298c-3.413.384-6.805.726-10.24 1.024-1.066.086-2.133.214-3.242.278a360 360 0 0 1-11.904.704l-3.563.128A371 371 0 0 1 512 768c-4.267 0-8.533-.128-12.757-.277l-3.563-.128a360 360 0 0 1-11.904-.704c-1.088-.086-2.176-.214-3.264-.278q-5.12-.447-10.24-1.024l-2.816-.32a374 374 0 0 1-12.075-1.685l-2.794-.448a363 363 0 0 1-24.619-4.95l-2.987-.725a361 361 0 0 1-51.114-16.704l-.726-.32a361 361 0 0 1-24.106-11.05l-.918-.448a362 362 0 0 1-35.029-20.331l-.704-.47c-98.24-64.874-163.05-176.277-163.05-302.805C149.333 205.035 311.7 42.667 512 42.667M512 256a149.333 149.333 0 1 0 0 298.667A149.333 149.333 0 0 0 512 256m0 85.333a64 64 0 1 1 0 128 64 64 0 0 1 0-128" })]);
+      if (!props.button) return svg;
+      return h("button", {
+        ...attrs,
+        ref: root,
+        type: attrs.type ?? "button",
+        class: joinClassNames("nstc-icon-button", props.background && "nstc-icon-button--background", attrs.class),
+        style: buttonStyle,
+      }, [svg]);
+    };
+  },
+});

package/packages/vue/icons/MonitorTrend.d.ts

@@ -0,0 +1,10 @@
+import type { DefineComponent } from "vue";
+
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+export declare const MonitorTrend: DefineComponent<IconProps>;

package/packages/vue/icons/MonitorTrend.js

@@ -0,0 +1,39 @@
+import { defineComponent, h, ref } from "vue";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const toButtonIconSize = (size) => typeof size === "number" ? `${Math.max(0, size - 8)}px` : `max(0px, calc(${size} - 8px))`;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const MonitorTrend = defineComponent({
+  name: "MonitorTrend",
+  inheritAttrs: false,
+  props: {
+    size: { type: [String, Number], default: undefined },
+    color: { type: String, default: undefined },
+    originColor: { type: Boolean, default: false },
+    button: { type: Boolean, default: false },
+    background: { type: Boolean, default: true },
+  },
+  setup(props, { attrs, expose }) {
+    const root = ref(null);
+    expose({ el: root });
+    return () => {
+      const originColor = props.originColor;
+      const renderedSize = props.size ?? 16;
+      const buttonSize = props.size ?? 24;
+      const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+      const style = props.color === undefined ? attrs.style : [attrs.style, { color: props.color }];
+      const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+      const svg = h("svg", props.button
+        ? { ...svgAttributes, width: toButtonIconSize(buttonSize), height: toButtonIconSize(buttonSize), "aria-hidden": true }
+        : { ...attrs, ...svgAttributes, ref: root, width: toSize(renderedSize), height: toSize(renderedSize), style }, [h("path", { "d": "M853.333 42.667A42.667 42.667 0 0 1 896 85.333V576h-85.333V128h-640v768H384v85.333H128a42.667 42.667 0 0 1-42.667-42.666V85.333A42.667 42.667 0 0 1 128 42.667zM693.333 640c90.347 0 170.539 52.117 239.68 152.533a32 32 0 0 1 0 36.267c-69.141 100.416-149.333 152.533-239.68 152.533-90.346 0-170.538-52.117-239.68-152.533a32 32 0 0 1 0-36.267C522.795 692.117 602.987 640 693.333 640m0 64c-60.842 0-117.802 33.536-171.477 103.467l-2.41 3.2 2.41 3.2c51.947 67.69 106.965 101.269 165.61 103.36l5.867.106c60.843 0 117.803-33.536 171.478-103.466l2.389-3.222-2.39-3.157c-51.946-67.712-106.965-101.29-165.61-103.381zm0 42.667a64 64 0 1 1 0 128 64 64 0 0 1 0-128M362.667 800H213.333v-64h149.334zM448 672H213.333v-64H448zm192-480a42.667 42.667 0 0 1 42.667 42.667v170.666h-85.334v-65.962L488.768 453.995a42.67 42.67 0 0 1-53.419 6.933l-66.56-41.195-79.701 97.878-66.176-53.888 103.36-126.934a42.67 42.67 0 0 1 55.552-9.344l68.885 42.646 87.851-92.758h-69.227V192z" })]);
+      if (!props.button) return svg;
+      return h("button", {
+        ...attrs,
+        ref: root,
+        type: attrs.type ?? "button",
+        class: joinClassNames("nstc-icon-button", props.background && "nstc-icon-button--background", attrs.class),
+        style: buttonStyle,
+      }, [svg]);
+    };
+  },
+});

package/packages/vue/icons/Moon.d.ts

@@ -0,0 +1,10 @@
+import type { DefineComponent } from "vue";
+
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+export declare const Moon: DefineComponent<IconProps>;

package/packages/vue/icons/Moon.js

@@ -0,0 +1,39 @@
+import { defineComponent, h, ref } from "vue";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const toButtonIconSize = (size) => typeof size === "number" ? `${Math.max(0, size - 8)}px` : `max(0px, calc(${size} - 8px))`;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const Moon = defineComponent({
+  name: "Moon",
+  inheritAttrs: false,
+  props: {
+    size: { type: [String, Number], default: undefined },
+    color: { type: String, default: undefined },
+    originColor: { type: Boolean, default: false },
+    button: { type: Boolean, default: false },
+    background: { type: Boolean, default: true },
+  },
+  setup(props, { attrs, expose }) {
+    const root = ref(null);
+    expose({ el: root });
+    return () => {
+      const originColor = props.originColor;
+      const renderedSize = props.size ?? 16;
+      const buttonSize = props.size ?? 24;
+      const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+      const style = props.color === undefined ? attrs.style : [attrs.style, { color: props.color }];
+      const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+      const svg = h("svg", props.button
+        ? { ...svgAttributes, width: toButtonIconSize(buttonSize), height: toButtonIconSize(buttonSize), "aria-hidden": true }
+        : { ...attrs, ...svgAttributes, ref: root, width: toSize(renderedSize), height: toSize(renderedSize), style }, [h("path", { "d": "m394.24 191.53-7.125 2.689C211.669 263.403 125.547 461.696 194.73 637.14A341.46 341.46 0 0 0 512 853.333c143.147 0 271.083-89.28 320.47-223.616-194.603 47.424-390.806-71.893-438.209-266.496a362.6 362.6 0 0 1-.021-171.69M512 85.334l10.71.214a12.288 12.288 0 0 1 9.429 19.37c-22.656 31.915-36.48 53.76-41.515 65.622-59.05 141.333 7.659 303.786 148.992 362.816a277.33 277.33 0 0 0 201.259 4.906l11.776-4.544c15.701-6.528 35.37-18.346 59.008-35.498A17.024 17.024 0 0 1 938.667 512c0 9.6-.299 19.157-.939 28.587l-1.152 14.08-.853 7.68-1.707 12.885C903.466 780.885 726.144 938.667 512 938.667 276.352 938.667 85.333 747.648 85.333 512c0-210.219 152.064-384.939 352.171-420.181l14.379-2.262 10.112-1.322 7.338-.811A440 440 0 0 1 512 85.334" })]);
+      if (!props.button) return svg;
+      return h("button", {
+        ...attrs,
+        ref: root,
+        type: attrs.type ?? "button",
+        class: joinClassNames("nstc-icon-button", props.background && "nstc-icon-button--background", attrs.class),
+        style: buttonStyle,
+      }, [svg]);
+    };
+  },
+});

package/packages/vue/icons/More.d.ts

@@ -0,0 +1,10 @@
+import type { DefineComponent } from "vue";
+
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+export declare const More: DefineComponent<IconProps>;

package/packages/vue/icons/More.js

@@ -0,0 +1,39 @@
+import { defineComponent, h, ref } from "vue";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const toButtonIconSize = (size) => typeof size === "number" ? `${Math.max(0, size - 8)}px` : `max(0px, calc(${size} - 8px))`;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const More = defineComponent({
+  name: "More",
+  inheritAttrs: false,
+  props: {
+    size: { type: [String, Number], default: undefined },
+    color: { type: String, default: undefined },
+    originColor: { type: Boolean, default: false },
+    button: { type: Boolean, default: false },
+    background: { type: Boolean, default: true },
+  },
+  setup(props, { attrs, expose }) {
+    const root = ref(null);
+    expose({ el: root });
+    return () => {
+      const originColor = props.originColor;
+      const renderedSize = props.size ?? 16;
+      const buttonSize = props.size ?? 24;
+      const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+      const style = props.color === undefined ? attrs.style : [attrs.style, { color: props.color }];
+      const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+      const svg = h("svg", props.button
+        ? { ...svgAttributes, width: toButtonIconSize(buttonSize), height: toButtonIconSize(buttonSize), "aria-hidden": true }
+        : { ...attrs, ...svgAttributes, ref: root, width: toSize(renderedSize), height: toSize(renderedSize), style }, [h("path", { "d": "M234.667 448a64 64 0 1 1 0 128 64 64 0 0 1 0-128M512 448a64 64 0 1 1 0 128 64 64 0 0 1 0-128m277.333 0a64 64 0 1 1 0 128 64 64 0 0 1 0-128" })]);
+      if (!props.button) return svg;
+      return h("button", {
+        ...attrs,
+        ref: root,
+        type: attrs.type ?? "button",
+        class: joinClassNames("nstc-icon-button", props.background && "nstc-icon-button--background", attrs.class),
+        style: buttonStyle,
+      }, [svg]);
+    };
+  },
+});

package/packages/vue/icons/MoreFill.d.ts

@@ -0,0 +1,10 @@
+import type { DefineComponent } from "vue";
+
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+export declare const MoreFill: DefineComponent<IconProps>;