rizzo-css 0.0.5 → 0.0.7

package/bin/rizzo-css.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-const { copyFileSync, mkdirSync, writeFileSync, existsSync, readFileSync, readdirSync } = require('fs');
+const { copyFileSync, mkdirSync, writeFileSync, existsSync, readFileSync, readdirSync, statSync } = require('fs');
 const { join, dirname } = require('path');
 const readline = require('readline');
 
@@ -232,6 +232,18 @@ function multiSelectMenu(options, title) {
         render(false);
         return;
       }
+      if (ch === 'a' || ch === 'A') {
+        buf = '';
+        for (let i = 0; i < items.length; i++) selected.add(i);
+        render(false);
+        return;
+      }
+      if (ch === 'n' || ch === 'N') {
+        buf = '';
+        selected.clear();
+        render(false);
+        return;
+      }
       buf += ch;
       const isUp = buf === '\u001b[A' || buf === '\u001bOA' || (buf.length >= 2 && buf.endsWith('A') && buf.startsWith('\u001b'));
       const isDown = buf === '\u001b[B' || buf === '\u001bOB' || (buf.length >= 2 && buf.endsWith('B') && buf.startsWith('\u001b'));
@@ -363,6 +375,33 @@ function getScaffoldVanillaIndex() {
   return join(getPackageRoot(), 'scaffold', 'vanilla', 'index.html');
 }
 
+function getScaffoldVanillaIconsDir() {
+  return join(getPackageRoot(), 'scaffold', 'vanilla', 'icons');
+}
+
+/** Copy Rizzo icons into the project for the given framework. */
+function copyRizzoIcons(projectDir, framework) {
+  if (framework === 'astro') {
+    const iconsSrc = join(getScaffoldAstroDir(), 'icons');
+    if (!existsSync(iconsSrc)) return;
+    const targetDir = join(projectDir, 'src', 'components', 'rizzo', 'icons');
+    mkdirSync(targetDir, { recursive: true });
+    copyDirRecursive(iconsSrc, targetDir);
+  } else if (framework === 'svelte') {
+    const iconsSrc = join(getScaffoldSvelteDir(), 'icons');
+    if (!existsSync(iconsSrc)) return;
+    const targetDir = join(projectDir, 'src', 'lib', 'rizzo', 'icons');
+    mkdirSync(targetDir, { recursive: true });
+    copyDirRecursive(iconsSrc, targetDir);
+  } else if (framework === 'vanilla') {
+    const iconsSrc = getScaffoldVanillaIconsDir();
+    if (!existsSync(iconsSrc)) return;
+    const targetDir = join(projectDir, 'icons');
+    mkdirSync(targetDir, { recursive: true });
+    copyDirRecursive(iconsSrc, targetDir);
+  }
+}
+
 function getScaffoldAstroAppDir() {
   return join(getPackageRoot(), 'scaffold', 'astro-app');
 }
@@ -433,10 +472,14 @@ function copySvelteComponents(projectDir, selectedNames) {
       exports.push(`export { default as ${name} } from './${name}.svelte';`);
     }
   }
+  const iconsSrc = join(scaffoldDir, 'icons');
+  if (existsSync(iconsSrc)) {
+    copyDirRecursive(iconsSrc, join(targetDir, 'icons'));
+  }
   if (exports.length > 0) {
     const indexContent = `/** Rizzo CSS Svelte components — selected via npx rizzo-css init */\n${exports.join('\n')}\n`;
     writeFileSync(join(targetDir, 'index.ts'), indexContent, 'utf8');
-    console.log('\n  ✓ ' + exports.length + ' Svelte components copied to ' + targetDir);
+    console.log('\n  ✓ ' + exports.length + ' Svelte components copied to ' + targetDir + (existsSync(iconsSrc) ? ' + icons' : ''));
     console.log('  Import in your app: import { Button, Badge, ... } from \'$lib/rizzo\';\n');
   }
 }
