@nstc-design/icons 0.1.0 → 0.2.0

package/packages/vue-legacy/icons/SortFill.cjs

@@ -0,0 +1,66 @@
+"use strict";
+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(" ");
+const componentDefinition = {
+  name: "icon-sort-fill",
+  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 },
+  },
+  computed: {
+    el() {
+      return this.$refs.root || this.$el;
+    },
+  },
+  render(h) {
+    const originColor = this.originColor;
+    const renderedSize = this.size === undefined || this.size === null ? 16 : this.size;
+    const buttonSize = this.size === undefined || this.size === null ? 24 : this.size;
+    const attrs = this.$attrs || {};
+    const listeners = this.$listeners || {};
+    const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+    const style = this.color === undefined ? undefined : { color: this.color };
+    const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+    const svg = h("svg", this.button
+      ? {
+          attrs: {
+            ...svgAttributes,
+            width: toButtonIconSize(buttonSize),
+            height: toButtonIconSize(buttonSize),
+            "aria-hidden": "true",
+          },
+        }
+      : {
+          ref: "root",
+          attrs: {
+            ...svgAttributes,
+            ...attrs,
+            width: toSize(renderedSize),
+            height: toSize(renderedSize),
+          },
+          style: style,
+          on: listeners,
+        }, [h("path", { attrs: { "d": "M704 576c33.344 0 53.397 36.267 36.8 64.277l-1.707 2.667-192 277.333a42.667 42.667 0 0 1-68.053 2.838l-2.133-2.838-192-277.333c-18.966-27.413-.555-64.533 31.914-66.837L320 576zM476.928 103.723a42.667 42.667 0 0 1 68.032-2.838l2.133 2.838 192 277.333c18.966 27.413.555 64.533-31.914 66.837L704 448H320c-33.344 0-53.397-36.267-36.8-64.277l1.707-2.667 192-277.333z" } })]);
+    if (!this.button) return svg;
+    return h("button", {
+      ref: "root",
+      attrs: {
+        type: attrs.type || "button",
+        ...attrs,
+      },
+      class: joinClassNames("nstc-icon-button", this.background && "nstc-icon-button--background"),
+      style: buttonStyle,
+      on: listeners,
+    }, [svg]);
+  },
+};
+module.exports = {
+  SortFill: componentDefinition,
+  IconSortFill: componentDefinition,
+  default: componentDefinition,
+};

package/packages/vue-legacy/icons/SortFill.d.ts

@@ -0,0 +1,23 @@
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+
+export interface IconComponentInstance {
+  readonly $props: IconProps;
+  readonly el: SVGSVGElement | HTMLButtonElement;
+}
+
+export interface IconComponent {
+  new (...args: readonly unknown[]): IconComponentInstance;
+  name?: string;
+  props?: Record<string, unknown>;
+  render?: (...args: readonly unknown[]) => unknown;
+}
+
+export declare const SortFill: IconComponent;
+export declare const IconSortFill: IconComponent;
+export default SortFill;

package/packages/vue-legacy/icons/SortFill.js

