@hhgtech/hhg-components 1.19.0-beta-4 → 1.19.0-beta-6

package/raw/components/atoms/icons/BarChart.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const BarChart: React.FC<IconProps> = ({
+  size,
+  color,
+  activeColor,
+  isActive,
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      <path
+        fill={isActive ? activeColor : color}
+        fillRule="evenodd"
+        d="M12 4c.88 0 1.6.72 1.6 1.6v12.8c0 .88-.72 1.6-1.6 1.6-.88 0-1.6-.72-1.6-1.6V5.6c0-.88.72-1.6 1.6-1.6zM5.6 8.8h.229c.88 0 1.6.72 1.6 1.6v8c0 .88-.72 1.6-1.6 1.6H5.6c-.88 0-1.6-.72-1.6-1.6v-8c0-.88.72-1.6 1.6-1.6zM20 14.743c0-.88-.72-1.6-1.6-1.6-.88 0-1.6.72-1.6 1.6V18.4c0 .88.72 1.6 1.6 1.6.88 0 1.6-.72 1.6-1.6v-3.657z"
+        clipRule="evenodd"
+      ></path>
+    </svg>
+  )
+}
+
+BarChart.defaultProps = {
+  size: 24,
+  color: theme.colors.gray600,
+  activeColor: theme.colors.primaryBase,
+  isActive: false,
+}
+
+export default BarChart

package/raw/components/atoms/icons/Booking.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const Booking: React.FC<IconProps> = ({
+  size,
+  color,
+  activeColor,
+  isActive,
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      <path
+        fill={isActive ? activeColor : color}
+        d="M6 0C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm0 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm10 0v2h-2.262c.165.64.262 1.308.262 2h5v2h-5.262a7.92 7.92 0 01-.816 2H19l.002 10H5v-6.068a7.911 7.911 0 01-2-.52V20c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-1V2h-2zM6.9 3.2L5.2 6.1l2.2 2.2.9-1-1.5-1.4L8 3.8l-1.1-.6z"
+      ></path>
+    </svg>
+  )
+}
+
+Booking.defaultProps = {
+  size: 24,
+  color: theme.colors.gray600,
+  activeColor: theme.colors.primaryBase,
+  isActive: false,
+}
+
+export default Booking

package/raw/components/atoms/icons/Bookmark.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const Bookmark: React.FC<IconProps> = ({
+  size,
+  color,
+  activeColor,
+  isActive,
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      {isActive ? (
+        <path
+          fill={activeColor}
+          d="M6 2c-1.156 0-2 .965-2 2v18.04l8-2.974 8 2.973V4c0-.523-.191-1.055-.566-1.43-.38-.379-.91-.57-1.434-.57H6z"
+        ></path>
+      ) : (
+        <path
+          fill={color}
+          d="M6 2c-1.156 0-2 .965-2 2v18.04l8-2.974 8 2.973V4c0-.523-.191-1.055-.566-1.43-.38-.379-.91-.57-1.434-.57H6zm0 2h12v15.16l-6-2.226-6 2.226V4z"
+        ></path>
+      )}
+    </svg>
+  )
+}
+
+Bookmark.defaultProps = {
+  size: 24,
+  color: theme.colors.gray600,
+  activeColor: theme.colors.primaryBase,
+  isActive: false,
+}
+
+export default Bookmark