@@ -527,6 +570,7 @@ async function runAddToExisting() {
   mkdirSync(targetDir, { recursive: true });
   copyFileSync(cssSource, cssTarget);
 
+  copyRizzoIcons(cwd, framework);
   if (framework === 'svelte' && selectedComponents.length > 0) {
     copySvelteComponents(cwd, selectedComponents);
   } else if (framework === 'astro' && selectedComponents.length > 0) {
@@ -649,6 +693,10 @@ async function cmdInit() {
     mkdirSync(join(projectDir, 'public', 'css'), { recursive: true });
     cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
     copyFileSync(cssSource, cssTarget);
+    if (statSync(cssTarget).size < 5000) {
+      console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
+    }
+    copyRizzoIcons(projectDir, 'astro');
     if (selectedComponents.length > 0) {
       copyAstroComponents(projectDir, selectedComponents);
     }
@@ -658,6 +706,10 @@ async function cmdInit() {
     mkdirSync(join(projectDir, 'static', 'css'), { recursive: true });
     cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
     copyFileSync(cssSource, cssTarget);
+    if (statSync(cssTarget).size < 5000) {
+      console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
+    }
+    copyRizzoIcons(projectDir, 'svelte');
     if (selectedComponents.length > 0) {
       copySvelteComponents(projectDir, selectedComponents);
     }
@@ -667,6 +719,9 @@ async function cmdInit() {
     const linkHref = framework === 'astro' ? '/css/rizzo.min.css' : 'css/rizzo.min.css';
     mkdirSync(cssDir, { recursive: true });
     copyFileSync(cssSource, cssTarget);
+    if (statSync(cssTarget).size < 5000) {
+      console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
+    }
 
     const vanillaScaffoldPath = getScaffoldVanillaIndex();
     indexPath = join(projectDir, 'index.html');
@@ -695,6 +750,7 @@ async function cmdInit() {
 `;
       writeFileSync(indexPath, indexHtml, 'utf8');
     }
+    copyRizzoIcons(projectDir, framework);
     if (framework === 'svelte' && selectedComponents.length > 0) {
       copySvelteComponents(projectDir, selectedComponents);
     } else if (framework === 'astro' && selectedComponents.length > 0) {
@@ -707,12 +763,15 @@ async function cmdInit() {
   if (indexPath) console.log('  - ' + indexPath);
   if (framework === 'vanilla') {
     console.log('  - Vanilla JS: same CSS and component styles; index includes theme switcher and sample components.');
+    console.log('  - Icons: ' + join(projectDir, 'icons') + ' (SVG files)');
   }
   if (framework === 'astro' && existsSync(astroAppDir)) {
     console.log('  - Default Astro project with Rizzo CSS. Run: pnpm install && pnpm dev');
+    console.log('  - Icons: src/components/rizzo/icons/ (Astro components)');
   }
   if (framework === 'svelte' && existsSync(svelteAppDir)) {
     console.log('  - Default SvelteKit project with Rizzo CSS. Run: pnpm install && pnpm dev');
+    console.log('  - Icons: src/lib/rizzo/icons/ (Svelte components)');
   }
   if ((framework === 'svelte' || framework === 'astro') && !existsSync(framework === 'astro' ? astroAppDir : svelteAppDir)) {
     const fw = framework === 'svelte' ? 'Svelte' : 'Astro';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm build:css && node scripts/copy-scaffold.js"
   },

package/scaffold/astro-app/package.json

@@ -1,13 +1 @@
-{
-  "name": "{{PROJECT_NAME}}",
-  "type": "module",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview"
-  },
-  "dependencies": {
-    "astro": "^5.0.0"
-  }
-}
+{"name":"{{PROJECT_NAME}}","type":"module","version":"0.0.1","scripts":{"dev":"astro dev","build":"astro build","preview":"astro preview"},"devDependencies":{"astro":"^5.0.0"}}

package/scaffold/astro-app/public/favicon.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <g>
+    <path d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"/>
+  </g>
+  <path fill="url(#a)" d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z"/>
+  <defs>
+    <linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D83333"/>
+      <stop offset="1" stop-color="#F041FF"/>
+    </linearGradient>
+  </defs>
+  <style>
+    g { fill: #000; }
+    @media (prefers-color-scheme: dark) {
+      g { fill: #FFF; }
+    }
+  </style>
+</svg>

package/scaffold/astro-app/src/layouts/Layout.astro

@@ -10,6 +10,8 @@ const { title = '{{TITLE}}' } = Astro.props;
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <!-- Rizzo CSS: full bundle (reset + base + components + themes) -->
     <link rel="stylesheet" href="/css/rizzo.min.css" />
     <title>{title}</title>
   </head>

package/scaffold/svelte/icons/Brush.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={className} aria-hidden="true">
+  <title>Brush</title>
+  <path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08" />
+  <path d="M7.87 14.14c-.32.32-.67.68-1.06 1.06a5.04 5.04 0 0 1-2.17 1.22c-.47.15-.85.2-1.15.2-.16 0-.3-.02-.41-.03a1 1 0 0 1-.63-.97c-.01-.14.02-.31.07-.51.1-.41.3-.95.6-1.59.3-.64.67-1.33 1.08-2.05" />
+</svg>

package/scaffold/svelte/icons/Cake.svelte

@@ -0,0 +1,12 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={className} aria-hidden="true">
+  <title>Cake</title>
+  <path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8" />
+  <path d="M4 16s1-1 4-1 5 2 8 2 4-1 4-1V4" />
+  <path d="M2 16v4M22 16v4M8 8h.01M16 8h.01M8 12h.01M16 12h.01" />
+</svg>

package/scaffold/svelte/icons/Check.svelte

@@ -0,0 +1,22 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Check</title>
+  <path d="M20 6L9 17l-5-5" />
+</svg>

package/scaffold/svelte/icons/Cherry.svelte

@@ -0,0 +1,12 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={className} aria-hidden="true">
+  <title>Cherry</title>
+  <path d="M9 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" />
+  <path d="M15 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" />
+  <path d="M12 8v4M10 10l-2 2M14 10l2 2" />
+</svg>

package/scaffold/svelte/icons/ChevronDown.svelte

@@ -0,0 +1,22 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Chevron Down</title>
+  <path d="m6 9 6 6 6-6" />
+</svg>

package/scaffold/svelte/icons/Circle.svelte

@@ -0,0 +1,22 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Circle</title>
+  <circle cx="12" cy="12" r="10" />
+</svg>

package/scaffold/svelte/icons/Close.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Close</title>
+  <path d="M18 6L6 18" />
+  <path d="M6 6l12 12" />
+</svg>

package/scaffold/svelte/icons/Copy.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Copy</title>
+  <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+  <path d="M4 16c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2" />
+</svg>

package/scaffold/svelte/icons/Eye.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Eye</title>
+  <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+  <circle cx="12" cy="12" r="3" />
+</svg>

package/scaffold/svelte/icons/Filter.svelte

@@ -0,0 +1,22 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Filter</title>
+  <path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" />
+</svg>

package/scaffold/svelte/icons/Flame.svelte

@@ -0,0 +1,22 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Flame</title>
+  <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" />
+</svg>

package/scaffold/svelte/icons/Flower.svelte

@@ -0,0 +1,12 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={className} aria-hidden="true">
+  <title>Flower</title>
+  <circle cx="12" cy="12" r="3" />
+  <path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
+  <path d="M12 5v2M12 17v2M5 12h2M17 12h2" />
+</svg>

package/scaffold/svelte/icons/Gear.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Settings</title>
+  <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+  <circle cx="12" cy="12" r="3" />
+</svg>

package/scaffold/svelte/icons/Heart.svelte

@@ -0,0 +1,22 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Heart</title>
+  <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
+</svg>

package/scaffold/svelte/icons/IceCream.svelte

@@ -0,0 +1,24 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Ice Cream</title>
+  <path d="m7 11 4.08 10.35a1 1 0 0 0 1.84 0L17 11" />
+  <path d="M17 7A5 5 0 0 0 7 7" />
+  <path d="M17 7a2 2 0 0 1 0 4H7a2 2 0 0 1 0-4" />
+</svg>

package/scaffold/svelte/icons/Leaf.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Leaf</title>
+  <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" />
+  <path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" />
+</svg>

package/scaffold/svelte/icons/Lemon.svelte

@@ -0,0 +1,12 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={className} aria-hidden="true">
+  <title>Lemon</title>
+  <path d="M15.5 6.5c.5-2.5 2.5-4 5-4 1.5 0 2.5.5 3 1" />
+  <path d="M12 12c-2 2-3 4-3 6 0 3 2 5 5 5 2 0 4-1 6-3" />
+  <path d="M18 12c2 2 3 4 3 6 0 3-2 5-5 5-2 0-4-1-6-3" />
+</svg>

package/scaffold/svelte/icons/Moon.svelte

@@ -0,0 +1,22 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Moon</title>
+  <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+</svg>

package/scaffold/svelte/icons/Owl.svelte

@@ -0,0 +1,27 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Owl</title>
+  <path d="M16 7h.01" />
+  <path d="M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20" />
+  <path d="m20 7 2 .5-2 .5" />
+  <path d="M10 18v3" />
+  <path d="M14 17.75V21" />
+  <path d="M7 18a6 6 0 0 0 3.84-10.61" />
+</svg>

package/scaffold/svelte/icons/Palette.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Palette</title>
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25"/>
+  <path d="M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/>
+  <path d="M11.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/>
+  <path d="M15.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/>
+</svg>

package/scaffold/svelte/icons/Rainbow.svelte

@@ -0,0 +1,24 @@
+<script>
+  export let width = 16;
+  export let height = 16;
+  export let className = '';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={width}
+  height={height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <title>Rainbow</title>
+  <path d="M22 17a10 10 0 0 0-20 0" />
+  <path d="M6 17a6 6 0 0 1 12 0" />
+  <path d="M10 17a2 2 0 0 1 4 0" />
+</svg>