@@ -0,0 +1,63 @@
+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(" ");
+const componentDefinition = {
+  name: "icon-sort-fill",
+  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 },
+  },
+  computed: {
+    el() {
+      return this.$refs.root || this.$el;
+    },
+  },
+  render(h) {
+    const originColor = this.originColor;
+    const renderedSize = this.size === undefined || this.size === null ? 16 : this.size;
+    const buttonSize = this.size === undefined || this.size === null ? 24 : this.size;
+    const attrs = this.$attrs || {};
+    const listeners = this.$listeners || {};
+    const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+    const style = this.color === undefined ? undefined : { color: this.color };
+    const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+    const svg = h("svg", this.button
+      ? {
+          attrs: {
+            ...svgAttributes,
+            width: toButtonIconSize(buttonSize),
+            height: toButtonIconSize(buttonSize),
+            "aria-hidden": "true",
+          },
+        }
+      : {
+          ref: "root",
+          attrs: {
+            ...svgAttributes,
+            ...attrs,
+            width: toSize(renderedSize),
+            height: toSize(renderedSize),
+          },
+          style: style,
+          on: listeners,
+        }, [h("path", { attrs: { "d": "M704 576c33.344 0 53.397 36.267 36.8 64.277l-1.707 2.667-192 277.333a42.667 42.667 0 0 1-68.053 2.838l-2.133-2.838-192-277.333c-18.966-27.413-.555-64.533 31.914-66.837L320 576zM476.928 103.723a42.667 42.667 0 0 1 68.032-2.838l2.133 2.838 192 277.333c18.966 27.413.555 64.533-31.914 66.837L704 448H320c-33.344 0-53.397-36.267-36.8-64.277l1.707-2.667 192-277.333z" } })]);
+    if (!this.button) return svg;
+    return h("button", {
+      ref: "root",
+      attrs: {
+        type: attrs.type || "button",
+        ...attrs,
+      },
+      class: joinClassNames("nstc-icon-button", this.background && "nstc-icon-button--background"),
+      style: buttonStyle,
+      on: listeners,
+    }, [svg]);
+  },
+};
+export const SortFill = componentDefinition;
+export const IconSortFill = componentDefinition;
+export default SortFill;

package/packages/vue-legacy/icons/SoundFill.cjs

@@ -0,0 +1,66 @@
+"use strict";
+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(" ");
+const componentDefinition = {
+  name: "icon-sound-fill",
+  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 },
+  },
+  computed: {
+    el() {
+      return this.$refs.root || this.$el;
+    },
+  },
+  render(h) {
+    const originColor = this.originColor;
+    const renderedSize = this.size === undefined || this.size === null ? 16 : this.size;
+    const buttonSize = this.size === undefined || this.size === null ? 24 : this.size;
+    const attrs = this.$attrs || {};
+    const listeners = this.$listeners || {};
+    const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+    const style = this.color === undefined ? undefined : { color: this.color };
+    const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+    const svg = h("svg", this.button
+      ? {
+          attrs: {
+            ...svgAttributes,
+            width: toButtonIconSize(buttonSize),
+            height: toButtonIconSize(buttonSize),
+            "aria-hidden": "true",
+          },
+        }
+      : {
+          ref: "root",
+          attrs: {
+            ...svgAttributes,
+            ...attrs,
+            width: toSize(renderedSize),
+            height: toSize(renderedSize),
+          },
+          style: style,
+          on: listeners,
+        }, [h("path", { attrs: { "d": "M554.667 128a42.667 42.667 0 0 1 42.666 42.667v682.666A42.667 42.667 0 0 1 554.667 896c-83.584 0-161.579-36.757-232.427-97.024a589 589 0 0 1-71.765-72.853l-3.158-3.84H85.333a42.667 42.667 0 0 1-42.538-39.488l-.128-3.179v-338.07a42.667 42.667 0 0 1 42.666-42.666l162.219-.021 3.157-3.776 3.456-4.054 3.691-4.266a585 585 0 0 1 64.661-63.382C393.323 164.14 471.253 128 554.667 128m242.688 7.808c113.856 80.427 183.978 220.97 183.978 374.55 0 156.074-72.426 298.58-189.312 378.24L743.98 818.09C837.099 754.624 896 638.677 896 510.357 896 384 838.933 269.653 748.117 205.504zm-88.171 150.784a310.3 310.3 0 0 1 46.87 45.973c42.026 51.158 65.28 113.664 65.28 179.435 0 65.195-22.827 127.21-64.214 178.133a310.2 310.2 0 0 1-47.936 47.275l-53.035-66.816a225 225 0 0 0 34.731-34.261C720.107 600.34 736 557.227 736 512c0-45.632-16.15-89.088-45.867-125.248a225 225 0 0 0-33.984-33.344z" } })]);
+    if (!this.button) return svg;
+    return h("button", {
+      ref: "root",
+      attrs: {
+        type: attrs.type || "button",
+        ...attrs,
+      },
+      class: joinClassNames("nstc-icon-button", this.background && "nstc-icon-button--background"),
+      style: buttonStyle,
+      on: listeners,
+    }, [svg]);
+  },
+};
+module.exports = {
+  SoundFill: componentDefinition,
+  IconSoundFill: componentDefinition,
+  default: componentDefinition,
+};