package/raw/components/atoms/icons/Community.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const Community: React.FC<IconProps> = ({
+  size,
+  color,
+  activeColor,
+  isActive,
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      {isActive ? (
+        <path
+          fill={activeColor}
+          d="M9 3C5.133 3 2 5.688 2 9c0 1.129.367 2.176 1 3.078v3.64c0 .528.605.829 1.027.512l2.262-1.699C7.121 14.832 8.04 15 9 15c3.867 0 7-2.688 7-6 0-3.313-3.133-6-7-6zm8.977 5.574c.007.14.023.281.023.426 0 4.41-4.035 8-9 8-.02 0-.04-.004-.059-.004C10.152 18.79 12.411 20 15 20c.96 0 1.875-.168 2.71-.469l2.263 1.7A.642.642 0 0021 20.718v-3.64c.633-.903 1-1.95 1-3.079 0-2.398-1.648-4.465-4.023-5.426z"
+        ></path>
+      ) : (
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M9 3C5.133 3 2 5.688 2 9c0 1.129.367 2.176 1 3.078V17l3.29-2.469a7.586 7.586 0 001.804.41C8.625 17.81 11.508 20 15 20c.96 0 1.875-.168 2.71-.469L21 22v-4.922c.633-.902 1-1.95 1-3.078 0-3.05-2.66-5.563-6.094-5.945C15.375 5.19 12.492 3 9 3zm0 2c2.758 0 5 1.793 5 4s-2.242 4-5 4c-.707 0-1.39-.117-2.031-.348l-1.016-.367-.863.649L5 13v-1.55l-.36-.516C4.216 10.328 4 9.676 4 9c0-2.207 2.242-4 5-4zm6.879 5.074C18.219 10.406 20 12.035 20 14c0 .676-.215 1.328-.64 1.934l-.36.515V18l-.09-.066-.863-.649-1.016.367c-.64.23-1.324.348-2.031.348-2.363 0-4.336-1.32-4.855-3.086 2.91-.41 5.21-2.36 5.734-4.84z"
+          clipRule="evenodd"
+        ></path>
+      )}
+    </svg>
+  )
+}
+
+Community.defaultProps = {
+  size: 24,
+  color: theme.colors.gray600,
+  activeColor: theme.colors.primaryBase,
+  isActive: false,
+}
+
+export default Community

package/raw/components/atoms/icons/EditSpecial.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const EditSpecial: React.FC<IconProps> = ({ size, color, ...rest }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 33 32"
+      {...rest}
+    >
+      <circle cx="16.5" cy="16" r="16" fill={color}></circle>
+      <path
+        fill="#fff"
+        d="M22.477 7.667c-.604 0-1.207.23-1.667.69l-.977.976 3.334 3.334.976-.977a2.358 2.358 0 00-1.666-4.023zm-3.894 2.916L9 20.167V23.5h3.333l9.584-9.583-3.334-3.334z"
+      ></path>
+    </svg>
+  )
+}
+
+EditSpecial.defaultProps = {
+  size: 32,
+  color: theme.colors.primaryBase,
+}
+
+export default EditSpecial

package/raw/components/atoms/icons/Family.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const Family: React.FC<IconProps> = ({
+  size,
+  color,
+  activeColor,
+  isActive,
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      <path
+        fill={isActive ? activeColor : color}
+        d="M8 3a3 3 0 100 6 3 3 0 000-6zm8 0a3 3 0 100 6 3 3 0 000-6zM8 5c.551 0 1 .449 1 1 0 .551-.449 1-1 1-.551 0-1-.449-1-1 0-.551.449-1 1-1zm8 0c.551 0 1 .449 1 1 0 .551-.449 1-1 1-.551 0-1-.449-1-1 0-.551.449-1 1-1zm-9 6a4 4 0 00-4 4v6h4v-2H5v-4c0-1.103.897-2 2-2h10c1.103 0 2 .897 2 2v4h-2v2h4v-6a4 4 0 00-4-4H7zm5 3a2 2 0 100 4 2 2 0 000-4zm-1 5a2 2 0 00-2 2h6a2 2 0 00-2-2h-2z"
+      ></path>
+    </svg>
+  )
+}
+
+Family.defaultProps = {
+  size: 24,
+  color: theme.colors.gray600,
+  activeColor: theme.colors.primaryBase,
+  isActive: false,
+}
+
+export default Family

