chore: update svg library to generate hash

.gitignore

@@ -13,7 +13,7 @@ dist-ssr
 .env
 *.local
 public/env.js
-public/sprite.svg
+public/sprite.*
 src/shared/ui/general/icon/sprites.generated.ts
 
 # Editor directories and files

package.json

@@ -32,7 +32,7 @@
     "react-hot-toast": "^2.4.1"
   },
   "devDependencies": {
-    "@neodx/svg": "^0.2.0",
+    "@neodx/svg": "^0.3.0",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/node": "^20.2.3",
     "@types/react": "^18.0.28",

src/entities/appointments/components/appointment-card.tsx

@@ -11,17 +11,17 @@ export const AppointmentCard = ({ appointment }: Props) => {
   return (
     <Container className="border border-neutral-900 border-opacity-[15%]">
       {appointment.status === AppointmentStatus.NotPayed && (
-        <Tag color="orange" icon="sprite/time-circle">
+        <Tag color="orange" icon="time-circle">
           Ожидает оплаты
         </Tag>
       )}
       {appointment.status === AppointmentStatus.InQueue && (
-        <Tag color="blue" icon="sprite/wait-circle">
+        <Tag color="blue" icon="wait-circle">
           В очереди
         </Tag>
       )}
       {appointment.status === AppointmentStatus.Done && (
-        <Tag color="green" icon="sprite/checkmark-circle">
+        <Tag color="green" icon="checkmark-circle">
           Запись выполнена
         </Tag>
       )}

src/shared/ui/data-display/list/index.tsx

@@ -26,7 +26,7 @@ export const ListItem = ({ className, children, ...rest }: ListItemProps) => {
     <li className={styles.listItem} {...rest}>
       <Icon
         className="shrink-0 translate-y-[3px]"
-        name="sprite/checkmark-circle"
+        name="checkmark-circle"
         size={16}
       />
       <span>{children}</span>

src/shared/ui/data-entry/checkbox/index.tsx

@@ -34,7 +34,7 @@ export const Checkbox = forwardRef<HTMLInputElement, Props>(
         />
         <div className={styles.checkbox}>
           <Icon
-            name="sprite/checkbox-mark"
+            name="checkbox-mark"
             className={styles.checkmark}
             size={16}
           />

src/shared/ui/feedback/curtain/index.tsx

@@ -55,7 +55,7 @@ export const Curtain = ({ isOpen, close, children }: Props) => {
         <div className={styles.contentWrapper}>
           <div className={styles.content}>
             <button onClick={animatedClose} className={styles.close}>
-              <Icon name="sprite/close" size={32} />
+              <Icon name="close" size={32} />
             </button>
             <Container rounded="top" padding="xl">
               {children}

src/shared/ui/feedback/loader/index.tsx

@@ -11,7 +11,7 @@ interface Props {
 export const Loader = ({ className, style }: Props) => {
   return (
     <div className={clsx(styles.loader, className)} style={style}>
-      <Icon name="sprite/loader" size={110} />
+      <Icon name="loader" size={110} />
     </div>
   )
 }

src/shared/ui/feedback/notification/index.tsx

@@ -12,7 +12,7 @@ function mapTypeToIcon(type: ToastType) {
   if (type === 'error')
     return (
       <Icon
-        name="sprite/cross-circle"
+        name="cross-circle"
         className={clsx(css.icon, 'text-failure')}
         size={32}
       />
@@ -21,15 +21,15 @@ function mapTypeToIcon(type: ToastType) {
   if (type === 'success')
     return (
       <Icon
-        name="sprite/checkmark-circle"
+        name="checkmark-circle"
         className={clsx(css.icon, 'text-[#21C02E]')}
         size={32}
       />
     )
 
   return (
     <Icon
-      name="sprite/time-circle"
+      name="time-circle"
       className={clsx(css.icon, 'text-blue-900')}
       size={32}
     />

src/shared/ui/general/icon/index.tsx

@@ -1,11 +1,8 @@
 import clsx from 'clsx'
 import { SVGProps } from 'react'
-import { SpritesMap } from './sprites.generated'
+import { SPRITES_META, SpritesMap } from './sprites.generated'
 
-// Merging all icons as `SPRITE_NAME/SPRITE_ICON_NAME`
-export type IconName = {
-  [Key in keyof SpritesMap]: `${Key}/${SpritesMap[Key]}`
-}[keyof SpritesMap]
+export type IconName = SpritesMap['sprite']
 
 export interface IconProps
   extends Omit<SVGProps<SVGSVGElement>, 'name' | 'type'> {
@@ -17,21 +14,22 @@ export const Icon = ({
   name,
   size,
   className,
-  viewBox,
+  viewBox: viewBoxFromProps,
   ...props
 }: IconProps) => {
-  const [spriteName, iconName] = name.split('/')
+  const { filePath, items } = SPRITES_META.sprite
+  const { viewBox } = items[name]
 
   return (
     <svg
       className={clsx(className, 'select-none inline-block')}
       style={{ width: size, height: size }}
-      viewBox={viewBox}
+      viewBox={viewBoxFromProps ?? viewBox}
       focusable="false"
       aria-hidden
       {...props}
     >
-      <use href={`/${spriteName}.svg#${iconName}`} />
+      <use href={`/${filePath}#${name}`} />
     </svg>
   )
 }

src/widgets/header/header.tsx

@@ -27,7 +27,7 @@ export const Header = ({ title }: Props) => {
         <Button
           className="w-14"
           color="secondary"
-          icon={<Icon name="sprite/arrow-left" size={28} />}
+          icon={<Icon name="arrow-left" size={28} />}
           onClick={$$goBack.clicked}
         />
       </div>

vite.config.ts

@@ -30,9 +30,11 @@ const config = defineConfig({
     svg({
       root: 'src/shared/ui/assets/icons',
       output: 'public',
+      fileName: '{name}.{hash:8}.svg',
       definitions: 'src/shared/ui/general/icon/sprites.generated.ts',
       group: false,
       resetColors: false,
+      experimentalRuntime: true,
     }),
   ],
 })