package/packages/vue-legacy/icons/SoundFill.d.ts

@@ -0,0 +1,23 @@
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+
+export interface IconComponentInstance {
+  readonly $props: IconProps;
+  readonly el: SVGSVGElement | HTMLButtonElement;
+}
+
+export interface IconComponent {
+  new (...args: readonly unknown[]): IconComponentInstance;
+  name?: string;
+  props?: Record<string, unknown>;
+  render?: (...args: readonly unknown[]) => unknown;
+}
+
+export declare const SoundFill: IconComponent;
+export declare const IconSoundFill: IconComponent;
+export default SoundFill;

package/packages/vue-legacy/icons/SoundFill.js

@@ -0,0 +1,63 @@
+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(" ");
+const componentDefinition = {
+  name: "icon-sound-fill",
+  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 },
+  },
+  computed: {
+    el() {
+      return this.$refs.root || this.$el;
+    },
+  },
+  render(h) {
+    const originColor = this.originColor;
+    const renderedSize = this.size === undefined || this.size === null ? 16 : this.size;
+    const buttonSize = this.size === undefined || this.size === null ? 24 : this.size;
+    const attrs = this.$attrs || {};
+    const listeners = this.$listeners || {};
+    const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+    const style = this.color === undefined ? undefined : { color: this.color };
+    const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+    const svg = h("svg", this.button
+      ? {
+          attrs: {
+            ...svgAttributes,
+            width: toButtonIconSize(buttonSize),
+            height: toButtonIconSize(buttonSize),
+            "aria-hidden": "true",
+          },
+        }
+      : {
+          ref: "root",
+          attrs: {
+            ...svgAttributes,
+            ...attrs,
+            width: toSize(renderedSize),
+            height: toSize(renderedSize),
+          },
+          style: style,
+          on: listeners,
+        }, [h("path", { attrs: { "d": "M554.667 128a42.667 42.667 0 0 1 42.666 42.667v682.666A42.667 42.667 0 0 1 554.667 896c-83.584 0-161.579-36.757-232.427-97.024a589 589 0 0 1-71.765-72.853l-3.158-3.84H85.333a42.667 42.667 0 0 1-42.538-39.488l-.128-3.179v-338.07a42.667 42.667 0 0 1 42.666-42.666l162.219-.021 3.157-3.776 3.456-4.054 3.691-4.266a585 585 0 0 1 64.661-63.382C393.323 164.14 471.253 128 554.667 128m242.688 7.808c113.856 80.427 183.978 220.97 183.978 374.55 0 156.074-72.426 298.58-189.312 378.24L743.98 818.09C837.099 754.624 896 638.677 896 510.357 896 384 838.933 269.653 748.117 205.504zm-88.171 150.784a310.3 310.3 0 0 1 46.87 45.973c42.026 51.158 65.28 113.664 65.28 179.435 0 65.195-22.827 127.21-64.214 178.133a310.2 310.2 0 0 1-47.936 47.275l-53.035-66.816a225 225 0 0 0 34.731-34.261C720.107 600.34 736 557.227 736 512c0-45.632-16.15-89.088-45.867-125.248a225 225 0 0 0-33.984-33.344z" } })]);
+    if (!this.button) return svg;
+    return h("button", {
+      ref: "root",
+      attrs: {
+        type: attrs.type || "button",
+        ...attrs,
+      },
+      class: joinClassNames("nstc-icon-button", this.background && "nstc-icon-button--background"),
+      style: buttonStyle,
+      on: listeners,
+    }, [svg]);
+  },
+};
+export const SoundFill = componentDefinition;
+export const IconSoundFill = componentDefinition;
+export default SoundFill;