package/raw/components/atoms/icons/Font.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const Font: React.FC<IconProps> = ({
+  size,
+  color,
+  activeColor,
+  isActive,
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      <path
+        fill={isActive ? activeColor : color}
+        d="M9 5.5c0 .83.67 1.5 1.5 1.5H14v10.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V7h3.5c.83 0 1.5-.67 1.5-1.5S21.33 4 20.5 4h-10C9.67 4 9 4.67 9 5.5zM4.5 12H6v5.5c0 .83.67 1.5 1.5 1.5S9 18.33 9 17.5V12h1.5c.83 0 1.5-.67 1.5-1.5S11.33 9 10.5 9h-6C3.67 9 3 9.67 3 10.5S3.67 12 4.5 12z"
+      ></path>
+    </svg>
+  )
+}
+
+Font.defaultProps = {
+  size: 24,
+  color: theme.colors.gray600,
+  activeColor: theme.colors.primaryBase,
+  isActive: false,
+}
+
+export default Font

package/raw/components/atoms/icons/Heart.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const Heart: React.FC<IconProps> = ({
+  size,
+  color,
+  activeColor,
+  isActive,
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      <path
+        fill={isActive ? activeColor : color}
+        d="M16.5 3C13.605 3 12 5.09 12 5.09S10.395 3 7.5 3A5.5 5.5 0 002 8.5c0 4.171 4.912 8.213 6.281 9.49.77.719 1.677 1.538 2.401 2.187.751.673 1.885.673 2.636 0 .724-.65 1.63-1.468 2.401-2.187C17.088 16.713 22 12.671 22 8.5A5.5 5.5 0 0016.5 3zm-1.689 13.11c-.177.16-.331.299-.456.416-.751.7-1.639 1.503-2.355 2.145a175.713 175.713 0 01-2.355-2.145c-.126-.117-.28-.257-.456-.416C7.769 14.827 4 11.419 4 8.5 4 6.57 5.57 5 7.5 5c1.827 0 2.886 1.275 2.914 1.308L12 8l1.586-1.692C13.596 6.295 14.673 5 16.5 5 18.43 5 20 6.57 20 8.5c0 2.919-3.769 6.327-5.189 7.61z"
+      ></path>
+    </svg>
+  )
+}
+
+Heart.defaultProps = {
+  size: 24,
+  color: theme.colors.gray600,
+  activeColor: theme.colors.primaryBase,
+  isActive: false,
+}
+
+export default Heart

package/raw/components/atoms/icons/Home.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const Home: React.FC<IconProps> = ({
+  size,
+  color,
+  activeColor,
+  isActive,
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      {isActive ? (
+        <path
+          fill={activeColor}
+          fillRule="evenodd"
+          d="M3.45 8.465l8-5.3c.331-.22.769-.22 1.1 0l8 5.3c.282.187.45.5.45.836V20c0 1.105-.895 2-2 2H5c-1.105 0-2-.895-2-2V9.3c0-.335.168-.648.45-.835zm3.886 8.215c-.44-.332-.438-.97-.05-1.361.391-.392 1.046-.413 1.512-.116.773.493 2.036 1.116 3.49 1.116 1.455 0 2.718-.623 3.49-1.116.466-.297 1.122-.275 1.512.116.39.39.391 1.029-.049 1.361-1.409 1.065-3.194 1.639-4.953 1.639-1.758 0-3.544-.574-4.952-1.639z"
+          clipRule="evenodd"
+        ></path>
+      ) : (
+        <>
+          <path
+            fill={color}
+            d="M7.336 16.68c-.44-.332-.438-.97-.05-1.361.391-.392 1.046-.413 1.512-.116.773.493 2.036 1.116 3.49 1.116 1.455 0 2.718-.623 3.49-1.116.466-.297 1.122-.275 1.512.116.39.39.391 1.029-.049 1.361-1.409 1.065-3.194 1.639-4.953 1.639-1.758 0-3.544-.574-4.952-1.639z"
+          ></path>
+          <path
+            fill={color}
+            fillRule="evenodd"
+            d="M12.552 3.167a1 1 0 00-1.104 0l-8 5.302A1 1 0 003 9.303V20c0 1.094.906 2 2 2h14c1.094 0 2-.906 2-2V9.303a1 1 0 00-.448-.834l-8-5.302zm-1.104 2.398a1 1 0 011.104 0l6 3.974a1 1 0 01.448.834V19.6a.4.4 0 01-.4.4H5.4a.4.4 0 01-.4-.4v-9.227a1 1 0 01.448-.834l6-3.974z"
+            clipRule="evenodd"
+          ></path>
+        </>
+      )}
+    </svg>
+  )
+}
+
+Home.defaultProps = {
+  size: 24,
+  color: theme.colors.gray600,
+  activeColor: theme.colors.primaryBase,
+  isActive: false,
+}
+
+export default Home

