@nstc-design/icons 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,57 @@
+# @nstc-design/icons
+
+Generated Vue 3 and React icon components from the NSTC Design Icons library.
+
+## Installation
+
+~~~bash
+npm install @nstc-design/icons
+pnpm add @nstc-design/icons
+yarn add @nstc-design/icons
+~~~
+
+Install the peer dependency for the framework entry you use: Vue 3 for @nstc-design/icons/vue, or React 19 for @nstc-design/icons/react.
+
+## Vue 3
+
+Register all icons as a Vue plugin:
+
+~~~ts
+import { createApp } from "vue";
+import NstcIcons from "@nstc-design/icons/vue";
+import App from "./App.vue";
+
+createApp(App).use(NstcIcons).mount("#app");
+~~~
+
+~~~vue
+<icon-name :size="24" />
+~~~
+
+You can also import one icon by its generated name (for example, IconAdd):
+
+~~~ts
+import { IconAdd } from "@nstc-design/icons/vue";
+~~~
+
+## React
+
+~~~tsx
+import { IconAdd } from "@nstc-design/icons/react";
+
+export function Example() {
+  return <IconAdd size={24} />;
+}
+~~~
+
+Replace IconAdd with any icon exported by this package.
+
+## Component props
+
+- **size**: number or CSS size string. Defaults to 1em.
+- **color**: CSS color. Defaults to the current text color.
+- **originColor**: use the icon's original colors instead of a single current color.
+- **button**: render the icon as an accessible button. Defaults to false.
+- **background**: show the button hover/active background. Defaults to true when button is enabled.
+
+The Vue and React entry points include the shared icon button styles automatically.

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "@nstc-design/icons",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "exports": {
     "./vue": {
-      "types": "./dist/vue/index.d.ts",
-      "import": "./dist/vue/index.js"
+      "types": "./packages/vue/index.d.ts",
+      "import": "./packages/vue/index.js"
     },
     "./react": {
-      "types": "./dist/react/index.d.ts",
-      "import": "./dist/react/index.js"
+      "types": "./packages/react/index.d.ts",
+      "import": "./packages/react/index.js"
     },
-    "./style.css": "./dist/style.css",
+    "./style.css": "./packages/style.css",
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "packages"
   ],
   "sideEffects": [
-    "./dist/style.css"
+    "./packages/style.css"
   ],
   "peerDependencies": {
     "react": "^19.0.0",

package/packages/react/icons/IconMuteFill.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+export interface IconCommonProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+}
+export type IconSvgProps = IconCommonProps & { button?: false; background?: never } & React.SVGProps<SVGSVGElement>;
+export type IconButtonProps = IconCommonProps & { button: true; background?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const IconMuteFill: {
+  (props: IconSvgProps & React.RefAttributes<SVGSVGElement>): React.ReactElement | null;
+  (props: IconButtonProps & React.RefAttributes<HTMLButtonElement>): React.ReactElement | null;
+};

package/packages/react/icons/IconMuteFill.js

@@ -0,0 +1,37 @@
+import { createElement, forwardRef } from "react";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const IconMuteFill = forwardRef(function IconMuteFill(props, ref) {
+  const {
+    size = "1em",
+    color,
+    originColor = false,
+    button = false,
+    background = true,
+    className,
+    style,
+    ...attributes
+  } = props;
+  const svgAttributes = { "fill": "none", "stroke": originColor ? "currentColor" : "currentColor", "strokeWidth": "4", "viewBox": "0 0 48 48", "xmlns": "http://www.w3.org/2000/svg" };
+  const svgStyle = color === undefined ? style : { color, ...style };
+  const svg = createElement(
+    "svg",
+    button
+      ? { ...svgAttributes, width: toSize(size), height: toSize(size), "aria-hidden": true }
+      : { ...attributes, ...svgAttributes, ref, width: toSize(size), height: toSize(size), className, style: svgStyle },
+    createElement("path", { "d": "M5.931 13.001A2 2 0 0 0 4 15v18a2 2 0 0 0 2 2h7.37l9.483 6.639A2 2 0 0 0 26 40v-6.93zM35.27 28.199l-3.311-3.312a7.99 7.99 0 0 0-1.96-6.108.525.525 0 0 1 .011-.718l2.122-2.122a.485.485 0 0 1 .7.008c3.125 3.393 3.938 8.15 2.439 12.252M41.13 34.059l-2.936-2.937c3.07-5.89 2.226-13.288-2.531-18.348a.513.513 0 0 1 .004-.713l2.122-2.122a.49.49 0 0 1 .703.006c6.322 6.64 7.202 16.56 2.639 24.114M26 18.928l-8.688-8.688 5.541-3.878A2 2 0 0 1 26 8z", "fill": originColor ? "currentColor" : "currentColor", "stroke": "none" }), createElement("path", { "clipRule": "evenodd", "d": "m7.012 4.184 35.272 35.272-2.828 2.828L4.184 7.012z", "fill": originColor ? "currentColor" : "currentColor", "fillRule": "evenodd", "stroke": "none" }),
+  );
+  if (!button) return svg;
+  return createElement(
+    "button",
+    {
+      ...attributes,
+      ref,
+      type: attributes.type ?? "button",
+      className: joinClassNames("nstc-icon-button", background && "nstc-icon-button--background", className),
+      style: svgStyle,
+    },
+    svg,
+  );
+});

package/packages/react/icons/IconPauseCircleFill.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+export interface IconCommonProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+}
+export type IconSvgProps = IconCommonProps & { button?: false; background?: never } & React.SVGProps<SVGSVGElement>;
+export type IconButtonProps = IconCommonProps & { button: true; background?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const IconPauseCircleFill: {
+  (props: IconSvgProps & React.RefAttributes<SVGSVGElement>): React.ReactElement | null;
+  (props: IconButtonProps & React.RefAttributes<HTMLButtonElement>): React.ReactElement | null;
+};

package/packages/react/icons/IconPauseCircleFill.js

@@ -0,0 +1,37 @@
+import { createElement, forwardRef } from "react";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const IconPauseCircleFill = forwardRef(function IconPauseCircleFill(props, ref) {
+  const {
+    size = "1em",
+    color,
+    originColor = false,
+    button = false,
+    background = true,
+    className,
+    style,
+    ...attributes
+  } = props;
+  const svgAttributes = { "fill": "none", "stroke": originColor ? "currentColor" : "currentColor", "strokeWidth": "4", "viewBox": "0 0 48 48", "xmlns": "http://www.w3.org/2000/svg" };
+  const svgStyle = color === undefined ? style : { color, ...style };
+  const svg = createElement(
+    "svg",
+    button
+      ? { ...svgAttributes, width: toSize(size), height: toSize(size), "aria-hidden": true }
+      : { ...attributes, ...svgAttributes, ref, width: toSize(size), height: toSize(size), className, style: svgStyle },
+    createElement("path", { "clipRule": "evenodd", "d": "M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20m-6-27a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V18a1 1 0 0 0-1-1zm9 0a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V18a1 1 0 0 0-1-1z", "fill": originColor ? "currentColor" : "currentColor", "fillRule": "evenodd", "stroke": "none" }),
+  );
+  if (!button) return svg;
+  return createElement(
+    "button",
+    {
+      ...attributes,
+      ref,
+      type: attributes.type ?? "button",
+      className: joinClassNames("nstc-icon-button", background && "nstc-icon-button--background", className),
+      style: svgStyle,
+    },
+    svg,
+  );
+});

package/packages/react/icons/IconPlayArrowFill.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+export interface IconCommonProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+}
+export type IconSvgProps = IconCommonProps & { button?: false; background?: never } & React.SVGProps<SVGSVGElement>;
+export type IconButtonProps = IconCommonProps & { button: true; background?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const IconPlayArrowFill: {
+  (props: IconSvgProps & React.RefAttributes<SVGSVGElement>): React.ReactElement | null;
+  (props: IconButtonProps & React.RefAttributes<HTMLButtonElement>): React.ReactElement | null;
+};

package/packages/react/icons/IconPlayArrowFill.js

@@ -0,0 +1,37 @@
+import { createElement, forwardRef } from "react";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const IconPlayArrowFill = forwardRef(function IconPlayArrowFill(props, ref) {
+  const {
+    size = "1em",
+    color,
+    originColor = false,
+    button = false,
+    background = true,
+    className,
+    style,
+    ...attributes
+  } = props;
+  const svgAttributes = { "fill": "none", "stroke": originColor ? "currentColor" : "currentColor", "strokeWidth": "4", "viewBox": "0 0 48 48", "xmlns": "http://www.w3.org/2000/svg" };
+  const svgStyle = color === undefined ? style : { color, ...style };
+  const svg = createElement(
+    "svg",
+    button
+      ? { ...svgAttributes, width: toSize(size), height: toSize(size), "aria-hidden": true }
+      : { ...attributes, ...svgAttributes, ref, width: toSize(size), height: toSize(size), className, style: svgStyle },
+    createElement("path", { "d": "M17.533 10.974a1 1 0 0 0-1.537.844v24.356a1 1 0 0 0 1.537.844L36.67 24.84a1 1 0 0 0 0-1.688z", "fill": originColor ? "currentColor" : "currentColor", "stroke": "none" }),
+  );
+  if (!button) return svg;
+  return createElement(
+    "button",
+    {
+      ...attributes,
+      ref,
+      type: attributes.type ?? "button",
+      className: joinClassNames("nstc-icon-button", background && "nstc-icon-button--background", className),
+      style: svgStyle,
+    },
+    svg,
+  );
+});

package/packages/react/icons/IconPlayCircleFill.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+export interface IconCommonProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+}
+export type IconSvgProps = IconCommonProps & { button?: false; background?: never } & React.SVGProps<SVGSVGElement>;
+export type IconButtonProps = IconCommonProps & { button: true; background?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const IconPlayCircleFill: {
+  (props: IconSvgProps & React.RefAttributes<SVGSVGElement>): React.ReactElement | null;
+  (props: IconButtonProps & React.RefAttributes<HTMLButtonElement>): React.ReactElement | null;
+};

package/packages/react/icons/IconPlayCircleFill.js

@@ -0,0 +1,37 @@
+import { createElement, forwardRef } from "react";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const IconPlayCircleFill = forwardRef(function IconPlayCircleFill(props, ref) {
+  const {
+    size = "1em",
+    color,
+    originColor = false,
+    button = false,
+    background = true,
+    className,
+    style,
+    ...attributes
+  } = props;
+  const svgAttributes = { "fill": "none", "stroke": originColor ? "currentColor" : "currentColor", "strokeWidth": "4", "viewBox": "0 0 48 48", "xmlns": "http://www.w3.org/2000/svg" };
+  const svgStyle = color === undefined ? style : { color, ...style };
+  const svg = createElement(
+    "svg",
+    button
+      ? { ...svgAttributes, width: toSize(size), height: toSize(size), "aria-hidden": true }
+      : { ...attributes, ...svgAttributes, ref, width: toSize(size), height: toSize(size), className, style: svgStyle },
+    createElement("path", { "clipRule": "evenodd", "d": "M44 24c0 11.046-8.954 20-20 20S4 35.046 4 24 12.954 4 24 4s20 8.954 20 20m-23.662-7.783C19.302 15.605 18 16.36 18 17.575v12.85c0 1.214 1.302 1.97 2.338 1.358l10.89-6.425c1.03-.607 1.03-2.11 0-2.716z", "fill": originColor ? "currentColor" : "currentColor", "fillRule": "evenodd", "stroke": "none" }),
+  );
+  if (!button) return svg;
+  return createElement(
+    "button",
+    {
+      ...attributes,
+      ref,
+      type: attributes.type ?? "button",
+      className: joinClassNames("nstc-icon-button", background && "nstc-icon-button--background", className),
+      style: svgStyle,
+    },
+    svg,
+  );
+});

package/packages/react/icons/IconSkipNextFill.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+export interface IconCommonProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+}
+export type IconSvgProps = IconCommonProps & { button?: false; background?: never } & React.SVGProps<SVGSVGElement>;
+export type IconButtonProps = IconCommonProps & { button: true; background?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const IconSkipNextFill: {
+  (props: IconSvgProps & React.RefAttributes<SVGSVGElement>): React.ReactElement | null;
+  (props: IconButtonProps & React.RefAttributes<HTMLButtonElement>): React.ReactElement | null;
+};

package/packages/react/icons/IconSkipNextFill.js

@@ -0,0 +1,37 @@
+import { createElement, forwardRef } from "react";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const IconSkipNextFill = forwardRef(function IconSkipNextFill(props, ref) {
+  const {
+    size = "1em",
+    color,
+    originColor = false,
+    button = false,
+    background = true,
+    className,
+    style,
+    ...attributes
+  } = props;
+  const svgAttributes = { "fill": "none", "stroke": originColor ? "currentColor" : "currentColor", "strokeWidth": "4", "viewBox": "0 0 48 48", "xmlns": "http://www.w3.org/2000/svg" };
+  const svgStyle = color === undefined ? style : { color, ...style };
+  const svg = createElement(
+    "svg",
+    button
+      ? { ...svgAttributes, width: toSize(size), height: toSize(size), "aria-hidden": true }
+      : { ...attributes, ...svgAttributes, ref, width: toSize(size), height: toSize(size), className, style: svgStyle },
+    createElement("path", { "d": "M13.586 12.145a1 1 0 0 0-1.586.81v22.09a1 1 0 0 0 1.585.81L28.879 24.81a1 1 0 0 0 0-1.622z", "fill": originColor ? "currentColor" : "currentColor", "stroke": "none" }), createElement("path", { "clipRule": "evenodd", "d": "M33 36a1 1 0 0 1-1-1V13a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v22a1 1 0 0 1-1 1z", "fill": originColor ? "currentColor" : "currentColor", "fillRule": "evenodd", "stroke": "none" }),
+  );
+  if (!button) return svg;
+  return createElement(
+    "button",
+    {
+      ...attributes,
+      ref,
+      type: attributes.type ?? "button",
+      className: joinClassNames("nstc-icon-button", background && "nstc-icon-button--background", className),
+      style: svgStyle,
+    },
+    svg,
+  );
+});

package/packages/react/icons/IconSkipPreviousFill.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+export interface IconCommonProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+}
+export type IconSvgProps = IconCommonProps & { button?: false; background?: never } & React.SVGProps<SVGSVGElement>;
+export type IconButtonProps = IconCommonProps & { button: true; background?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const IconSkipPreviousFill: {
+  (props: IconSvgProps & React.RefAttributes<SVGSVGElement>): React.ReactElement | null;
+  (props: IconButtonProps & React.RefAttributes<HTMLButtonElement>): React.ReactElement | null;
+};

package/packages/react/icons/IconSkipPreviousFill.js

@@ -0,0 +1,37 @@
+import { createElement, forwardRef } from "react";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const IconSkipPreviousFill = forwardRef(function IconSkipPreviousFill(props, ref) {
+  const {
+    size = "1em",
+    color,
+    originColor = false,
+    button = false,
+    background = true,
+    className,
+    style,
+    ...attributes
+  } = props;
+  const svgAttributes = { "fill": "none", "stroke": originColor ? "currentColor" : "currentColor", "strokeWidth": "4", "viewBox": "0 0 48 48", "xmlns": "http://www.w3.org/2000/svg" };
+  const svgStyle = color === undefined ? style : { color, ...style };
+  const svg = createElement(
+    "svg",
+    button
+      ? { ...svgAttributes, width: toSize(size), height: toSize(size), "aria-hidden": true }
+      : { ...attributes, ...svgAttributes, ref, width: toSize(size), height: toSize(size), className, style: svgStyle },
+    createElement("path", { "d": "M34.415 35.855a1 1 0 0 0 1.585-.81v-22.09a1 1 0 0 0-1.586-.81L19.122 23.19a1 1 0 0 0 0 1.622z", "fill": originColor ? "currentColor" : "currentColor", "stroke": "none" }), createElement("path", { "clipRule": "evenodd", "d": "M15 12a1 1 0 0 1 1 1v22a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V13a1 1 0 0 1 1-1z", "fill": originColor ? "currentColor" : "currentColor", "fillRule": "evenodd", "stroke": "none" }),
+  );
+  if (!button) return svg;
+  return createElement(
+    "button",
+    {
+      ...attributes,
+      ref,
+      type: attributes.type ?? "button",
+      className: joinClassNames("nstc-icon-button", background && "nstc-icon-button--background", className),
+      style: svgStyle,
+    },
+    svg,
+  );
+});

package/packages/react/icons/IconSoundFill.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+export interface IconCommonProps {
+  size?: number | string;
+  color?: string;
+  originColor?: boolean;
+}
+export type IconSvgProps = IconCommonProps & { button?: false; background?: never } & React.SVGProps<SVGSVGElement>;
+export type IconButtonProps = IconCommonProps & { button: true; background?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const IconSoundFill: {
+  (props: IconSvgProps & React.RefAttributes<SVGSVGElement>): React.ReactElement | null;
+  (props: IconButtonProps & React.RefAttributes<HTMLButtonElement>): React.ReactElement | null;
+};

package/packages/react/icons/IconSoundFill.js

@@ -0,0 +1,37 @@
+import { createElement, forwardRef } from "react";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const IconSoundFill = forwardRef(function IconSoundFill(props, ref) {
+  const {
+    size = "1em",
+    color,
+    originColor = false,
+    button = false,
+    background = true,
+    className,
+    style,
+    ...attributes
+  } = props;
+  const svgAttributes = { "fill": "none", "stroke": originColor ? "currentColor" : "currentColor", "strokeWidth": "4", "viewBox": "0 0 48 48", "xmlns": "http://www.w3.org/2000/svg" };
+  const svgStyle = color === undefined ? style : { color, ...style };
+  const svg = createElement(
+    "svg",
+    button
+      ? { ...svgAttributes, width: toSize(size), height: toSize(size), "aria-hidden": true }
+      : { ...attributes, ...svgAttributes, ref, width: toSize(size), height: toSize(size), className, style: svgStyle },
+    createElement("path", { "d": "m14 15 10-7v32l-10-7H6V15z", "fill": originColor ? "currentColor" : "currentColor", "stroke": "none" }), createElement("path", { "d": "M24.924 6.226A2 2 0 0 1 26 8v32a2 2 0 0 1-3.147 1.639L13.37 35H6a2 2 0 0 1-2-2V15a2 2 0 0 1 2-2h7.37l9.483-6.638a2 2 0 0 1 2.07-.136M35.314 35.042c6.248-6.249 6.248-16.38 0-22.628l2.828-2.828c7.81 7.81 7.81 20.474 0 28.284z", "fill": originColor ? "currentColor" : "currentColor", "stroke": "none" }), createElement("path", { "d": "M29.657 29.728a8 8 0 0 0 0-11.314l2.828-2.828c4.687 4.686 4.687 12.284 0 16.97z", "fill": originColor ? "currentColor" : "currentColor", "stroke": "none" }),
+  );
+  if (!button) return svg;
+  return createElement(
+    "button",
+    {
+      ...attributes,
+      ref,
+      type: attributes.type ?? "button",
+      className: joinClassNames("nstc-icon-button", background && "nstc-icon-button--background", className),
+      style: svgStyle,
+    },
+    svg,
+  );
+});

package/{dist → packages}/react/index.d.ts

@@ -28,11 +28,18 @@ export { IconInfoCircle } from "./icons/IconInfoCircle.js";
 export { IconLarkColor } from "./icons/IconLarkColor.js";
 export { IconMinus } from "./icons/IconMinus.js";
 export { IconMinusCircle } from "./icons/IconMinusCircle.js";
+export { IconMuteFill } from "./icons/IconMuteFill.js";
+export { IconPauseCircleFill } from "./icons/IconPauseCircleFill.js";
+export { IconPlayArrowFill } from "./icons/IconPlayArrowFill.js";
+export { IconPlayCircleFill } from "./icons/IconPlayCircleFill.js";
 export { IconPlus } from "./icons/IconPlus.js";
 export { IconPlusCircle } from "./icons/IconPlusCircle.js";
 export { IconQqCircleFill } from "./icons/IconQqCircleFill.js";
 export { IconQuestion } from "./icons/IconQuestion.js";
 export { IconQuestionCircle } from "./icons/IconQuestionCircle.js";
+export { IconSkipNextFill } from "./icons/IconSkipNextFill.js";
+export { IconSkipPreviousFill } from "./icons/IconSkipPreviousFill.js";
+export { IconSoundFill } from "./icons/IconSoundFill.js";
 export { IconStop } from "./icons/IconStop.js";
 export { IconTiktokColor } from "./icons/IconTiktokColor.js";
 export { IconTwitterCircleFill } from "./icons/IconTwitterCircleFill.js";

package/{dist → packages}/react/index.js

@@ -29,11 +29,18 @@ export { IconInfoCircle } from "./icons/IconInfoCircle.js";
 export { IconLarkColor } from "./icons/IconLarkColor.js";
 export { IconMinus } from "./icons/IconMinus.js";
 export { IconMinusCircle } from "./icons/IconMinusCircle.js";
+export { IconMuteFill } from "./icons/IconMuteFill.js";
+export { IconPauseCircleFill } from "./icons/IconPauseCircleFill.js";
+export { IconPlayArrowFill } from "./icons/IconPlayArrowFill.js";
+export { IconPlayCircleFill } from "./icons/IconPlayCircleFill.js";
 export { IconPlus } from "./icons/IconPlus.js";
 export { IconPlusCircle } from "./icons/IconPlusCircle.js";
 export { IconQqCircleFill } from "./icons/IconQqCircleFill.js";
 export { IconQuestion } from "./icons/IconQuestion.js";
 export { IconQuestionCircle } from "./icons/IconQuestionCircle.js";
+export { IconSkipNextFill } from "./icons/IconSkipNextFill.js";
+export { IconSkipPreviousFill } from "./icons/IconSkipPreviousFill.js";
+export { IconSoundFill } from "./icons/IconSoundFill.js";
 export { IconStop } from "./icons/IconStop.js";
 export { IconTiktokColor } from "./icons/IconTiktokColor.js";
 export { IconTwitterCircleFill } from "./icons/IconTwitterCircleFill.js";

package/packages/vue/icons/IconMuteFill.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 IconMuteFill: DefineComponent<IconProps>;

package/packages/vue/icons/IconMuteFill.js

@@ -0,0 +1,35 @@
+import { defineComponent, h, ref } from "vue";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const IconMuteFill = defineComponent({
+  name: "IconMuteFill",
+  inheritAttrs: false,
+  props: {
+    size: { type: [String, Number], default: "1em" },
+    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 svgAttributes = { "fill": "none", "stroke": originColor ? "currentColor" : "currentColor", "stroke-width": "4", "viewBox": "0 0 48 48", "xmlns": "http://www.w3.org/2000/svg" };
+      const style = props.color === undefined ? attrs.style : [{ color: props.color }, attrs.style];
+      const svg = h("svg", props.button
+        ? { ...svgAttributes, width: toSize(props.size), height: toSize(props.size), "aria-hidden": true }
+        : { ...attrs, ...svgAttributes, ref: root, width: toSize(props.size), height: toSize(props.size), style }, [h("path", { "d": "M5.931 13.001A2 2 0 0 0 4 15v18a2 2 0 0 0 2 2h7.37l9.483 6.639A2 2 0 0 0 26 40v-6.93zM35.27 28.199l-3.311-3.312a7.99 7.99 0 0 0-1.96-6.108.525.525 0 0 1 .011-.718l2.122-2.122a.485.485 0 0 1 .7.008c3.125 3.393 3.938 8.15 2.439 12.252M41.13 34.059l-2.936-2.937c3.07-5.89 2.226-13.288-2.531-18.348a.513.513 0 0 1 .004-.713l2.122-2.122a.49.49 0 0 1 .703.006c6.322 6.64 7.202 16.56 2.639 24.114M26 18.928l-8.688-8.688 5.541-3.878A2 2 0 0 1 26 8z", "fill": originColor ? "currentColor" : "currentColor", "stroke": "none" }), h("path", { "clip-rule": "evenodd", "d": "m7.012 4.184 35.272 35.272-2.828 2.828L4.184 7.012z", "fill": originColor ? "currentColor" : "currentColor", "fill-rule": "evenodd", "stroke": "none" })]);
+      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,
+      }, [svg]);
+    };
+  },
+});