package/packages/vue-legacy/icons/Speed.cjs

@@ -0,0 +1,66 @@
+"use strict";
+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(" ");
+const componentDefinition = {
+  name: "icon-speed",
+  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 },
+  },
+  computed: {
+    el() {
+      return this.$refs.root || this.$el;
+    },
+  },
+  render(h) {
+    const originColor = this.originColor;
+    const renderedSize = this.size === undefined || this.size === null ? 16 : this.size;
+    const buttonSize = this.size === undefined || this.size === null ? 24 : this.size;
+    const attrs = this.$attrs || {};
+    const listeners = this.$listeners || {};
+    const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+    const style = this.color === undefined ? undefined : { color: this.color };
+    const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+    const svg = h("svg", this.button
+      ? {
+          attrs: {
+            ...svgAttributes,
+            width: toButtonIconSize(buttonSize),
+            height: toButtonIconSize(buttonSize),
+            "aria-hidden": "true",
+          },
+        }
+      : {
+          ref: "root",
+          attrs: {
+            ...svgAttributes,
+            ...attrs,
+            width: toSize(renderedSize),
+            height: toSize(renderedSize),
+          },
+          style: style,
+          on: listeners,
+        }, [h("path", { attrs: { "d": "M512 42.667c83.733 0 164.352 21.973 235.243 63.125l36.906 21.419-42.837 73.813-36.907-21.419A382 382 0 0 0 512 128c-212.075 0-384 171.925-384 384s171.925 384 384 384 384-171.925 384-384c0-68.117-17.728-133.547-50.944-191.253l-21.27-36.971 73.963-42.56 21.27 36.97A467.3 467.3 0 0 1 981.333 512c0 259.2-210.133 469.333-469.333 469.333S42.667 771.2 42.667 512 252.8 42.667 512 42.667m198.379 216.042c34.282-12.842 67.754 20.651 54.912 54.934l-4.608 12.117a3435 3435 0 0 1-51.734 127.253c-5.973 13.76-11.776 26.816-17.408 39.04-24.49 53.12-43.904 88.107-61.546 105.728a144.107 144.107 0 0 1-203.776-203.754c17.621-17.643 52.586-37.056 105.728-61.547a1883 1883 0 0 1 39.04-17.43c30.528-13.247 63.146-26.623 95.765-39.487a3474 3474 0 0 1 43.627-16.854M641.344 377.9a2408 2408 0 0 0-36.416 15.445c-13.184 5.717-25.664 11.285-37.29 16.64-43.094 19.84-73.409 36.693-81.089 44.373a58.773 58.773 0 0 0 83.094 83.094c7.68-7.68 24.533-37.974 44.394-81.088 5.355-11.627 10.902-24.107 16.64-37.27a2763 2763 0 0 0 15.424-36.394l3.328-8.128-8.106 3.328z" } })]);
+    if (!this.button) return svg;
+    return h("button", {
+      ref: "root",
+      attrs: {
+        type: attrs.type || "button",
+        ...attrs,
+      },
+      class: joinClassNames("nstc-icon-button", this.background && "nstc-icon-button--background"),
+      style: buttonStyle,
+      on: listeners,
+    }, [svg]);
+  },
+};
+module.exports = {
+  Speed: componentDefinition,
+  IconSpeed: componentDefinition,
+  default: componentDefinition,
+};

package/packages/vue-legacy/icons/Speed.d.ts

@@ -0,0 +1,23 @@
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+
+export interface IconComponentInstance {
+  readonly $props: IconProps;
+  readonly el: SVGSVGElement | HTMLButtonElement;
+}
+
+export interface IconComponent {
+  new (...args: readonly unknown[]): IconComponentInstance;
+  name?: string;
+  props?: Record<string, unknown>;
+  render?: (...args: readonly unknown[]) => unknown;
+}
+
+export declare const Speed: IconComponent;
+export declare const IconSpeed: IconComponent;
+export default Speed;