package/raw/components/atoms/icons/Like.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const Like: React.FC<IconProps> = ({
+  size,
+  color,
+  activeColor,
+  isActive,
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      {isActive ? (
+        <path
+          fill={activeColor}
+          d="M11.678.182a1.02 1.02 0 00-.899.79l-.554 2.446L7.514 6.43A1.997 1.997 0 007 7.768V17a2 2 0 002 2h8.031c.741 0 1.412-.436 1.713-1.113l3.002-6.756c.167-.374.254-.78.254-1.19V9c0-1.1-.9-2-2-2h-7s1-2.37 1-4.137C14 1.25 12.962.544 12.107.236a.991.991 0 00-.43-.054zM3.5 7A1.5 1.5 0 002 8.5v9a1.5 1.5 0 003 0v-9A1.5 1.5 0 003.5 7z"
+        ></path>
+      ) : (
+        <>
+          <path
+            fill={color}
+            fillRule="evenodd"
+            d="M10.39 4.86l.801-3.887.84.027s.946.02 1.918.508A3.764 3.764 0 0116 4.898C16 6 15.715 7.125 15.434 8H20c.523 0 1.055.191 1.434.57.375.375.566.907.566 1.43v2.402c0 .29-.08.44-.219.672l-3.375 6.754c-.304.8-1.125 1.172-1.808 1.172H8c-.523 0-1.055-.191-1.43-.566-.379-.38-.57-.91-.57-1.434V9.5c0-.523.246-1.234.844-1.633L10.39 4.86zm2.494-1.617a.695.695 0 01-.114-.024l-.563 2.719L8 9.5V19h8.582l3.207-6.418a2 2 0 00.211-.894V10.2a.2.2 0 00-.2-.2h-7.3l.578-1.383S14 6.207 14 4.898c0-1.039-.418-1.34-.95-1.601a.427.427 0 00-.166-.054z"
+            clipRule="evenodd"
+          ></path>
+          <path fill={color} d="M2 10a1 1 0 012 0v10a1 1 0 11-2 0V10z"></path>
+        </>
+      )}
+    </svg>
+  )
+}
+
+Like.defaultProps = {
+  size: 24,
+  color: theme.colors.gray600,
+  activeColor: theme.colors.primaryBase,
+  isActive: false,
+}
+
+export default Like