package/packages/vue/icons/IconPauseCircleFill.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 IconPauseCircleFill: DefineComponent<IconProps>;

package/packages/vue/icons/IconPauseCircleFill.js

@@ -0,0 +1,35 @@
+import { defineComponent, h, ref } from "vue";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const IconPauseCircleFill = defineComponent({
+  name: "IconPauseCircleFill",
+  inheritAttrs: false,
+  props: {
+    size: { type: [String, Number], default: "1em" },
+    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 svgAttributes = { "fill": "none", "stroke": originColor ? "currentColor" : "currentColor", "stroke-width": "4", "viewBox": "0 0 48 48", "xmlns": "http://www.w3.org/2000/svg" };
+      const style = props.color === undefined ? attrs.style : [{ color: props.color }, attrs.style];
+      const svg = h("svg", props.button
+        ? { ...svgAttributes, width: toSize(props.size), height: toSize(props.size), "aria-hidden": true }
+        : { ...attrs, ...svgAttributes, ref: root, width: toSize(props.size), height: toSize(props.size), style }, [h("path", { "clip-rule": "evenodd", "d": "M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20m-6-27a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V18a1 1 0 0 0-1-1zm9 0a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V18a1 1 0 0 0-1-1z", "fill": originColor ? "currentColor" : "currentColor", "fill-rule": "evenodd", "stroke": "none" })]);
+      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,
+      }, [svg]);
+    };
+  },
+});

