Feat(icon): image, play_circle, pause_circle, keep, error

.changeset/serious-pears-film.md

@@ -0,0 +1,8 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+"@wizleap-inc/wiz-ui-constants": minor
+"@wizleap-inc/wiz-ui-icons": minor
+---
+
+Feat(icon): add image, play_circle, pause_circle icons, keep

packages/constants/component/icon-name.ts

@@ -78,10 +78,12 @@ export const IconComponentName = {
   IHistory: "WizIHistory",
   IHome: "WizIHome",
   IHourglassTop: "WizIHourglassTop",
+  IImage: "WizIImage",
   IInboxCustomize: "WizIInboxCustomize",
   IInfoBold: "WizIInfoBold",
   IInfoFilled: "WizIInfoFilled",
   IInfo: "WizIInfo",
+  IKeep: "WizIKeep",
   ILinkOff: "WizILinkOff",
   ILocationCity: "WizILocationCity",
   ILocationOn: "WizILocationOn",
@@ -95,9 +97,11 @@ export const IconComponentName = {
   INoteAdd: "WizINoteAdd",
   INotification: "WizINotification",
   IOpenInNew: "WizIOpenInNew",
+  IPauseCircle: "WizIPauseCircle",
   IPersonFilled: "WizIPersonFilled",
   IPieChart: "WizIPieChart",
   IPinDrop: "WizIPinDrop",
+  IPlayCircle: "WizIPlayCircle",
   IPublic: "WizIPublic",
   IRemoveBold: "WizIRemoveBold",
   IRemove: "WizIRemove",

packages/wiz-ui-next/src/components/icons/image.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="1em"
+    viewBox="0 -960 960 960"
+    width="1em"
+  >
+    <path
+      d="M224.62-160q-27.62 0-46.12-18.5Q160-197 160-224.62v-510.76q0-27.62 18.5-46.12Q197-800 224.62-800h510.76q27.62 0 46.12 18.5Q800-763 800-735.38v510.76q0 27.62-18.5 46.12Q763-160 735.38-160H224.62Zm0-40h510.76q9.24 0 16.93-7.69 7.69-7.69 7.69-16.93v-510.76q0-9.24-7.69-16.93-7.69-7.69-16.93-7.69H224.62q-9.24 0-16.93 7.69-7.69 7.69-7.69 16.93v510.76q0 9.24 7.69 16.93 7.69 7.69 16.93 7.69ZM200-200v-560 560Zm132.31-100h301.54q9.69 0 14.15-8.69 4.46-8.69-1.23-17.16L566-434.38q-5.23-6.47-12.92-6.47-7.7 0-12.93 6.47l-91.69 115.92-57.08-69q-5.23-5.69-12.53-5.69-7.31 0-12.54 6.46l-46.16 60.84q-6.46 8.47-2 17.16 4.47 8.69 14.16 8.69Z"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { ComponentName } from "@wizleap-inc/wiz-ui-constants";
+
+defineOptions({
+  name: ComponentName.IImage,
+});
+</script>

packages/wiz-ui-next/src/components/icons/index.ts

@@ -77,10 +77,12 @@ import { default as WizIHelp } from "./help.vue";
 import { default as WizIHistory } from "./history.vue";
 import { default as WizIHome } from "./home.vue";
 import { default as WizIHourglassTop } from "./hourglass-top.vue";
+import { default as WizIImage } from "./image.vue";
 import { default as WizIInboxCustomize } from "./inbox-customize.vue";
 import { default as WizIInfoBold } from "./info-bold.vue";
 import { default as WizIInfoFilled } from "./info-filled.vue";
 import { default as WizIInfo } from "./info.vue";
+import { default as WizIKeep } from "./keep.vue";
 import { default as WizILinkOff } from "./link-off.vue";
 import { default as WizILocationCity } from "./location-city.vue";
 import { default as WizILocationOn } from "./location-on.vue";
@@ -94,9 +96,11 @@ import { default as WizIMoreVert } from "./more-vert.vue";
 import { default as WizINoteAdd } from "./note-add.vue";
 import { default as WizINotification } from "./notification.vue";
 import { default as WizIOpenInNew } from "./open-in-new.vue";
+import { default as WizIPauseCircle } from "./pause-circle.vue";
 import { default as WizIPersonFilled } from "./person-filled.vue";
 import { default as WizIPieChart } from "./pie-chart.vue";
 import { default as WizIPinDrop } from "./pin-drop.vue";
+import { default as WizIPlayCircle } from "./play-circle.vue";
 import { default as WizIPublic } from "./public.vue";
 import { default as WizIRemoveBold } from "./remove-bold.vue";
 import { default as WizIRemove } from "./remove.vue";
@@ -197,10 +201,12 @@ export type TIcon =
   | typeof WizIHistory
   | typeof WizIHome
   | typeof WizIHourglassTop
+  | typeof WizIImage
   | typeof WizIInboxCustomize
   | typeof WizIInfoBold
   | typeof WizIInfoFilled
   | typeof WizIInfo
+  | typeof WizIKeep
   | typeof WizILinkOff
   | typeof WizILocationCity
   | typeof WizILocationOn
@@ -214,9 +220,11 @@ export type TIcon =
   | typeof WizINoteAdd
   | typeof WizINotification
   | typeof WizIOpenInNew
+  | typeof WizIPauseCircle
   | typeof WizIPersonFilled
   | typeof WizIPieChart
   | typeof WizIPinDrop
+  | typeof WizIPlayCircle
   | typeof WizIPublic
   | typeof WizIRemoveBold
   | typeof WizIRemove
@@ -317,10 +325,12 @@ export {
   WizIHistory,
   WizIHome,
   WizIHourglassTop,
+  WizIImage,
   WizIInboxCustomize,
   WizIInfoBold,
   WizIInfoFilled,
   WizIInfo,
+  WizIKeep,
   WizILinkOff,
   WizILocationCity,
   WizILocationOn,
@@ -334,9 +344,11 @@ export {
   WizINoteAdd,
   WizINotification,
   WizIOpenInNew,
+  WizIPauseCircle,
   WizIPersonFilled,
   WizIPieChart,
   WizIPinDrop,
+  WizIPlayCircle,
   WizIPublic,
   WizIRemoveBold,
   WizIRemove,

packages/wiz-ui-next/src/components/icons/keep.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="1em"
+    viewBox="0 -960 960 960"
+    width="1em"
+  >
+    <path
+      d="M600-760v296.92l57.23 57.23q2.92 2.93 4.39 6.58 1.46 3.65 1.46 7.55v11.21q0 8.28-5.97 14.39-5.98 6.12-14.8 6.12H500v197.08q0 8.5-5.76 14.25t-14.27 5.75q-8.51 0-14.24-5.75T460-162.92V-360H317.69q-8.82 0-14.8-6.12-5.97-6.11-5.97-14.39v-11.21q0-3.9 1.46-7.55 1.47-3.65 4.39-6.58L360-463.08V-760h-20q-8.5 0-14.25-5.76T320-780.03q0-8.51 5.75-14.24T340-800h280q8.5 0 14.25 5.76t5.75 14.27q0 8.51-5.75 14.24T620-760h-20ZM354-400h252l-46-46v-314H400v314l-46 46Zm126 0Z"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { ComponentName } from "@wizleap-inc/wiz-ui-constants";
+
+defineOptions({
+  name: ComponentName.IKeep,
+});
+</script>

packages/wiz-ui-next/src/components/icons/pause-circle.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="1em"
+    viewBox="0 -960 960 960"
+    width="1em"
+  >
+    <path
+      d="M412.33-340q8.52 0 14.25-5.75t5.73-14.25v-240q0-8.5-5.76-14.25T412.28-620q-8.51 0-14.24 5.75T392.31-600v240q0 8.5 5.76 14.25 5.75 5.75 14.26 5.75Zm135.39 0q8.51 0 14.24-5.75t5.73-14.25v-240q0-8.5-5.76-14.25-5.75-5.75-14.26-5.75-8.52 0-14.25 5.75T527.69-600v240q0 8.5 5.76 14.25t14.27 5.75Zm-67.59 220q-74.67 0-140.41-28.34-65.73-28.34-114.36-76.92-48.63-48.58-76.99-114.26Q120-405.19 120-479.87q0-74.67 28.34-140.41 28.34-65.73 76.92-114.36 48.58-48.63 114.26-76.99Q405.19-840 479.87-840q74.67 0 140.41 28.34 65.73 28.34 114.36 76.92 48.63 48.58 76.99 114.26Q840-554.81 840-480.13q0 74.67-28.34 140.41-28.34 65.73-76.92 114.36-48.58 48.63-114.26 76.99Q554.81-120 480.13-120Zm-.13-40q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { ComponentName } from "@wizleap-inc/wiz-ui-constants";
+
+defineOptions({
+  name: ComponentName.IPauseCircle,
+});
+</script>

packages/wiz-ui-next/src/components/icons/play-circle.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="1em"
+    viewBox="0 -960 960 960"
+    width="1em"
+  >
+    <path
+      d="M437.54-360.77 591-459.62q11.69-7.31 11.69-20.3 0-13-11.69-20.46l-153.46-98.85q-11.92-8.46-24.73-1.46Q400-593.68 400-578.85v197.7q0 14.83 12.81 21.84 12.81 7 24.73-1.46ZM480.13-120q-74.67 0-140.41-28.34-65.73-28.34-114.36-76.92-48.63-48.58-76.99-114.26Q120-405.19 120-479.87q0-74.67 28.34-140.41 28.34-65.73 76.92-114.36 48.58-48.63 114.26-76.99Q405.19-840 479.87-840q74.67 0 140.41 28.34 65.73 28.34 114.36 76.92 48.63 48.58 76.99 114.26Q840-554.81 840-480.13q0 74.67-28.34 140.41-28.34 65.73-76.92 114.36-48.58 48.63-114.26 76.99Q554.81-120 480.13-120Zm-.13-40q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { ComponentName } from "@wizleap-inc/wiz-ui-constants";
+
+defineOptions({
+  name: ComponentName.IPlayCircle,
+});
+</script>

packages/wiz-ui-react/src/components/icons/image.tsx

@@ -0,0 +1,18 @@
+import { CSSProperties } from "react";
+type Props = {
+  className?: string;
+  style?: CSSProperties;
+};
+export const WizIImage = ({ className, style }: Props) => (
+  <svg
+    className={className}
+    style={style}
+    xmlns="http://www.w3.org/2000/svg"
+    height="1em"
+    viewBox="0 -960 960 960"
+    width="1em"
+  >
+    <path d="M224.62-160q-27.62 0-46.12-18.5Q160-197 160-224.62v-510.76q0-27.62 18.5-46.12Q197-800 224.62-800h510.76q27.62 0 46.12 18.5Q800-763 800-735.38v510.76q0 27.62-18.5 46.12Q763-160 735.38-160H224.62Zm0-40h510.76q9.24 0 16.93-7.69 7.69-7.69 7.69-16.93v-510.76q0-9.24-7.69-16.93-7.69-7.69-16.93-7.69H224.62q-9.24 0-16.93 7.69-7.69 7.69-7.69 16.93v510.76q0 9.24 7.69 16.93 7.69 7.69 16.93 7.69ZM200-200v-560 560Zm132.31-100h301.54q9.69 0 14.15-8.69 4.46-8.69-1.23-17.16L566-434.38q-5.23-6.47-12.92-6.47-7.7 0-12.93 6.47l-91.69 115.92-57.08-69q-5.23-5.69-12.53-5.69-7.31 0-12.54 6.46l-46.16 60.84q-6.46 8.47-2 17.16 4.47 8.69 14.16 8.69Z" />
+  </svg>
+);
+WizIImage.displayName = "WizIImage";

packages/wiz-ui-react/src/components/icons/index.ts

@@ -77,10 +77,12 @@ import { WizIHelp } from "./help";
 import { WizIHistory } from "./history";
 import { WizIHome } from "./home";
 import { WizIHourglassTop } from "./hourglass-top";
+import { WizIImage } from "./image";
 import { WizIInboxCustomize } from "./inbox-customize";
 import { WizIInfo } from "./info";
 import { WizIInfoBold } from "./info-bold";
 import { WizIInfoFilled } from "./info-filled";
+import { WizIKeep } from "./keep";
 import { WizILinkOff } from "./link-off";
 import { WizILocationCity } from "./location-city";
 import { WizILocationOn } from "./location-on";
@@ -94,9 +96,11 @@ import { WizIMoreVert } from "./more-vert";
 import { WizINoteAdd } from "./note-add";
 import { WizINotification } from "./notification";
 import { WizIOpenInNew } from "./open-in-new";
+import { WizIPauseCircle } from "./pause-circle";
 import { WizIPersonFilled } from "./person-filled";
 import { WizIPieChart } from "./pie-chart";
 import { WizIPinDrop } from "./pin-drop";
+import { WizIPlayCircle } from "./play-circle";
 import { WizIPublic } from "./public";
 import { WizIRemove } from "./remove";
 import { WizIRemoveBold } from "./remove-bold";
@@ -197,10 +201,12 @@ export type TIcon =
   | typeof WizIHistory
   | typeof WizIHome
   | typeof WizIHourglassTop
+  | typeof WizIImage
   | typeof WizIInboxCustomize
   | typeof WizIInfoBold
   | typeof WizIInfoFilled
   | typeof WizIInfo
+  | typeof WizIKeep
   | typeof WizILinkOff
   | typeof WizILocationCity
   | typeof WizILocationOn
@@ -214,9 +220,11 @@ export type TIcon =
   | typeof WizINoteAdd
   | typeof WizINotification
   | typeof WizIOpenInNew
+  | typeof WizIPauseCircle
   | typeof WizIPersonFilled
   | typeof WizIPieChart
   | typeof WizIPinDrop
+  | typeof WizIPlayCircle
   | typeof WizIPublic
   | typeof WizIRemoveBold
   | typeof WizIRemove
@@ -317,10 +325,12 @@ export {
   WizIHistory,
   WizIHome,
   WizIHourglassTop,
+  WizIImage,
   WizIInboxCustomize,
   WizIInfoBold,
   WizIInfoFilled,
   WizIInfo,
+  WizIKeep,
   WizILinkOff,
   WizILocationCity,
   WizILocationOn,
@@ -334,9 +344,11 @@ export {
   WizINoteAdd,
   WizINotification,
   WizIOpenInNew,
+  WizIPauseCircle,
   WizIPersonFilled,
   WizIPieChart,
   WizIPinDrop,
+  WizIPlayCircle,
   WizIPublic,
   WizIRemoveBold,
   WizIRemove,

packages/wiz-ui-react/src/components/icons/keep.tsx

@@ -0,0 +1,18 @@
+import { CSSProperties } from "react";
+type Props = {
+  className?: string;
+  style?: CSSProperties;
+};
+export const WizIKeep = ({ className, style }: Props) => (
+  <svg
+    className={className}
+    style={style}
+    xmlns="http://www.w3.org/2000/svg"
+    height="1em"
+    viewBox="0 -960 960 960"
+    width="1em"
+  >
+    <path d="M600-760v296.92l57.23 57.23q2.92 2.93 4.39 6.58 1.46 3.65 1.46 7.55v11.21q0 8.28-5.97 14.39-5.98 6.12-14.8 6.12H500v197.08q0 8.5-5.76 14.25t-14.27 5.75q-8.51 0-14.24-5.75T460-162.92V-360H317.69q-8.82 0-14.8-6.12-5.97-6.11-5.97-14.39v-11.21q0-3.9 1.46-7.55 1.47-3.65 4.39-6.58L360-463.08V-760h-20q-8.5 0-14.25-5.76T320-780.03q0-8.51 5.75-14.24T340-800h280q8.5 0 14.25 5.76t5.75 14.27q0 8.51-5.75 14.24T620-760h-20ZM354-400h252l-46-46v-314H400v314l-46 46Zm126 0Z" />
+  </svg>
+);
+WizIKeep.displayName = "WizIKeep";

packages/wiz-ui-react/src/components/icons/pause-circle.tsx

@@ -0,0 +1,18 @@
+import { CSSProperties } from "react";
+type Props = {
+  className?: string;
+  style?: CSSProperties;
+};
+export const WizIPauseCircle = ({ className, style }: Props) => (
+  <svg
+    className={className}
+    style={style}
+    xmlns="http://www.w3.org/2000/svg"
+    height="1em"
+    viewBox="0 -960 960 960"
+    width="1em"
+  >
+    <path d="M412.33-340q8.52 0 14.25-5.75t5.73-14.25v-240q0-8.5-5.76-14.25T412.28-620q-8.51 0-14.24 5.75T392.31-600v240q0 8.5 5.76 14.25 5.75 5.75 14.26 5.75Zm135.39 0q8.51 0 14.24-5.75t5.73-14.25v-240q0-8.5-5.76-14.25-5.75-5.75-14.26-5.75-8.52 0-14.25 5.75T527.69-600v240q0 8.5 5.76 14.25t14.27 5.75Zm-67.59 220q-74.67 0-140.41-28.34-65.73-28.34-114.36-76.92-48.63-48.58-76.99-114.26Q120-405.19 120-479.87q0-74.67 28.34-140.41 28.34-65.73 76.92-114.36 48.58-48.63 114.26-76.99Q405.19-840 479.87-840q74.67 0 140.41 28.34 65.73 28.34 114.36 76.92 48.63 48.58 76.99 114.26Q840-554.81 840-480.13q0 74.67-28.34 140.41-28.34 65.73-76.92 114.36-48.58 48.63-114.26 76.99Q554.81-120 480.13-120Zm-.13-40q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+  </svg>
+);
+WizIPauseCircle.displayName = "WizIPauseCircle";

packages/wiz-ui-react/src/components/icons/play-circle.tsx

@@ -0,0 +1,18 @@
+import { CSSProperties } from "react";
+type Props = {
+  className?: string;
+  style?: CSSProperties;
+};
+export const WizIPlayCircle = ({ className, style }: Props) => (
+  <svg
+    className={className}
+    style={style}
+    xmlns="http://www.w3.org/2000/svg"
+    height="1em"
+    viewBox="0 -960 960 960"
+    width="1em"
+  >
+    <path d="M437.54-360.77 591-459.62q11.69-7.31 11.69-20.3 0-13-11.69-20.46l-153.46-98.85q-11.92-8.46-24.73-1.46Q400-593.68 400-578.85v197.7q0 14.83 12.81 21.84 12.81 7 24.73-1.46ZM480.13-120q-74.67 0-140.41-28.34-65.73-28.34-114.36-76.92-48.63-48.58-76.99-114.26Q120-405.19 120-479.87q0-74.67 28.34-140.41 28.34-65.73 76.92-114.36 48.58-48.63 114.26-76.99Q405.19-840 479.87-840q74.67 0 140.41 28.34 65.73 28.34 114.36 76.92 48.63 48.58 76.99 114.26Q840-554.81 840-480.13q0 74.67-28.34 140.41-28.34 65.73-76.92 114.36-48.58 48.63-114.26 76.99Q554.81-120 480.13-120Zm-.13-40q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+  </svg>
+);
+WizIPlayCircle.displayName = "WizIPlayCircle";