[create]Add SvelteKit + UnoCSS template

packages/create-stdf/README.md

@@ -54,7 +54,7 @@ Template presets include:
 | vt           | Vite + Tailwind + Svelte + STDF              | default             |
 | vu           | Vite + UnoCSS + Svelte + STDF                | -                   |
 | skt          | SvelteKit + Tailwind + STDF                  | -                   |
-| sku          | SvelteKit + UnoCSS + STDF                    | Has not adapted yet |
+| sku          | SvelteKit + UnoCSS + STDF                    | -                   |
 | vtt          | Vite + Tailwind + TypeScript + Svelte + STDF | Has not adapted yet |
 | vut          | Vite + UnoCSS + TypeScript + Svelte + STDF   | Has not adapted yet |
 | sktt         | SvelteKit + Tailwind + TypeScript + STDF     | Has not adapted yet |

packages/create-stdf/README_CN.md

@@ -53,7 +53,7 @@ npm create stdf@latest my-app -t vu
 | vt   | Vite + Tailwind + Svelte + STDF              | 默认     |
 | vu   | Vite + UnoCSS + Svelte + STDF                | -        |
 | skt  | SvelteKit + Tailwind + STDF                  | -        |
-| sku  | SvelteKit + UnoCSS + STDF                    | 尚未适配 |
+| sku  | SvelteKit + UnoCSS + STDF                    | -        |
 | vtt  | Vite + Tailwind + TypeScript + Svelte + STDF | 尚未适配 |
 | vut  | Vite + UnoCSS + TypeScript + Svelte + STDF   | 尚未适配 |
 | sktt | SvelteKit + Tailwind + TypeScript + STDF     | 尚未适配 |

