feat: add SymbolsIcons component to the layout

pooriaset · pooriaset · commit 12c9ab9fdb17 · 2024-05-25T09:11:40.000+03:30
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -19,6 +19,7 @@
     "Swipeable",
     "swiper",
     "toastify",
+    "Tooman",
     "usehooks",
     "Woocommerce",
     "Yekan",
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -24,6 +24,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
+import IconsSymbols from '@/components/Icons/components/IconsSymbols';
 
 export type LocaleLayoutParams = { params: { locale: Locale } };
 
@@ -61,6 +62,7 @@ export default async function LocaleLayout({
   return (
     <html lang={locale} dir={languages?.[locale]?.direction}>
       <body>
+        <IconsSymbols />
         <AppRouterCacheProvider>
           <ThemeProvider theme={themes[locale] ?? defaultTheme}>
             <ToastContainer
diff --git a/src/components/CartItem/components/Attributes.tsx b/src/components/CartItem/components/Attributes.tsx
@@ -1,7 +1,7 @@
 import { Stack, Typography } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import { FC, ReactNode } from 'react';
-import RulerIcon from '../../Icons/RulerIcon';
+import RulerIcon from '../../Icons/components/Use/RulerIcon';
 
 export interface AttributesProps {
   size: ReactNode | undefined;
diff --git a/src/components/Icons/RulerIcon.tsx b/src/components/Icons/RulerIcon.tsx
diff --git a/src/components/Icons/components/IconsSymbols.tsx b/src/components/Icons/components/IconsSymbols.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+const IconsSymbols = () => {
+  return (
+    <svg style={{ display: 'none' }}>
+      <symbol
+        id="tooman"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 14 14"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M3.057 1.742L3.821 1l.78.75-.776.741-.768-.749zm3.23 2.48c0 .622-.16 1.111-.478 1.467-.201.221-.462.39-.783.505a3.251 3.251 0 01-1.083.163h-.555c-.421 0-.801-.074-1.139-.223a2.045 2.045 0 01-.9-.738A2.238 2.238 0 011 4.148c0-.059.001-.117.004-.176.03-.55.204-1.158.525-1.827l1.095.484c-.257.532-.397 1-.419 1.403-.002.04-.004.08-.004.12 0 .252.055.458.166.618a.887.887 0 00.5.354c.085.028.178.048.278.06.079.01.16.014.243.014h.555c.458 0 .769-.081.933-.244.14-.139.21-.383.21-.731V2.02h1.2v2.202zm5.433 3.184l-.72-.7.709-.706.735.707-.724.7zm-2.856.308c.542 0 .973.19 1.293.569.297.346.445.777.445 1.293v.364h.18v-.004h.41c.221 0 .377-.028.467-.084.093-.055.14-.14.14-.258v-.069c.004-.243.017-1.044 0-1.115L13 8.05v1.574a1.4 1.4 0 01-.287.863c-.306.405-.804.607-1.495.607h-.627c-.061.733-.434 1.257-1.117 1.573-.267.122-.58.21-.937.265a5.845 5.845 0 01-.914.067v-1.159c.612 0 1.072-.082 1.38-.247.25-.132.376-.298.376-.499h-.515c-.436 0-.807-.113-1.113-.339-.367-.273-.55-.667-.55-1.18 0-.488.122-.901.367-1.24.296-.415.728-.622 1.296-.622zm.533 2.226v-.364c0-.217-.048-.389-.143-.516a.464.464 0 00-.39-.187.478.478 0 00-.396.187.705.705 0 00-.136.449.65.65 0 00.003.067c.008.125.066.22.177.283.093.054.21.08.352.08h.533zM9.5 6.707l.72.7.724-.7L10.209 6l-.709.707zm-6.694 4.888h.03c.433-.01.745-.106.937-.29.024.012.065.035.12.068l.074.039.081.042c.135.073.261.133.379.18.345.146.67.22.977.22a1.216 1.216 0 00.87-.34c.3-.285.449-.714.449-1.286a2.19 2.19 0 00-.335-1.145c-.299-.457-.732-.685-1.3-.685-.502 0-.916.192-1.242.575-.113.132-.21.284-.294.456-.032.062-.06.125-.084.191a.504.504 0 00-.03.078 1.67 1.67 0 00-.022.06c-.103.309-.171.485-.205.53-.072.09-.214.14-.427.147-.123-.005-.209-.03-.256-.076-.057-.054-.085-.153-.085-.297V7l-1.201-.5v3.562c0 .261.048.496.143.703.071.158.168.296.29.413.123.118.266.211.43.28.198.084.42.13.665.136v.001h.036zm2.752-1.014a.778.778 0 00.044-.353.868.868 0 00-.165-.47c-.1-.134-.217-.201-.35-.201-.18 0-.33.103-.447.31-.042.071-.08.158-.114.262a2.434 2.434 0 00-.04.12l-.015.053-.015.046c.142.118.323.216.544.293.18.062.325.092.433.092.044 0 .086-.05.125-.152z"
+          clip-rule="evenodd"
+        ></path>
+      </symbol>
+
+      <symbol id="ruler" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path
+          fill-rule="evenodd"
+          d="M12 2h9a1 1 0 011 1v18a1 1 0 01-1 1h-9a1 1 0 01-1-1V3a1 1 0 011-1zm1 17v1h7V4h-7v1h2v2h-2v2h2v2h-2v2h2v2h-2v2h2v2h-2zm-4.707-2.707L7 17.586V6.414l1.293 1.293 1.414-1.414-3-3a1 1 0 00-1.414 0l-3 3 1.414 1.414L5 6.414v11.172l-1.293-1.293-1.414 1.414 3 3a1 1 0 001.414 0l3-3-1.414-1.414z"
+          clip-rule="evenodd"
+        ></path>
+      </symbol>
+    </svg>
+  );
+};
+
+export default IconsSymbols;
diff --git a/src/components/Icons/components/Use/RulerIcon.tsx b/src/components/Icons/components/Use/RulerIcon.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const RulerIcon = () => {
+  return (
+    <svg
+      style={{ width: 18, height: 18, fill: 'var(--color-icon-low-emphasis)' }}
+    >
+      <use xlinkHref="#ruler"></use>
+    </svg>
+  );
+};
+
+export default RulerIcon;
diff --git a/src/components/Icons/components/Use/ToomanIcon.tsx b/src/components/Icons/components/Use/ToomanIcon.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const ToomanIcon = () => {
+  return (
+    <svg
+      style={{
+        width: 18,
+        height: 18,
+        fill: 'var(--color-icon-high-emphasis)',
+      }}
+    >
+      <use xlinkHref="#tooman"></use>
+    </svg>
+  );
+};
+
+export default ToomanIcon;
diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts
@@ -0,0 +1,3 @@
+export { default as IconsSymbols } from './components/IconsSymbols';
+export { default as ToomanIcon } from './components/Use/ToomanIcon';
+export { default as RulerIcon } from './components/Use/RulerIcon';
diff --git a/src/components/common/PriceLabel.tsx b/src/components/common/PriceLabel.tsx
@@ -4,6 +4,7 @@ import { extractNumbers, getMinOfRangePrice } from '@/utils/price';
 import { Stack, Typography, TypographyProps } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import PriceUnit from './PriceUnit';
+import { ToomanIcon } from '../Icons';
 
 export interface PriceLabelProps {
   value?: string | number | null;
@@ -33,7 +34,7 @@ const PriceLabel: FC<PriceLabelProps> = ({
     <Stack alignItems="center" spacing={0.25} direction="row">
       {prefix}
       <Typography {...TypographyProps}>{_value?.toLocaleString()}</Typography>
-      <PriceUnit title={t('units.price')} TypographyProps={TypographyProps} />
+      <PriceUnit title={<ToomanIcon />} TypographyProps={TypographyProps} />
       {suffix}
     </Stack>
   );
diff --git a/src/components/common/PriceUnit.tsx b/src/components/common/PriceUnit.tsx
@@ -1,8 +1,8 @@
 import { Typography, TypographyProps } from '@mui/material';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 
 export interface PriceUnitProps {
-  title: string;
+  title: ReactNode;
   TypographyProps?: Partial<TypographyProps>;
 }
 const PriceUnit: FC<PriceUnitProps> = ({ title, TypographyProps }) => {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export { default as IconsSymbols } from './components/IconsSymbols';`
	`2`	`+export { default as ToomanIcon } from './components/Use/ToomanIcon';`
	`3`	`+export { default as RulerIcon } from './components/Use/RulerIcon';`