package/packages/vue-legacy/icons/Speed.js

@@ -0,0 +1,63 @@
+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(" ");
+const componentDefinition = {
+  name: "icon-speed",
+  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 },
+  },
+  computed: {
+    el() {
+      return this.$refs.root || this.$el;
+    },
+  },
+  render(h) {
+    const originColor = this.originColor;
+    const renderedSize = this.size === undefined || this.size === null ? 16 : this.size;
+    const buttonSize = this.size === undefined || this.size === null ? 24 : this.size;
+    const attrs = this.$attrs || {};
+    const listeners = this.$listeners || {};
+    const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+    const style = this.color === undefined ? undefined : { color: this.color };
+    const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+    const svg = h("svg", this.button
+      ? {
+          attrs: {
+            ...svgAttributes,
+            width: toButtonIconSize(buttonSize),
+            height: toButtonIconSize(buttonSize),
+            "aria-hidden": "true",
+          },
+        }
+      : {
+          ref: "root",
+          attrs: {
+            ...svgAttributes,
+            ...attrs,
+            width: toSize(renderedSize),
+            height: toSize(renderedSize),
+          },
+          style: style,
+          on: listeners,
+        }, [h("path", { attrs: { "d": "M512 42.667c83.733 0 164.352 21.973 235.243 63.125l36.906 21.419-42.837 73.813-36.907-21.419A382 382 0 0 0 512 128c-212.075 0-384 171.925-384 384s171.925 384 384 384 384-171.925 384-384c0-68.117-17.728-133.547-50.944-191.253l-21.27-36.971 73.963-42.56 21.27 36.97A467.3 467.3 0 0 1 981.333 512c0 259.2-210.133 469.333-469.333 469.333S42.667 771.2 42.667 512 252.8 42.667 512 42.667m198.379 216.042c34.282-12.842 67.754 20.651 54.912 54.934l-4.608 12.117a3435 3435 0 0 1-51.734 127.253c-5.973 13.76-11.776 26.816-17.408 39.04-24.49 53.12-43.904 88.107-61.546 105.728a144.107 144.107 0 0 1-203.776-203.754c17.621-17.643 52.586-37.056 105.728-61.547a1883 1883 0 0 1 39.04-17.43c30.528-13.247 63.146-26.623 95.765-39.487a3474 3474 0 0 1 43.627-16.854M641.344 377.9a2408 2408 0 0 0-36.416 15.445c-13.184 5.717-25.664 11.285-37.29 16.64-43.094 19.84-73.409 36.693-81.089 44.373a58.773 58.773 0 0 0 83.094 83.094c7.68-7.68 24.533-37.974 44.394-81.088 5.355-11.627 10.902-24.107 16.64-37.27a2763 2763 0 0 0 15.424-36.394l3.328-8.128-8.106 3.328z" } })]);
+    if (!this.button) return svg;
+    return h("button", {
+      ref: "root",
+      attrs: {
+        type: attrs.type || "button",
+        ...attrs,
+      },
+      class: joinClassNames("nstc-icon-button", this.background && "nstc-icon-button--background"),
+      style: buttonStyle,
+      on: listeners,
+    }, [svg]);
+  },
+};
+export const Speed = componentDefinition;
+export const IconSpeed = componentDefinition;
+export default Speed;

package/packages/vue-legacy/icons/Spot.cjs