packages/create-stdf/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-stdf",
-    "version": "0.0.39",
+    "version": "0.0.40",
     "description": "A CLI for creating new STDF projects",
     "bin": {
         "create-stdf": "index.js"

packages/create-stdf/scripts/update.js

@@ -24,9 +24,11 @@ const updatePackageJson = (version, key, path) => {
 updatePackageJson(version, 'stdf', 'templates/vite-tailwind/package.json');
 updatePackageJson(version, 'stdf', 'templates/vite-uno/package.json');
 updatePackageJson(version, 'stdf', 'templates/sveltekit-tailwind/package.json');
+updatePackageJson(version, 'stdf', 'templates/sveltekit-uno/package.json');
 
 // 更新模板中的 package.json 的 rollup-plugin-stdf-icon 版本号
 // Update the rollup-plugin-stdf-icon version number in the template package.json
 updatePackageJson(iconVersion, 'rollup-plugin-stdf-icon', 'templates/vite-tailwind/package.json');
 updatePackageJson(iconVersion, 'rollup-plugin-stdf-icon', 'templates/vite-uno/package.json');
-updatePackageJson(iconVersion, 'rollup-plugin-stdf-icon', 'templates/sveltekit-tailwind/package.json');
+updatePackageJson(iconVersion, 'rollup-plugin-stdf-icon', 'templates/sveltekit-tailwind/package.json');
+updatePackageJson(iconVersion, 'rollup-plugin-stdf-icon', 'templates/sveltekit-uno/package.json');

packages/create-stdf/src/index.js

@@ -55,7 +55,7 @@ const templateOptionsStart = [
     { value: 'vt', label: 'Vite + Tailwind', template: 'vite-tailwind', pcyt: lang.pcyt_vt },
     { value: 'vu', label: 'Vite + UnoCSS', template: 'vite-uno', pcyt: lang.pcyt_vu },
     { value: 'skt', label: 'SvelteKit + Tailwind', template: 'sveltekit-tailwind', pcyt: lang.pcyt_vt },
-    { value: 'sku', label: `SvelteKit + UnoCSS(${lang.hnay})`, template: 'sveltekit-uno', pcyt: lang.pcyt_vu },
+    { value: 'sku', label: 'SvelteKit + UnoCSS', template: 'sveltekit-uno', pcyt: lang.pcyt_vu },
     { value: 'vtt', label: `Vite + Tailwind + TypeScript(${lang.hnay})`, template: 'vite-tailwind-typescript', pcyt: lang.pcyt_vt },
     { value: 'vut', label: `Vite + UnoCSS + TypeScript(${lang.hnay})`, template: 'vite-uno-typescript', pcyt: lang.pcyt_vu },
     {
@@ -106,7 +106,7 @@ else if (argvProjectName && argvTemplate) {
         { value: 'vt', label: 'Vite + Tailwind', template: 'vite-tailwind', pcyt: lang.pcyt_vt },
         { value: 'vu', label: 'Vite + UnoCSS', template: 'vite-uno', pcyt: lang.pcyt_vu },
         { value: 'skt', label: 'SvelteKit + Tailwind', template: 'sveltekit-tailwind', pcyt: lang.pcyt_vt },
-        { value: 'sku', label: `SvelteKit + UnoCSS(${lang.hnay})`, template: 'sveltekit-uno', pcyt: lang.pcyt_vu },
+        { value: 'sku', label: 'SvelteKit + UnoCSS', template: 'sveltekit-uno', pcyt: lang.pcyt_vu },
         { value: 'vtt', label: `Vite + Tailwind + TypeScript(${lang.hnay})`, template: 'vite-tailwind-typescript', pcyt: lang.pcyt_vt },
         { value: 'vut', label: `Vite + UnoCSS + TypeScript(${lang.hnay})`, template: 'vite-uno-typescript', pcyt: lang.pcyt_vu },
         {
@@ -125,9 +125,9 @@ else if (argvProjectName && argvTemplate) {
         options: templateOptions,
     });
 
-    // 直到选择的 template 是 vt / vu 为止，否则一直重新选择
+    // 直到选择的 template 是 vt / vu / skt / sku 为止，否则一直重新选择
     // Until the selected template is vt or vu, otherwise keep reselecting
-    while (template !== 'vt' && template !== 'vu' && template !== 'skt') {
+    while ((template !== 'vt' && template !== 'vu' && template !== 'skt') || template !== 'sku') {
         if (p.isCancel(template)) {
             p.cancel(red('⛔ ') + lang.oc);
             process.exit(0);

packages/create-stdf/templates/sveltekit-tailwind/src/routes/+page.svelte

@@ -16,9 +16,6 @@
         });
     }
 
-    // import svelteLogo from '/svelte.svg';
-    // import tailwindLogo from '/tailwindcss.svg';
-
     //切换亮暗模式(toggle light or dark mode)
     let theme = sessionStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
     if (theme === 'dark') {

packages/create-stdf/templates/sveltekit-tailwind/static/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

packages/create-stdf/templates/sveltekit-uno/README.md

@@ -0,0 +1,13 @@
+# SvelteKit + UnoCSS + STDF
+
+This template should help get you started developing with Svelte + UnoCSS + STDF in SvelteKit.
+
+## Recommended IDE Setup
+
+-   [VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) + [STDF](https://stdf.design) .
+
+-   [WebStorm](https://www.jetbrains.com/webstorm/) + [Svelte](https://www.jetbrains.com/help/webstorm/svelte.html) + [UnoCSS](https://plugins.jetbrains.com/plugin/22204-unocss) + [STDF](https://stdf.design) .
+
+## More Info
+
+For more information about quickly create a new project, see the STDF [Quick start](https://stdf.design/#/guide) guide.

packages/create-stdf/templates/sveltekit-uno/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "kit",
+    "version": "0.0.1",
+    "scripts": {
+        "dev": "vite dev",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "devDependencies": {
+        "@fontsource/fira-mono": "^4.5.10",
+        "@neoconfetti/svelte": "^1.0.0",
+        "@sveltejs/adapter-auto": "^2.0.0",
+        "@sveltejs/kit": "^1.20.4",
+        "@unocss/extractor-svelte": "^0.54.2",
+        "@unocss/reset": "^0.54.2",
+        "rollup-plugin-stdf-icon": "file:../../../rollup-plugin-stdf-icon",
+        "stdf": "file:../../../stdf",
+        "svelte": "^4.1.1",
+        "unocss": "^0.53.6",
+        "vite": "^4.4.6"
+    },
+    "type": "module"
+}

packages/create-stdf/templates/sveltekit-uno/src/app.css

@@ -0,0 +1,6 @@
+:root {
+    --un-default-border-color: currentColor;
+}
+html {
+    -webkit-tap-highlight-color: transparent;
+}

packages/create-stdf/templates/sveltekit-uno/src/app.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/stdf.svg" media="(prefers-color-scheme: light)" />
+	<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/stdf_dark.svg"
+		media="(prefers-color-scheme: dark)" />
+	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+	<title>SvelteKit + UnoCSS + STDF</title>
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover" class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90">
+	<main style="display: contents">
+		%sveltekit.body%
+	</main>
+</body>
+
+</html>

packages/create-stdf/templates/sveltekit-uno/src/lib/icons/ri-arrow-left-s-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg>

packages/create-stdf/templates/sveltekit-uno/src/lib/icons/ri-arrow-right-s-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z"></path></svg>

packages/create-stdf/templates/sveltekit-uno/src/lib/svgs/Heroicons/cake.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8.25v-1.5m0 1.5c-1.355 0-2.697.056-4.024.166C6.845 8.51 6 9.473 6 10.608v2.513m6-4.87c1.355 0 2.697.055 4.024.165C17.155 8.51 18 9.473 18 10.608v2.513m-3-4.87v-1.5m-6 1.5v-1.5m12 9.75l-1.5.75a3.354 3.354 0 01-3 0 3.354 3.354 0 00-3 0 3.354 3.354 0 01-3 0 3.354 3.354 0 00-3 0 3.354 3.354 0 01-3 0L3 16.5m15-3.38a48.474 48.474 0 00-6-.37c-2.032 0-4.034.125-6 .37m12 0c.39.049.777.102 1.163.16 1.07.16 1.837 1.094 1.837 2.175v5.17c0 .62-.504 1.124-1.125 1.124H4.125A1.125 1.125 0 013 20.625v-5.17c0-1.08.768-2.014 1.837-2.174A47.78 47.78 0 016 13.12M12.265 3.11a.375.375 0 11-.53 0L12 2.845l.265.265zm-3 0a.375.375 0 11-.53 0L9 2.845l.265.265zm6 0a.375.375 0 11-.53 0L15 2.845l.265.265z" />
+  </svg>
+  

packages/create-stdf/templates/sveltekit-uno/src/lib/svgs/IconPark/cup.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.77783 17.012C8.77783 16.4531 9.23094 16 9.78988 16H33.7658C34.3247 16 34.7778 16.4531 34.7778 17.012V31C34.7778 38.1797 28.9575 44 21.7778 44V44C14.5981 44 8.77783 38.1797 8.77783 31V17.012Z" stroke="#000000" stroke-width="4"/><rect x="8.77783" y="23" width="26" height="8" fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.7778 4V10" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.7778 6V8" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.7778 6V8" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M34.7778 34C38.6438 34 41.7778 30.866 41.7778 27C41.7778 23.134 38.6438 20 34.7778 20" stroke="#000000" stroke-width="4" stroke-linecap="round"/></svg>

packages/create-stdf/templates/sveltekit-uno/src/lib/svgs/Remix/javascript-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM13.3344 16.055C14.0531 16.6343 14.7717 16.9203 15.4904 16.913C15.9304 16.913 16.2677 16.8323 16.5024 16.671C16.7297 16.517 16.8434 16.297 16.8434 16.011C16.8434 15.7177 16.7297 15.4683 16.5024 15.263C16.2677 15.0577 15.8241 14.8523 15.1714 14.647C14.3867 14.4197 13.7817 14.1263 13.3564 13.767C12.9384 13.4077 12.7257 12.9053 12.7184 12.26C12.7184 11.6513 12.9824 11.1417 13.5104 10.731C14.0237 10.3203 14.6801 10.115 15.4794 10.115C16.5941 10.115 17.4887 10.3863 18.1634 10.929L17.3934 12.128C17.1221 11.9153 16.8104 11.7613 16.4584 11.666C16.1064 11.556 15.7911 11.501 15.5124 11.501C15.1311 11.501 14.8267 11.5707 14.5994 11.71C14.3721 11.8493 14.2584 12.0327 14.2584 12.26C14.2584 12.5093 14.3977 12.722 14.6764 12.898C14.9551 13.0667 15.4317 13.2537 16.1064 13.459C16.9204 13.701 17.4997 14.0237 17.8444 14.427C18.1891 14.8303 18.3614 15.3437 18.3614 15.967C18.3614 16.605 18.1157 17.155 17.6244 17.617C17.1404 18.0717 16.4364 18.31 15.5124 18.332C14.3024 18.332 13.2904 17.969 12.4764 17.243L13.3344 16.055ZM7.80405 16.693C8.03872 16.8397 8.32105 16.913 8.65105 16.913C8.99572 16.913 9.28172 16.814 9.50905 16.616C9.73639 16.4107 9.85005 16.055 9.85005 15.549V10.247H11.3351V15.835C11.3131 16.7003 11.0637 17.3237 10.5871 17.705C10.3157 17.9323 10.0187 18.0937 9.69605 18.189C9.37339 18.2843 9.06172 18.332 8.76105 18.332C8.21105 18.332 7.72339 18.2367 7.29805 18.046C6.84339 17.8407 6.46205 17.4777 6.15405 16.957L7.18805 16.11C7.37872 16.3667 7.58405 16.561 7.80405 16.693Z"></path></svg>

packages/create-stdf/templates/sveltekit-uno/src/lib/svgs/Remix/riding-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.5 21C3.01472 21 1 18.9853 1 16.5C1 14.0147 3.01472 12 5.5 12C7.98528 12 10 14.0147 10 16.5C10 18.9853 7.98528 21 5.5 21ZM5.5 19C6.88071 19 8 17.8807 8 16.5C8 15.1193 6.88071 14 5.5 14C4.11929 14 3 15.1193 3 16.5C3 17.8807 4.11929 19 5.5 19ZM18.5 21C16.0147 21 14 18.9853 14 16.5C14 14.0147 16.0147 12 18.5 12C20.9853 12 23 14.0147 23 16.5C23 18.9853 20.9853 21 18.5 21ZM18.5 19C19.8807 19 21 17.8807 21 16.5C21 15.1193 19.8807 14 18.5 14C17.1193 14 16 15.1193 16 16.5C16 17.8807 17.1193 19 18.5 19ZM11.023 10.3054L13 12V18H11V13L8.28117 10.7343C8.18221 10.6661 8.08802 10.588 8 10.5C7.21895 9.71895 7.21895 8.45262 8 7.67157L10.8284 4.84315C11.6095 4.0621 12.8758 4.0621 13.6569 4.84315L15.0711 6.25736C16.1746 7.36086 17.5548 8.01891 18.9884 8.23151L18.978 10.2474C17.0335 10.0218 15.1485 9.16323 13.6569 7.67157L11.023 10.3054ZM16 5C14.8954 5 14 4.10457 14 3C14 1.89543 14.8954 1 16 1C17.1046 1 18 1.89543 18 3C18 4.10457 17.1046 5 16 5Z"></path></svg>

packages/create-stdf/templates/sveltekit-uno/src/lib/svgs/Remix/spy-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 13C19.2091 13 21 14.7909 21 17C21 19.2091 19.2091 21 17 21C14.7909 21 13 19.2091 13 17H11C11 19.2091 9.20914 21 7 21C4.79086 21 3 19.2091 3 17C3 14.7909 4.79086 13 7 13C8.48052 13 9.77317 13.8043 10.4648 14.9999H13.5352C14.2268 13.8043 15.5195 13 17 13ZM7 15C5.89543 15 5 15.8954 5 17C5 18.1046 5.89543 19 7 19C8.10457 19 9 18.1046 9 17C9 15.8954 8.10457 15 7 15ZM17 15C15.8954 15 15 15.8954 15 17C15 18.1046 15.8954 19 17 19C18.1046 19 19 18.1046 19 17C19 15.8954 18.1046 15 17 15ZM16 3C18.2091 3 20 4.79086 20 7V10H22V12H2V10H4V7C4 4.79086 5.79086 3 8 3H16ZM16 5H8C6.94564 5 6 5.95 6 7V10H18V7C18 5.94564 17.05 5 16 5Z"></path></svg>

packages/create-stdf/templates/sveltekit-uno/src/routes/+layout.js

@@ -0,0 +1,3 @@
+// 修改 ssr 为 false ，使其不再使用服务端渲染，而是使用客户端渲染
+// Change ssr to false to use client-side rendering instead of server-side rendering
+export const ssr = false;

packages/create-stdf/templates/sveltekit-uno/src/routes/+layout.svelte

@@ -0,0 +1,7 @@
+<script>
+    import '@unocss/reset/tailwind.css';
+    import 'uno.css';
+    import '../app.css';
+</script>
+
+<slot />

packages/create-stdf/templates/sveltekit-uno/src/routes/+page.svelte

@@ -0,0 +1,126 @@
+<script>
+    import { setContext } from 'svelte';
+    import { Button, Cell, Icon, Calendar } from 'stdf';
+    import en_US from 'stdf/dist/lang/en_US';
+    import zh_CN from 'stdf/dist/lang/zh_CN';
+    import Counter from './Counter.svelte';
+
+    import { browser } from '$app/environment';
+
+    if (browser) {
+        //解决ios不支持按钮:active伪类
+        // Solve the problem that ios does not support the button: active pseudo class
+        document.body.addEventListener('touchstart', function () {
+            //...空函数即可
+            // ... Empty function is OK
+        });
+    }
+
+    //切换亮暗模式(toggle light or dark mode)
+    let theme = sessionStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
+    if (theme === 'dark') {
+        document.documentElement.classList.add('dark');
+    }
+    const toggleModeFun = () => {
+        if (theme === 'dark') {
+            // 切换到(light switch to light)
+            theme = 'light';
+            document.documentElement.classList.remove('dark');
+            sessionStorage.setItem('theme', 'light');
+        } else {
+            // 切换到(dark switch to dark)
+            theme = 'dark';
+            document.documentElement.classList.add('dark');
+            sessionStorage.setItem('theme', 'dark');
+        }
+    };
+
+    // 设置语言(setting language)
+    let lang = sessionStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN';
+    $: isZh = lang === 'zh_CN';
+    setContext('STDF_lang', sessionStorage.getItem('lang') === 'en_US' ? en_US : zh_CN);
+    const toggleLangFun = () => {
+        lang = isZh ? 'en_US' : 'zh_CN';
+        sessionStorage.setItem('lang', isZh ? 'en_US' : 'zh_CN');
+        // 刷新(refresh)
+        location.reload();
+    };
+
+    // 进度条(percent)
+    let percent = 20;
+    const reduceFunc = () => {
+        percent > 0 && (percent -= 10);
+    };
+    const increaseFunc = () => {
+        percent < 100 && (percent += 10);
+    };
+
+    // 日历(calendar)
+    let visible = false;
+</script>
+
+<div class="flex justify-center items-center text-center gap-4 pt-10">
+    <a class="flex flex-col items-center w-10" href="https://kit.svelte.dev" target="_blank" rel="noreferrer">
+        <img src="/svelte.svg" alt="Svelte Logo" />
+    </a>+
+    <a class="flex flex-col items-center w-8" href="https://unocss.dev" target="_blank" rel="noreferrer">
+        <img src="/uno.svg" alt="UnoCSS Logo" />
+    </a>+
+    <a class="flex flex-col items-center w-8" href="https://stdf.design" target="_blank" rel="noreferrer">
+        <svg viewBox="0 0 90 80" fill="currentColor">
+            <path
+                class="text-primary dark:text-dark"
+                d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z"
+            />
+            <path class="text-dark dark:text-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
+        </svg>
+    </a>
+</div>
+<div class="text-center my-8 text-xs">
+    {#if isZh}
+        <p>这是一个使用 SvelteKit + UnoCSS + STDF 构建的模板。</p>
+        <p class="mt-2">点击上方 LOGO 了解更多。</p>
+    {:else}
+        <p>This is a template using SvelteKit + TailwindCSS + STDF.</p>
+        <p class="mt-2">Click the logo above to learn more.</p>
+    {/if}
+</div>
+<div class="my-8">
+    <a href="about">
+        <Cell title={isZh ? '跳转 ABOUT' : 'Go to ABOUT'} />
+    </a>
+</div>
+<div class="my-8">
+    <Cell title={isZh ? '暗模式' : 'Dark mode'} right={{ type: 'switch', switch: { check: theme === 'dark' } }} on:click={toggleModeFun} />
+</div>
+<div class="mt-8">
+    <Counter bind:percent />
+</div>
+<div class="mb-8">
+    <Button heightIn="0" group fill="lineTheme">
+        <div class="flex divide-x">
+            <div class="flex-1 py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
+            <div class="flex-1 py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
+            <div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>{isZh ? '重置' : 'Reset'}</div>
+        </div>
+    </Button>
+</div>
+<div class="my-8">
+    <Button fill="lineTheme" on:click={() => (visible = true)}>{isZh ? '日历' : 'Calendar'}</Button>
+</div>
+<Calendar bind:visible />
+<div class="my-8 px-8 flex justify-between">
+    <Icon name="cake" theme path="symbols/Heroicons.svg" />
+    <Icon name="riding-line" path="symbols/Remix.svg" />
+    <Icon name="spy-line" theme path="symbols/Remix.svg" />
+    <Icon name="javascript-fill" injClass="text-[red] dark:text-green" path="symbols/Remix.svg" />
+    <Icon name="cup" theme path="symbols/IconPark.svg" />
+</div>
+<div class="px-4 text-xs">
+    {isZh ? '图标：第一个来自' : 'Icons: The first one comes from'} <a class="underline" href="https://heroicons.com">Heroicons</a>
+    ，{isZh ? '最后一个来自' : 'the last one comes from'} <a class="underline" href="https://iconpark.oceanengine.com">IconPark</a>
+    ，{isZh ? '其余来自' : 'the rest come from'} <a class="underline" href="https://remixicon.com">Remix Icon</a> 。
+</div>
+<div class="my-8">
+    <Button on:click={toggleLangFun}>{isZh ? '切换语言' : 'Toggle language'}</Button>
+</div>

packages/create-stdf/templates/sveltekit-uno/src/routes/Counter.svelte

@@ -0,0 +1,9 @@
+<script>
+    import { Progress } from 'stdf';
+
+    export let percent = 20;
+</script>
+
+<div class="p-4">
+    <Progress {percent} />
+</div>

packages/create-stdf/templates/sveltekit-uno/src/routes/about/+page.svelte

@@ -0,0 +1,20 @@
+<script>
+    import { NavBar } from 'stdf';
+
+    const lang = sessionStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN';
+    $: isZh = lang === 'zh_CN';
+</script>
+
+<svelte:head>
+    <title>About</title>
+    <meta name="description" content="About this app" />
+</svelte:head>
+
+<div class="sticky z-10 top-0">
+    <NavBar title={isZh ? '关于' : 'ABOUT'} on:clickleft={() => window.history.back()} />
+</div>
+
+<div class="px-2 py-20 text-center space-y-10">
+    <div class="text-3xl text-primary dark:text-dark">{isZh ? '这是一个关于页面' : 'This is a about page'}</div>
+    <div class="text-sm">{isZh ? '仅用于演示 SvelteKit 的路由功能' : "Only for demonstration of SvelteKit's routing functionality"}</div>
+</div>

packages/create-stdf/templates/sveltekit-uno/static/stdf.svg

@@ -0,0 +1,4 @@
+<svg width="90" height="80" viewBox="0 0 90 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z" fill="#0B24FB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 30V0L0 50H20V80L40 30H20Z" fill="#FFC043"/>
+</svg>

packages/create-stdf/templates/sveltekit-uno/static/stdf_dark.svg

@@ -0,0 +1,4 @@
+<svg width="90" height="80" viewBox="0 0 90 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z" fill="#FFC043"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 30V0L0 50H20V80L40 30H20Z" fill="#0B24FB"/>
+</svg>

packages/create-stdf/templates/sveltekit-uno/static/svelte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

packages/create-stdf/templates/sveltekit-uno/static/uno.svg

@@ -0,0 +1,5 @@
+<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M117.444 167.888C117.444 140.273 139.83 117.888 167.444 117.888V117.888C195.058 117.888 217.444 140.273 217.444 167.888V167.888C217.444 195.502 195.058 217.888 167.444 217.888V217.888C139.83 217.888 117.444 195.502 117.444 167.888V167.888Z" fill="#858585"/>
+<path d="M117.444 53C117.444 25.3858 139.83 3 167.444 3V3C195.058 3 217.444 25.3858 217.444 53V98C217.444 100.761 215.205 103 212.444 103H122.444C119.683 103 117.444 100.761 117.444 98V53Z" fill="#CCCCCC"/>
+<path d="M102 167.888C102 195.502 79.6142 217.888 52 217.888V217.888C24.3858 217.888 2 195.502 2 167.888L2.00001 122.888C2.00001 120.126 4.23859 117.888 7.00001 117.888L97 117.888C99.7614 117.888 102 120.126 102 122.888L102 167.888Z" fill="#4D4D4D"/>
+</svg>

packages/create-stdf/templates/sveltekit-uno/svelte.config.js

@@ -0,0 +1,21 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+    kit: {
+        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+        adapter: adapter(),
+    },
+    onwarn: (warning, handler) => {
+        if (warning.code.startsWith('a11y-')) {
+            return;
+        }
+        handler(warning);
+    },
+    preprocess: vitePreprocess(),
+};
+
+export default config;

packages/create-stdf/templates/sveltekit-uno/uno.config.js

@@ -0,0 +1,50 @@
+// uno.config.js
+import { defineConfig, presetUno } from 'unocss';
+
+export default defineConfig({
+    // ...UnoCSS options
+    content: {
+        filesystem: ['./node_modules/stdf/dist/**/*.svelte'],
+    },
+    presets: [presetUno()],
+    theme: {
+        colors: {
+            // 主题色
+            // Theme Color
+            primary: '#0B24FB',
+            dark: '#FFC043',
+            blue: '#0B24FB', // primary 别名 alias
+            yellow: '#FFC043', // dark 别名 alias
+
+            // 扩展色
+            // Extended Color
+            purple: '#7356BF',
+            green: '#05944F',
+            orange: '#FF6937',
+
+            // 功能色
+            // Functional Color
+            success: '#11BB8D',
+            warning: '#B95000',
+            error: '#DA1414',
+            info: '#2E5AAC',
+
+            // 中性色
+            // Neutral Color
+            black: '#000000',
+            white: '#fff',
+            gray1: '#23262B',
+            gray2: '#2A2B2F',
+            gray3: '#303239',
+            gray4: '#373940',
+            gray5: '#414249',
+            gray6: '#747B84',
+            gray7: '#DADEE3',
+            gray8: '#EBEEF2',
+            gray9: '#F4F6F9',
+            gray10: '#FAFAFB',
+            transparent: 'transparent',
+        },
+        extend: {},
+    },
+});

packages/create-stdf/templates/sveltekit-uno/vite.config.js

@@ -0,0 +1,26 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import UnoCSS from 'unocss/vite';
+import extractorSvelte from '@unocss/extractor-svelte';
+import svgSprite from 'rollup-plugin-stdf-icon';
+
+export default defineConfig({
+    plugins: [
+        UnoCSS({
+            extractors: [extractorSvelte()],
+        }),
+        sveltekit({}),
+        // 一般来说，一个应用的所有 svg 都放在一个文件夹下，合并为一个 symbol 即可。
+        // 此处只是为了演示不同文件夹下的图标如何合并为不同的 symbol。
+        // Generally speaking, all of an application svg are placed in a folder and merged into one symbol.
+        // Here is just to show how icons in different folders are merged into different symbols.
+        svgSprite([
+            { inFile: 'src/lib/svgs/Heroicons', outFile: 'static/symbols', fileName: 'Heroicons' },
+            { inFile: 'src/lib/svgs/IconPark', outFile: 'static/symbols', fileName: 'IconPark' },
+            { inFile: 'src/lib/svgs/Remix', outFile: 'static/symbols', fileName: 'Remix' },
+            // 单独为 Cell 与 NavBar 用到的图标创建一个 symbol。详见：https://stdf.design/#/guide?nav=icon
+            // Create a symbol for the icons used by Cell and NavBar. See: https://stdf.design/#/guide?nav=icon
+            { inFile: 'src/lib/icons', outFile: 'static/fonts', fileName: 'symbol' },
+        ]),
+    ],
+});