feat: Introduce a new set of SVG icons, update UnoCSS configuration, refactor icon integration and build scripts.

Author: CatCodeMe

bun.lock

@@ -4,7 +4,7 @@ import eslint from '@eslint/js'
 import eslintPluginAstro from 'eslint-plugin-astro'
 import tseslint from 'typescript-eslint'
 
-/** @type {import('eslint').Linter.FlatConfig[]} */
+/** @type {import('eslint').Linter.Config[]} */
 const config = [
   eslint.configs.recommended,
   ...tseslint.configs.recommended,

eslint.config.mjs

@@ -53,6 +53,7 @@
     "@eslint/js": "^9.39.2",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@iconify-json/mingcute": "^1.2.6",
+    "@types/node": "^25.0.3",
     "eslint": "^9.39.2",
     "eslint-plugin-astro": "^1.5.0",
     "fontmin": "^1.1.1",

package.json

@@ -20,7 +20,6 @@
 </script>
 
 <script>
-  import { Icons } from '../../libs/icons'
   import { listenThemeChange } from '../../utils'
 
   // Listen for theme change event
@@ -31,7 +30,9 @@
     const toast = document.createElement('div')
     toast.className =
       'animate fixed bottom-8 z-20 px-4 py-2 bg-muted text-foreground rounded-lg border shadow-lg flex items-center gap-2'
-    toast.innerHTML = `<svg width='22' height='22' viewBox='0 0 24 24' fill='currentColor'>${Icons.info}</svg> <span>${message}</span>`
+    // Inline info icon to avoid importing large Icons object
+    const infoIcon = '<g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m-.01 6c.558 0 1.01.452 1.01 1.01v5.124A1 1 0 0 1 12.5 18h-.49A1.01 1.01 0 0 1 11 16.99V12a1 1 0 1 1 0-2zM12 7a1 1 0 1 1 0 2a1 1 0 0 1 0-2"/></g>'
+    toast.innerHTML = `<svg width='22' height='22' viewBox='0 0 24 24' fill='currentColor'>${infoIcon}</svg> <span>${message}</span>`
     document.body.appendChild(toast)
     setTimeout(() => {
       toast.remove()

packages/pure/components/basic/ThemeProvider.astro

@@ -1,7 +1,6 @@
 ---
 import { AstroError } from 'astro/errors'
 
-import { Icons } from '../../libs/icons'
 import Icon from './Icon.astro'
 
 const asideVariants = [
@@ -15,9 +14,7 @@ const asideVariants = [
 ] as const
 const asideStyles = ['solid', 'card'] as const
 
-type IconName = keyof typeof Icons
-
-const defaultIcons: Record<(typeof asideVariants)[number], IconName> = {
+const defaultIcons: Record<(typeof asideVariants)[number], string> = {
   important: 'important',
   info: 'callout_info',
   note: 'note',
@@ -58,26 +55,19 @@ if (style && !asideStyles.includes(style)) {
 }
 
 // Determine the icon to render
-let iconToRender: IconName | undefined
+let iconToRender: string | undefined = undefined
 let isEmoji = false
 
 if (icon) {
   // Check if the provided icon is an emoji
   const emojiRegex = /\p{Emoji}/u // Unicode property escape for emoji
   if (emojiRegex.test(icon)) {
-    iconToRender = undefined // Set to undefined if it\'s an emoji, handled by isEmoji
     isEmoji = true
-  } else if (icon in Icons) {
-    iconToRender = icon as IconName
   } else {
-    // Fallback to default icon if provided icon name is not found in Icons
-    console.warn(
-      `Icon "${icon}" not found in icons.ts. Falling back to default icon for type "${type}".`
-    )
-    iconToRender = defaultIcons[type] as IconName
+    iconToRender = icon
   }
 } else {
-  iconToRender = defaultIcons[type] as IconName
+  iconToRender = defaultIcons[type]
 }
 ---
 

packages/pure/components/user/Aside.astro

@@ -1,14 +1,6 @@
 ---
 import { cn } from '../../utils'
 
-interface Props {
-  as?: string
-  title?: string
-  href?: string
-  variant?: 'button' | 'pill' | 'back' | 'ahead'
-  class?: string
-}
-
 const { as: Tag = 'a', class: className, title, href, variant = 'button', ...props } = Astro.props
 ---
 

packages/pure/components/user/Button.astro

@@ -1,8 +1,12 @@
 ---
-import { Icons } from '../../libs/icons'
+const icons = import.meta.glob<string>('/src/icons/*.svg', {
+  query: '?raw',
+  import: 'default',
+  eager: true
+})
 
 interface Props {
-  name: keyof typeof Icons
+  name: string
   label?: string
   color?: string
   size?: string
@@ -12,20 +16,19 @@ interface Props {
 const { name, label, size = '1em', color, class: className, ...props } = Astro.props
 const a11yAttrs = label ? ({ 'aria-label': label } as const) : ({ 'aria-hidden': 'true' } as const)
 
-let svgContent = Icons[name];
-let viewBox = '0 0 24 24'; // Default viewBox
+const svgContentRaw = icons[`/src/icons/${name}.svg`]
+let svgContent = ''
+let viewBox = '0 0 24 24'
 
-// Check if the SVG content starts with an <svg> tag
-if (typeof svgContent === 'string' && svgContent.trim().startsWith('<svg')) {
-  const viewBoxMatch = svgContent.match(/viewBox="([^"]*)"/);
+if (svgContentRaw) {
+  svgContent = svgContentRaw
+  const viewBoxMatch = svgContent.match(/viewBox="([^"]*)"/)
   if (viewBoxMatch && viewBoxMatch[1]) {
-    viewBox = viewBoxMatch[1];
+    viewBox = viewBoxMatch[1]
   }
-
-  // Extract content inside the <svg> tags
-  const contentMatch = svgContent.match(/<svg[^>]*>(.*?)<\/svg>/s);
+  const contentMatch = svgContent.match(/<svg[^>]*>(.*?)<\/svg>/s)
   if (contentMatch && contentMatch[1]) {
-    svgContent = contentMatch[1];
+    svgContent = contentMatch[1]
   }
 }
 ---