@@ -0,0 +1,66 @@
+"use strict";
+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(" ");
+const componentDefinition = {
+  name: "icon-spot",
+  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 },
+  },
+  computed: {
+    el() {
+      return this.$refs.root || this.$el;
+    },
+  },
+  render(h) {
+    const originColor = this.originColor;
+    const renderedSize = this.size === undefined || this.size === null ? 16 : this.size;
+    const buttonSize = this.size === undefined || this.size === null ? 24 : this.size;
+    const attrs = this.$attrs || {};
+    const listeners = this.$listeners || {};
+    const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+    const style = this.color === undefined ? undefined : { color: this.color };
+    const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+    const svg = h("svg", this.button
+      ? {
+          attrs: {
+            ...svgAttributes,
+            width: toButtonIconSize(buttonSize),
+            height: toButtonIconSize(buttonSize),
+            "aria-hidden": "true",
+          },
+        }
+      : {
+          ref: "root",
+          attrs: {
+            ...svgAttributes,
+            ...attrs,
+            width: toSize(renderedSize),
+            height: toSize(renderedSize),
+          },
+          style: style,
+          on: listeners,
+        }, [h("path", { attrs: { "d": "M512 42.667C771.2 42.667 981.333 252.8 981.333 512c0 32.213-3.264 64.043-9.664 95.125l-83.562-17.216C893.333 564.48 896 538.411 896 512c0-212.053-171.947-384-384-384-212.075 0-384 171.925-384 384s171.925 384 384 384c24.896 0 49.493-2.368 73.557-7.04a380.9 380.9 0 0 0 89.024-28.97l36.182 77.29a466.4 466.4 0 0 1-108.971 35.456A472 472 0 0 1 512 981.333C252.8 981.333 42.667 771.2 42.667 512S252.8 42.667 512 42.667M885.333 640v32H960v64h-74.667v42.667a85.333 85.333 0 0 1 85.227 81.066l.107 4.267a85.333 85.333 0 0 1-85.334 85.333v32h-64v-32h-74.666v-64h74.666v-42.666h-9.088v-.47A85.333 85.333 0 0 1 821.333 672v-32zm0 202.667v42.666a21.333 21.333 0 1 0 0-42.666m-64-106.667a21.333 21.333 0 1 0 0 42.667zm-81.962-406.997v271.744c0 29.098-4.224 46.933-21.59 57.728-16.896 10.794-38.485 11.733-67.114 11.733-1.878-18.304-9.387-46.933-17.835-64.299 12.203.939 27.69.939 32.384.47 5.163 0 7.04-1.408 7.04-7.04V391.424h-40.363v357.163h-68.522V329.003zm-193.366-3.286v239.83H407.083v80.256l46.933-12.203a758 758 0 0 0-18.304-34.261l59.136-29.099c22.997 38.485 52.096 90.112 64.299 124.373l-63.83 33.792c-3.285-10.794-7.978-23.466-14.08-37.077-105.6 31.445-126.72 39.893-141.269 49.75-3.755-20.182-15.019-53.505-25.813-70.4 11.733-5.633 22.997-15.489 22.997-33.793V325.717zm-68.522 148.779h-70.4v30.507h70.4zm0-88.235h-70.4v28.16h70.4z" } })]);
+    if (!this.button) return svg;
+    return h("button", {
+      ref: "root",
+      attrs: {
+        type: attrs.type || "button",
+        ...attrs,
+      },
+      class: joinClassNames("nstc-icon-button", this.background && "nstc-icon-button--background"),
+      style: buttonStyle,
+      on: listeners,
+    }, [svg]);
+  },
+};
+module.exports = {
+  Spot: componentDefinition,
+  IconSpot: componentDefinition,
+  default: componentDefinition,
+};

package/packages/vue-legacy/icons/Spot.d.ts

@@ -0,0 +1,23 @@
+export interface IconProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+  button?: boolean;
+  background?: boolean;
+}
+
+export interface IconComponentInstance {
+  readonly $props: IconProps;
+  readonly el: SVGSVGElement | HTMLButtonElement;
+}
+
+export interface IconComponent {
+  new (...args: readonly unknown[]): IconComponentInstance;
+  name?: string;
+  props?: Record<string, unknown>;
+  render?: (...args: readonly unknown[]) => unknown;
+}
+
+export declare const Spot: IconComponent;
+export declare const IconSpot: IconComponent;
+export default Spot;

package/packages/vue-legacy/icons/Spot.js