package/raw/components/atoms/icons/MyCommunity.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const MyCommunity: React.FC<IconProps> = ({
+  size,
+  color,
+  activeColor,
+  isActive,
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      <path
+        fill={isActive ? activeColor : color}
+        d="M17 3c-1.105 0-2 .895-2 2v7l2-2h4c1.105 0 2-.895 2-2V5c0-1.105-.895-2-2-2h-4zM9.5 5A3.514 3.514 0 006 8.5C6 10.422 7.578 12 9.5 12S13 10.422 13 8.5 11.422 5 9.5 5zM17 5h4v3h-4V5zM9.5 7c.84 0 1.5.66 1.5 1.5S10.34 10 9.5 10 8 9.34 8 8.5 8.66 7 9.5 7zm0 7c-1.488 0-3.2.422-4.648 1.125-.727.355-1.387.777-1.915 1.313C2.414 16.977 2 17.675 2 18.5V21h15v-2.5c0-.824-.414-1.523-.938-2.063-.527-.535-1.187-.957-1.91-1.312C12.7 14.422 10.988 14 9.5 14zm0 2c1.078 0 2.617.363 3.777.926.579.281 1.059.61 1.352.91.293.3.371.52.371.664v.5H4v-.5c0-.145.078-.363.371-.664.293-.3.774-.629 1.356-.91C6.883 16.363 8.422 16 9.5 16z"
+      ></path>
+    </svg>
+  )
+}
+
+MyCommunity.defaultProps = {
+  size: 24,
+  color: theme.colors.gray600,
+  activeColor: theme.colors.primaryBase,
+  isActive: false,
+}
+
+export default MyCommunity

package/raw/components/atoms/icons/PlusSpecial.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const PlusSpecial: React.FC<IconProps> = ({ size, color, ...rest }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 33 32"
+      {...rest}
+    >
+      <circle cx="16.5" cy="16" r="16" fill={color}></circle>
+      <path
+        fill="#fff"
+        d="M21.5 16.833h-4.166V21a.836.836 0 01-.834.833.836.836 0 01-.833-.833v-4.167H11.5a.836.836 0 01-.833-.833c0-.459.375-.834.833-.834h4.167V11c0-.459.375-.834.833-.834.459 0 .834.375.834.834v4.166H21.5c.459 0 .834.375.834.834a.836.836 0 01-.834.833z"
+      ></path>
+    </svg>
+  )
+}
+
+PlusSpecial.defaultProps = {
+  size: 32,
+  color: theme.colors.primaryBase,
+}
+
+export default PlusSpecial

package/raw/components/atoms/icons/Recalculate.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const Recalculate: React.FC<IconProps> = ({
+  size,
+  color,
+  activeColor,
+  isActive,
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      <path
+        fill={isActive ? activeColor : color}
+        d="M12 2c-2.037 0-3.934.62-5.517 1.67l-1.5-1.5A.575.575 0 004 2.576v3.85c0 .317.257.574.574.574h3.85c.513 0 .77-.62.406-.982l-.9-.9A7.944 7.944 0 0112 4c4.43 0 8 3.57 8 8s-3.57 8-8 8-8-3.57-8-8a1 1 0 10-2 0c0 5.512 4.489 10 10 10s10-4.488 10-10C22 6.49 17.511 2 12 2z"
+      ></path>
+    </svg>
+  )
+}
+
+Recalculate.defaultProps = {
+  size: 24,
+  color: theme.colors.gray600,
+  activeColor: theme.colors.primaryBase,
+  isActive: false,
+}
+
+export default Recalculate