package/packages/vue/icons/IconPlayArrowFill.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 IconPlayArrowFill: DefineComponent<IconProps>;

package/packages/vue/icons/IconPlayArrowFill.js

@@ -0,0 +1,35 @@
+import { defineComponent, h, ref } from "vue";
+
+const toSize = (size) => typeof size === "number" ? `${size}px` : size;
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+export const IconPlayArrowFill = defineComponent({
+  name: "IconPlayArrowFill",
+  inheritAttrs: false,
+  props: {
+    size: { type: [String, Number], default: "1em" },
+    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 svgAttributes = { "fill": "none", "stroke": originColor ? "currentColor" : "currentColor", "stroke-width": "4", "viewBox": "0 0 48 48", "xmlns": "http://www.w3.org/2000/svg" };
+      const style = props.color === undefined ? attrs.style : [{ color: props.color }, attrs.style];
+      const svg = h("svg", props.button
+        ? { ...svgAttributes, width: toSize(props.size), height: toSize(props.size), "aria-hidden": true }
+        : { ...attrs, ...svgAttributes, ref: root, width: toSize(props.size), height: toSize(props.size), style }, [h("path", { "d": "M17.533 10.974a1 1 0 0 0-1.537.844v24.356a1 1 0 0 0 1.537.844L36.67 24.84a1 1 0 0 0 0-1.688z", "fill": originColor ? "currentColor" : "currentColor", "stroke": "none" })]);
+      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,
+      }, [svg]);
+    };
+  },
+});