@@ -0,0 +1,63 @@
+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(" ");
+const componentDefinition = {
+  name: "icon-spot",
+  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 },
+  },
+  computed: {
+    el() {
+      return this.$refs.root || this.$el;
+    },
+  },
+  render(h) {
+    const originColor = this.originColor;
+    const renderedSize = this.size === undefined || this.size === null ? 16 : this.size;
+    const buttonSize = this.size === undefined || this.size === null ? 24 : this.size;
+    const attrs = this.$attrs || {};
+    const listeners = this.$listeners || {};
+    const svgAttributes = { "fill": originColor ? undefined : "currentColor", "viewBox": "0 0 1024 1024", "xmlns": "http://www.w3.org/2000/svg" };
+    const style = this.color === undefined ? undefined : { color: this.color };
+    const buttonStyle = [style, { width: toSize(buttonSize), height: toSize(buttonSize) }];
+    const svg = h("svg", this.button
+      ? {
+          attrs: {
+            ...svgAttributes,
+            width: toButtonIconSize(buttonSize),
+            height: toButtonIconSize(buttonSize),
+            "aria-hidden": "true",
+          },
+        }
+      : {
+          ref: "root",
+          attrs: {
+            ...svgAttributes,
+            ...attrs,
+            width: toSize(renderedSize),
+            height: toSize(renderedSize),
+          },
+          style: style,
+          on: listeners,
+        }, [h("path", { attrs: { "d": "M512 42.667C771.2 42.667 981.333 252.8 981.333 512c0 32.213-3.264 64.043-9.664 95.125l-83.562-17.216C893.333 564.48 896 538.411 896 512c0-212.053-171.947-384-384-384-212.075 0-384 171.925-384 384s171.925 384 384 384c24.896 0 49.493-2.368 73.557-7.04a380.9 380.9 0 0 0 89.024-28.97l36.182 77.29a466.4 466.4 0 0 1-108.971 35.456A472 472 0 0 1 512 981.333C252.8 981.333 42.667 771.2 42.667 512S252.8 42.667 512 42.667M885.333 640v32H960v64h-74.667v42.667a85.333 85.333 0 0 1 85.227 81.066l.107 4.267a85.333 85.333 0 0 1-85.334 85.333v32h-64v-32h-74.666v-64h74.666v-42.666h-9.088v-.47A85.333 85.333 0 0 1 821.333 672v-32zm0 202.667v42.666a21.333 21.333 0 1 0 0-42.666m-64-106.667a21.333 21.333 0 1 0 0 42.667zm-81.962-406.997v271.744c0 29.098-4.224 46.933-21.59 57.728-16.896 10.794-38.485 11.733-67.114 11.733-1.878-18.304-9.387-46.933-17.835-64.299 12.203.939 27.69.939 32.384.47 5.163 0 7.04-1.408 7.04-7.04V391.424h-40.363v357.163h-68.522V329.003zm-193.366-3.286v239.83H407.083v80.256l46.933-12.203a758 758 0 0 0-18.304-34.261l59.136-29.099c22.997 38.485 52.096 90.112 64.299 124.373l-63.83 33.792c-3.285-10.794-7.978-23.466-14.08-37.077-105.6 31.445-126.72 39.893-141.269 49.75-3.755-20.182-15.019-53.505-25.813-70.4 11.733-5.633 22.997-15.489 22.997-33.793V325.717zm-68.522 148.779h-70.4v30.507h70.4zm0-88.235h-70.4v28.16h70.4z" } })]);
+    if (!this.button) return svg;
+    return h("button", {
+      ref: "root",
+      attrs: {
+        type: attrs.type || "button",
+        ...attrs,
+      },
+      class: joinClassNames("nstc-icon-button", this.background && "nstc-icon-button--background"),
+      style: buttonStyle,
+      on: listeners,
+    }, [svg]);
+  },
+};
+export const Spot = componentDefinition;
+export const IconSpot = componentDefinition;
+export default Spot;