package/raw/components/atoms/icons/Scale.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const Scale: React.FC<IconProps> = ({
+  size,
+  color,
+  activeColor,
+  isActive,
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      {isActive ? (
+        <path
+          fill={activeColor}
+          d="M12 3C5.934 3 1 7.934 1 14a11 11 0 001.473 5.504s.218.496.836.496H7c.55 0 1-.45 1-1s.45-1 1-1h6c.55 0 1 .45 1 1s.45 1 1 1h3.668c.508 0 .86-.5.86-.5A10.975 10.975 0 0023 14c0-6.066-4.934-11-11-11zm0 2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm4.844 1.414a1.002 1.002 0 01-1.078 1.688 1.003 1.003 0 01-.305-1.383 1.003 1.003 0 011.383-.305zm-9.75.04A1 1 0 116.8 7.84a1.006 1.006 0 01.293-1.387zm-2.95 3.155a1 1 0 111.75.974 1 1 0 01-1.75-.974zM4 15c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm9.324.492h-.004a1.985 1.985 0 01-1.797.453 1.995 1.995 0 01-.02-3.875v-.004l.06-.015c.011 0 4.468-1.5 6.523-2.035.46-.118.777.445.445.78l-5.207 4.696zM20 15c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"
+        ></path>
+      ) : (
+        <path
+          fill={color}
+          d="M12 3C5.934 3 1 7.934 1 14c0 1.934.508 3.836 1.473 5.5l.289.5H6v-2H3.937A8.998 8.998 0 013 14c0-4.965 4.04-9 9-9s9 4.035 9 9c0 1.395-.32 2.766-.938 4H18v2h3.238l.29-.5A10.975 10.975 0 0023 14c0-6.066-4.934-11-11-11zm0 3c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zM8.5 7c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm6.938 0c-.551 0-1 .45-1 1s.449 1 1 1c.55 0 1-.45 1-1s-.45-1-1-1zM6 9.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm12.531.75l-6.968 1.8-.06.016v.004A1.99 1.99 0 0010 14c0 1.105.895 2 2 2 .508 0 .969-.195 1.324-.512l5.207-5.238zM5 13c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm14 0c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zM9 18v2h6v-2H9z"
+        ></path>
+      )}
+    </svg>
+  )
+}
+
+Scale.defaultProps = {
+  size: 24,
+  color: theme.colors.gray600,
+  activeColor: theme.colors.primaryBase,
+  isActive: false,
+}
+
+export default Scale

package/raw/components/atoms/icons/Share.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const Share: React.FC<IconProps> = ({
+  size,
+  color,
+  activeColor,
+  isActive,
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      <path
+        fill={isActive ? activeColor : color}
+        d="M19 3c-1.652 0-3 1.348-3 3 0 .46.113.895.3 1.285L12.587 11h-4.77A2.999 2.999 0 005 9c-1.652 0-3 1.348-3 3s1.348 3 3 3c1.3 0 2.402-.84 2.816-2h4.77l3.715 3.715c-.188.39-.301.824-.301 1.285 0 1.652 1.348 3 3 3s3-1.348 3-3-1.348-3-3-3c-.46 0-.895.113-1.285.3l-3.3-3.3 3.3-3.3c.39.187.824.3 1.285.3 1.652 0 3-1.348 3-3s-1.348-3-3-3z"
+      ></path>
+    </svg>
+  )
+}
+
+Share.defaultProps = {
+  size: 24,
+  color: theme.colors.gray600,
+  activeColor: theme.colors.primaryBase,
+  isActive: false,
+}
+
+export default Share

package/raw/components/atoms/icons/Stethoscope.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { IconProps } from '.'
+import { theme } from '../../../misc/theme'
+
+const Stethoscope: React.FC<IconProps> = ({
+  size,
+  color,
+  activeColor,
+  isActive,
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      <path
+        fill={isActive ? activeColor : color}
+        d="M4 2c-.534 0-1.037.208-1.414.586A1.988 1.988 0 002 4v3c0 2.942 1.83 5.454 4.408 6.486.354.616.914 1.09 1.592 1.33V18a4 4 0 004 4h4a4 4 0 004-4v-.174a3 3 0 10-2-.002V18a2 2 0 01-2 2h-4a2 2 0 01-2-2v-3.184a2.987 2.987 0 001.592-1.33A7.009 7.009 0 0016 6.976V4a2 2 0 00-2-2h-1a1 1 0 000 2h1v2.777c0 2.61-1.901 4.945-4.498 5.198a5.17 5.17 0 01-.555.025c-2.733-.028-4.946-2.262-4.945-5.023L4 4h1a1 1 0 000-2H4z"
+      ></path>
+    </svg>
+  )
+}
+
+Stethoscope.defaultProps = {
+  size: 24,
+  color: theme.colors.gray600,
+  activeColor: theme.colors.primaryBase,
+  isActive: false,
+}
+
+export default Stethoscope