Fix icon sizing

plugins/vite.ts

@@ -1,15 +1,21 @@
 import path from 'path'
 import fs from 'fs/promises'
 
-import { ILLUS_OPTIONS, SPRITES_OPTIONS, processSvgWithOutput } from '../scripts/svg.js'
+import {
+  ILLUS_OPTIONS,
+  SPRITES_OPTIONS,
+  getSvgIds,
+  processSvgWithOutput,
+  replaceAvailableSvgs,
+} from '../scripts/svg.js'
 import { forFile, __dirname } from '../scripts/utils.js'
 import { fetchStatusAssetLogos, replaceAssetLogosSource } from '../scripts/asset-logos.js'
 import {
   fetchMetricsRestrictions,
   replaceDefaultMetricsRestrictionsSource,
 } from '../scripts/metrics-restrictions/index.js'
 
-export function WebkitSvg() {
+export async function WebkitSvg() {
   const base = __dirname()
   const isLibPackage = base.includes('node_modules')
 
@@ -19,9 +25,20 @@ export function WebkitSvg() {
   const staticDir = './static/webkit/'
   const spritesStaticDir = './static/webkit/sprites/'
 
+  const svgIds = await getSvgIds()
+
   return {
     name: 'webkit-svg',
 
+    transform(src: string, id: string) {
+      if (id.includes('/core/Svg/ids.ts')) {
+        return {
+          code: replaceAvailableSvgs(src, svgIds),
+          map: null,
+        }
+      }
+    },
+
     async buildStart() {
       if (isLibPackage) {
         const root = path.resolve(base, '..')

scripts/release.js

@@ -8,7 +8,7 @@ import {
   fetchMetricsRestrictions,
   replaceDefaultMetricsRestrictionsSource,
 } from './metrics-restrictions/index.js'
-import { ILLUS_OPTIONS, SPRITES_OPTIONS, processSvgWithOutput, replaceSvgIdsType } from './svg.js'
+import { combineSvgsToSprite, getSvgIds, replaceAvailableSvgs, replaceSvgIdsType } from './svg.js'
 
 const MAIN_BRANCH = 'next'
 const RELEASE_BRANCH = 'lib-release'
@@ -204,18 +204,13 @@ async function replaceSrcImports() {
 }
 
 async function processSvg() {
-  const ids = []
-  async function process(path, options) {
-    await forFile(path, async (entry) => {
-      const id = entry.replace('./dist/icons/', '').replace('./dist/illus/', '').replace('.svg', '')
-      ids.push(id)
-
-      processSvgWithOutput(entry, './dist/', './dist/sprites/', options, './dist/')
-    })
-  }
+  const [ids] = await Promise.all([getSvgIds(), combineSvgsToSprite()])
+
+  await forFile(['./dist/**/core/Svg/ids.js'], (entry) => {
+    const file = fs.readFileSync(entry)
 
-  await process(['./dist/icons/**/*.svg'], SPRITES_OPTIONS)
-  await process(['./dist/illus/**/*.svg'], ILLUS_OPTIONS)
+    fs.writeFileSync(entry, replaceAvailableSvgs(file.toString(), ids))
+  })
 
   await forFile(['./dist/**/core/Svg/types.d.ts'], (entry) => {
     const file = fs.readFileSync(entry)

scripts/svg.js

@@ -1,6 +1,8 @@
 import path from 'path'
 import fs from 'fs'
 
+import { forFile } from './utils.js'
+
 /**
  *
  * @param {string} path
@@ -110,3 +112,51 @@ export const replaceSvgIdsType = (src, ids) =>
     'type TSvgId = string',
     `type TSvgId = ${ids.map((id) => `"${id}"`).join(' | ')} | (string & {})`,
   )
+
+export async function combineSvgsToSprite() {
+  /**
+   *
+   * @param {string[]} path
+   * @param {any} options
+   */
+  async function process(path, options) {
+    await forFile(path, async (entry) => {
+      processSvgWithOutput(entry, './dist/', './dist/sprites/', options, './dist/')
+    })
+  }
+
+  await process(['./dist/icons/**/*.svg'], SPRITES_OPTIONS)
+  await process(['./dist/illus/**/*.svg'], ILLUS_OPTIONS)
+}
+
+export async function getSvgIds() {
+  /**
+   * @type {string[]}
+   */
+  const ids = []
+
+  /**
+   *
+   * @param {string[]} path
+   */
+  async function process(path) {
+    await forFile(path, async (entry) => {
+      const id = entry.replace('./dist/icons/', '').replace('./dist/illus/', '').replace('.svg', '')
+      ids.push(id)
+    })
+  }
+
+  await process(['./dist/icons/**/*.svg'])
+  await process(['./dist/illus/**/*.svg'])
+
+  return ids
+}
+
+/**
+ *
+ * @param {string} src - Source code
+ * @param {Array<string>} svgs - Stringified JSON array
+ * @returns {string}
+ */
+export const replaceAvailableSvgs = (src, svgs) =>
+  src.replace('AVAILABLE_IDS = []', `AVAILABLE_IDS = ${JSON.stringify(svgs)}`)

src/lib/ui/app/Alerts/categories/social-trends/select-trend-form-step/ui/Word.svelte

@@ -85,7 +85,7 @@
 
 <section class="flex flex-1 flex-col gap-3">
   <Input
-    icon="search"
+    icon="search-12"
     placeholder="Search for trending words"
     oninput={onInput}
     onkeyup={onKeyUp}

src/lib/ui/app/Alerts/categories/wallet/wallet-form-step/ui/SelectAsset.svelte

@@ -55,7 +55,7 @@
   {#snippet content({ close })}
     <section class="flex flex-col gap-2">
       <Input
-        icon="search"
+        icon="search-12"
         oninput={onInput}
         onkeyup={onKeyUp}
         placeholder="Search assets"

src/lib/ui/app/Alerts/categories/watchlist/watchlist-form-step/ui/ListOfWatchlists.svelte

@@ -43,7 +43,7 @@
 </script>
 
 <section class="flex flex-col gap-3">
-  <Input icon="search" placeholder="Search for watchlist" oninput={onInput} onkeyup={onKeyUp} />
+  <Input icon="search-12" placeholder="Search for watchlist" oninput={onInput} onkeyup={onKeyUp} />
 
   <section class="flex flex-col gap-3">
     {#each filteredWatchlists as watchlist}

src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/Metrics.svelte

@@ -31,7 +31,7 @@
 
 <section class="flex flex-col gap-3">
   <Input
-    icon="search"
+    icon="search-12"
     placeholder="Search for metric"
     oninput={onSearchInput}
     onkeyup={onSearchKeyUp}

src/lib/ui/app/ListOfAssets/Layout.svelte

@@ -73,7 +73,7 @@
       <Input
         class="bg-inherit"
         inputClass="md:py-2.5"
-        icon="search"
+        icon="search-12"
         placeholder="Search project"
         oninput={onInput}
         onkeyup={onKeyUp}

src/lib/ui/core/Button/Button.svelte

@@ -8,7 +8,7 @@
 
   import { useDeviceCtx } from '$lib/ctx/device/index.svelte.js'
   import { cn } from '$ui/utils/index.js'
-  import Svg, { type TSvgId } from '$ui/core/Svg/index.js'
+  import Svg, { type TSvgId, checkSvgIdAvailable } from '$ui/core/Svg/index.js'
 
   type TButtonVariants = VariantProps<typeof button>
 
@@ -68,7 +68,22 @@
 
   const isPhone = $derived(device.$.isPhone)
   const size = $derived(initialSize ?? (isPhone ? 'lg' : 'md'))
-  const iconSize = $derived(initialIconSize ?? (size === 'md' || size === 'lg' ? 16 : 12))
+
+  const { icon: sizedIcon, size: autoIconSize } = $derived.by(() => {
+    if (!icon) return {}
+    if (size === 'md' || size === 'lg') return { icon, size: undefined }
+
+    const smallId = `${icon}-12`
+    const isSmallIconAvailable = checkSvgIdAvailable(`${icon}-12`)
+
+    if (isSmallIconAvailable) return { icon: smallId, size: undefined }
+
+    return { icon, size: 12 }
+  })
+
+  const iconSize = $derived(
+    initialIconSize === 'auto' || !initialIconSize ? autoIconSize : initialIconSize,
+  )
 
   const button = tv({
     base: 'flex items-center cursor-pointer gap-2 rounded-md',
@@ -212,8 +227,8 @@
     className,
   )}
 >
-  {#if icon}
-    <Svg id={icon} w={iconSize} h={iconHeight} illus={iconIllus} />
+  {#if sizedIcon}
+    <Svg id={sizedIcon} w={iconSize} h={iconHeight} illus={iconIllus} />
   {/if}
 
   {#if children}

src/lib/ui/core/Input/UniversalInput.svelte

@@ -45,7 +45,7 @@
     as,
     placeholder = '',
     icon,
-    iconSize = 12,
+    iconSize,
     disabled,
     left,
     right,

src/lib/ui/core/Svg/Svg.svelte

@@ -3,11 +3,21 @@
 
   import { cn } from '$ui/utils/index.js'
 
-  let { id, class: className = '', w = 16, h = w, illus = false, style = '' }: TProps = $props()
+  const { id, class: className = '', w, h, illus = false, style = '' }: TProps = $props()
+
+  const defaultWidth = getSizeFromId()
+
+  const width = $derived(w ?? defaultWidth)
+  const height = $derived(h ?? width)
+
+  function getSizeFromId() {
+    const size = Number(id.split('-').at(-1))
+    return Number.isFinite(size) ? size : 16
+  }
 </script>
 
 <svg
-  style="width:{w}px;height:{h}px;min-width:{w}px;{style}"
+  style="width:{width}px;height:{height}px;min-width:{width}px;{style}"
   style:--svg-stroke="currentColor"
   class={cn(className)}
 >

src/lib/ui/core/Svg/ids.ts

@@ -0,0 +1,8 @@
+import type { TSvgId } from './types.js'
+
+// Replace in build time
+const AVAILABLE_IDS = [] as TSvgId[]
+
+const SVG_IDS = new Set<TSvgId>(AVAILABLE_IDS)
+
+export const checkSvgIdAvailable = (id: string) => SVG_IDS.has(id)

src/lib/ui/core/Svg/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Svg.svelte'
 export type { TSvgId } from './types.js'
+export { checkSvgIdAvailable } from './ids.js'

src/stories/Design System - Core UI/Input/index.svelte

@@ -8,9 +8,9 @@
 
     <Input placeholder="Placeholder"></Input>
 
-    <Input icon="search"></Input>
+    <Input icon="search-12"></Input>
 
-    <Input icon="search">
+    <Input icon="search-12">
       {#snippet left()}
         left
       {/snippet}
@@ -26,7 +26,7 @@
       {/snippet}
     </Input>
 
-    <Input icon="search" disabled>
+    <Input icon="search-12" disabled>
       {#snippet left()}
         left
       {/snippet}