[create]publish v0.2.0

packages/create-stdf/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-stdf",
-	"version": "0.1.2",
+	"version": "0.2.0",
 	"description": "A CLI for creating new STDF projects",
 	"bin": {
 		"create-stdf": "index.js"
@@ -36,7 +36,8 @@
 		"stdf",
 		"cli",
 		"mobile",
-		"vite"
+		"vite",
+		"iconify"
 	],
 	"author": "any-tdf",
 	"funding": "https://stdf.design?fund",

packages/create-stdf/scripts/update.js

@@ -5,9 +5,15 @@ import { exec } from 'node:child_process';
 // Encapsulate the function, pass in the version number, the key value of devDependencies in package.json that needs to be modified, the file path that needs to be modified, and directly modify package.json and rewrite
 const updatePackageJson = (version, key, path) => {
 	const packageJson = JSON.parse(fs.readFileSync(path, 'utf-8'));
-	packageJson.devDependencies[key] = `^${version}`;
-	fs.writeFileSync(path, JSON.stringify(packageJson, null, 4));
-	console.log(`🎉 ${path} 更新成功`);
+	// 如果 packageJson.devDependencies 中有 key 值，则更新为最新版本
+	// If packageJson.devDependencies has the key value, update it to the latest version
+	if (packageJson.devDependencies[key]) {
+		packageJson.devDependencies[key] = `^${version}`;
+		fs.writeFileSync(path, JSON.stringify(packageJson, null, 4));
+		console.log(`🎉 ${path} 的 ${key} 更新成功`);
+	} else {
+		console.log(`⚠️  ${path} 中没有 ${key} 依赖`);
+	}
 };
 
 // 获取 stdf 最新版本

packages/create-stdf/src/index.js

@@ -61,10 +61,19 @@ lang = argvLanguage && languages.find(item => item.value === argvLanguage) ? lan
 // 模板列表
 // Template list
 const templateOptions = [
-	{ value: 'sktt', label: 'SvelteKit + Tailwind + TypeScript', template: 'sktt', finish: true },
-	{ value: 'skt', label: 'SvelteKit + Tailwind', template: 'skt', finish: true },
-	{ value: 'skut', label: 'SvelteKit + UnoCSS + TypeScript', template: 'skut', finish: false },
-	{ value: 'sku', label: 'SvelteKit + UnoCSS', template: 'sku', finish: false },
+	{ value: 'sktts', label: 'SvelteKit & Tailwind & TypeScript & stdf-icon', template: 'sktts', finish: true },
+	{ value: 'skts', label: 'SvelteKit & Tailwind & stdf-icon', template: 'skts', finish: true },
+	{ value: 'sktti', label: 'SvelteKit & Tailwind & TypeScript & iconify', template: 'sktti', finish: true },
+	{ value: 'skti', label: 'SvelteKit & Tailwind & iconify', template: 'skti', finish: true },
+	{ value: 'skttsi', label: 'SvelteKit & Tailwind & TypeScript & stdf-icon & iconify', template: 'skttsi', finish: true },
+	{ value: 'sktsi', label: 'SvelteKit & Tailwind & stdf-icon & iconify', template: 'sktsi', finish: true },
+
+	{ value: 'skuts', label: 'SvelteKit & UnoCSS & TypeScript & stdf-icon', template: 'skuts', finish: false },
+	{ value: 'skus', label: 'SvelteKit & UnoCSS & stdf-icon', template: 'skus', finish: false },
+	{ value: 'skuti', label: 'SvelteKit & UnoCSS & TypeScript & iconify', template: 'skuti', finish: false },
+	{ value: 'skui', label: 'SvelteKit & UnoCSS & iconify', template: 'skui', finish: false },
+	{ value: 'skutsi', label: 'SvelteKit & UnoCSS & TypeScript & stdf-icon & iconify', template: 'skutsi', finish: false },
+	{ value: 'skusi', label: 'SvelteKit & UnoCSS & stdf-icon & iconify', template: 'skusi', finish: false },
 ];
 
 // 包管理工具列表
@@ -76,8 +85,8 @@ const packageManagerOptions = [
 	{ value: 'yarn', label: 'Yarn', install: 'yarn', dev: 'yarn run dev' },
 ];
 
-// 如果命令行参数中有项目名称，但没有模板名称，直接使用默认模板 skt
-// If there is a project name in the command line parameters, but no template name, use the default template skt directly
+// 如果命令行参数中有项目名称，但没有模板名称，直接使用第一个模板 sktt
+// If there is a project name in the command line parameters, but no template name, use the first template sktt directly
 if (argvProjectName && !argvTemplate) {
 	createFunc(argvProjectName, templateOptions[0]);
 }
@@ -146,12 +155,12 @@ else if (argvProjectName && argvTemplate) {
 			placeholder: 'stdf-project',
 			validate: value => {
 				if (!value) {
-					// 判断是否为空，提示 “项目名称不能为空”
+					// 判断是否为空，提示“项目名称不能为空”
 					// Determine whether it is empty, prompt "Project name cannot be empty"
 					return lang.pncbne;
 				}
 				if (fs.existsSync(value)) {
-					// 判断是否已存在，提示 “项目名称已存在”
+					// 判断是否已存在，提示“项目名称已存在”
 					// Determine whether it already exists, prompt "Project name already exists"
 					return lang.pane;
 				}
@@ -200,7 +209,7 @@ function createFunc(projectName, item, packageManager) {
 
 	fs.mkdirSync(projectDir);
 
-	// 获取模板目录的绝对路径，考虑到 Windows 系统的兼容性, 使用 path.join
+	// 获取模板目录的绝对路径，考虑到 Windows 系统的兼容性，使用 path.join
 	// Get the absolute path of the template directory, considering the compatibility of the Windows system, use path.join
 	// @ts-ignore
 	const templatePath = path.resolve(fileURLToPath(import.meta.url), '../..', `templates/${item.template}`);

packages/create-stdf/templates/skt/.npmrc

@@ -1 +0,0 @@
-engine-strict=true

packages/create-stdf/templates/skt/src/lib/symbol/ri-arrow-left-s-line.svg

@@ -1 +0,0 @@
-<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/skt/src/lib/symbol/ri-arrow-right-s-line.svg

@@ -1 +0,0 @@
-<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/skt/README.md → packages/create-stdf/templates/skti/README.md

@@ -8,6 +8,14 @@ This template should help get you started developing with Svelte + Tailwind + ST
 
 - [WebStorm](https://www.jetbrains.com/webstorm/) + [Svelte](https://www.jetbrains.com/help/webstorm/svelte.html) + [Tailwind](https://www.jetbrains.com/help/webstorm/tailwind-css.html) + [STDF](https://stdf.design) .
 
+## Install and run project
+
+```bash
+npm i
+
+npm run dev
+```
+
 ## 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/skti/package.json

@@ -0,0 +1,41 @@
+{
+	"name": "skt",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.9",
+		"@eslint/js": "^9.27.0",
+		"@iconify-json/bitcoin-icons": "^1.2.2",
+		"@iconify-json/duo-icons": "^1.2.2",
+		"@iconify-json/fluent-color": "^1.2.12",
+		"@iconify/tailwind4": "^1.0.6",
+		"@sveltejs/adapter-auto": "^6.0.1",
+		"@sveltejs/kit": "^2.21.1",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@tailwindcss/vite": "^4.1.7",
+		"eslint": "^9.27.0",
+		"eslint-config-prettier": "^10.1.5",
+		"eslint-plugin-svelte": "^3.9.0",
+		"globals": "^16.2.0",
+		"prettier": "^3.5.3",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"svelte": "^5.33.3",
+		"svelte-check": "^4.2.1",
+		"stdf": "file:../../../stdf",
+		"tailwindcss": "^4.1.7",
+		"typescript": "^5.8.3",
+		"vite": "^6.3.5"
+	}
+}

packages/create-stdf/templates/skti/src/app.css

@@ -0,0 +1,71 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@plugin "@iconify/tailwind4" {
+	prefixes: duo-icons, bitcoin-icons, fluent-color;
+}
+
+@theme {
+	--color-primary-50: oklch(0.979 0.01 267.36);
+	--color-primary-100: oklch(0.95 0.024 270.343);
+	--color-primary-200: oklch(0.847 0.074 271.188);
+	--color-primary-300: oklch(0.741 0.13 272.232);
+	--color-primary-400: oklch(0.634 0.193 271.595);
+	--color-primary-500: oklch(0.536 0.252 268.66);
+	--color-primary: oklch(0.467 0.296 264.886);
+	--color-primary-700: oklch(0.397 0.26 264.877);
+	--color-primary-800: oklch(0.331 0.221 264.833);
+	--color-primary-900: oklch(0.26 0.178 264.428);
+	--color-primary-950: oklch(0.192 0.13 266.64);
+
+	--color-dark-50: oklch(0.995 0.012 101.474);
+	--color-dark-100: oklch(0.986 0.025 97.107);
+	--color-dark-200: oklch(0.965 0.059 95.884);
+	--color-dark-300: oklch(0.938 0.089 92.952);
+	--color-dark-400: oklch(0.91 0.114 89.711);
+	--color-dark-500: oklch(0.88 0.136 86.375);
+	--color-dark: oklch(0.845 0.153 80.597);
+	--color-dark-700: oklch(0.71 0.137 75.734);
+	--color-dark-800: oklch(0.58 0.118 70.166);
+	--color-dark-900: oklch(0.449 0.097 65.209);
+	--color-dark-950: oklch(0.321 0.074 62.379);
+
+	--color-primaryBlack: oklch(0.116 0.054 267.087);
+	--color-primaryWhite: oklch(0.961 0.001 286.375);
+	--color-darkBlack: oklch(0.183 0.035 86.634);
+	--color-darkWhite: oklch(0.962 0.001 17.178);
+
+	--color-success: oklch(0.704 0.142 167.084);
+	--color-warning: oklch(0.558 0.154 47.186);
+	--color-error: oklch(0.564 0.223 28.46);
+	--color-info: oklch(0.482 0.14 261.518);
+
+	--color-extend0: oklch(0.703 0.149 235.059);
+	--color-Twitter: oklch(0.703 0.149 235.059);
+	--color-extend1: oklch(0.702 0.194 38.137);
+	--color-Svelte: oklch(0.702 0.194 38.137);
+	--color-extend2: oklch(0.482 0.107 161.212);
+	--color-Starbucks: oklch(0.482 0.107 161.212);
+
+	--color-black: oklch(0 0 0);
+	--color-white: oklch(1 0 0);
+	--color-gray-50: oklch(0.961 0 0);
+	--color-gray-100: oklch(0.925 0 0);
+	--color-gray-200: oklch(0.845 0 0);
+	--color-gray-300: oklch(0.767 0 0);
+	--color-gray-400: oklch(0.683 0 0);
+	--color-gray-500: oklch(0.6 0 0);
+	--color-gray-600: oklch(0.51 0 0);
+	--color-gray-700: oklch(0.42 0 0);
+	--color-gray-800: oklch(0.321 0 0);
+	--color-gray-900: oklch(0.218 0 0);
+	--color-gray-950: oklch(0.159 0 0);
+	--color-transparent: transparent;
+}
+
+@source "../node_modules/stdf/**/*.svelte";
+
+html {
+	-webkit-tap-highlight-color: transparent;
+}

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

@@ -0,0 +1,171 @@
+<script>
+	import { setContext } from 'svelte';
+	import { Button, Cell, Icon, Calendar } from 'stdf';
+	import { STDFTheme, switchTheme, darkMode } from 'stdf/theme';
+	import NintendoTheme from '../data/nintendo';
+	import { en_US, zh_CN } from 'stdf/lang';
+	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 mode = $state(sessionStorage.getItem('mode') === 'dark' ? 'dark' : 'light');
+
+	$effect(() => {
+		if (mode === 'dark') {
+			darkMode(true);
+		} else {
+			darkMode(false);
+		}
+	});
+	const toggleModeFun = () => {
+		if (mode === 'dark') {
+			// 切换到 (light switch to light)
+			mode = 'light';
+			darkMode(false);
+			sessionStorage.setItem('mode', 'light');
+		} else {
+			// 切换到 (dark switch to dark)
+			mode = 'dark';
+			darkMode(true);
+			sessionStorage.setItem('mode', 'dark');
+		}
+	};
+
+	// 设置语言 (setting language)
+	let lang = $state(localStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN');
+	setContext('STDF_lang', localStorage.getItem('lang') === 'en_US' ? en_US : zh_CN);
+	const toggleLangFun = () => {
+		lang = lang === 'zh_CN' ? 'en_US' : 'zh_CN';
+		localStorage.setItem('lang', lang);
+		window.location.reload();
+	};
+
+	// 进度条 (percent)
+	let percent = $state(20);
+	const reduceFunc = () => {
+		if (percent > 0) {
+			percent -= 10;
+		}
+	};
+	const increaseFunc = () => {
+		if (percent < 100) {
+			percent += 10;
+		}
+	};
+
+	// 日历(calendar)
+	let visible = $state(false);
+
+	// 主题(theme)
+	let theme = $state('STDF');
+	const toggleThemeFun = () => {
+		if (theme === 'STDF') {
+			theme = 'Nintendo';
+			switchTheme(NintendoTheme);
+		} else {
+			theme = 'STDF';
+			switchTheme(STDFTheme);
+		}
+	};
+</script>
+
+<div class="flex items-center justify-center gap-2 pt-10 text-center">
+	<a class="flex w-10 flex-col items-center" href="https://kit.svelte.dev" target="_blank" rel="noreferrer">
+		<img src="/svelte.svg" alt="Svelte Logo" />
+	</a>+
+	<a class="flex w-10 flex-col items-center" href="https://tailwindcss.com" target="_blank" rel="noreferrer">
+		<img src="/tailwindcss.svg" alt="Tailwind Logo" />
+	</a>+
+	<a class="flex w-8 flex-col items-center" href="https://stdf.design" target="_blank" rel="noreferrer" aria-label="STDF Logo">
+		<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="my-6 text-center text-xs">
+	{#if lang === 'zh_CN'}
+		<p>这是 SvelteKit + Tailwind + 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-6">
+	<a href="about">
+		<Cell title={lang === 'zh_CN' ? '跳转 ABOUT' : 'Go to ABOUT'} />
+	</a>
+</div>
+<div class="my-6">
+	<Cell
+		title={lang === 'zh_CN' ? '暗模式' : 'Dark mode'}
+		right={{ type: 'switch', switch: { active: mode === 'dark' } }}
+		onclick={toggleModeFun}
+	/>
+</div>
+<div class="mt-8">
+	<Counter bind:percent />
+</div>
+<div class="mb-8">
+	<Button heightIn="0" group fill="lineTheme">
+		<div class="flex w-full">
+			<button class="border-primary dark:border-dark flex-1 border-r py-2 active:opacity-80" onclick={reduceFunc}>-10</button>
+			<button class="border-primary dark:border-dark flex-1 border-r py-2 active:opacity-80" onclick={increaseFunc}>+10</button>
+			<button class="flex-1 py-2 active:opacity-80" onclick={() => (percent = 20)}>
+				{lang === 'zh_CN' ? '重置' : 'Reset'}
+			</button>
+		</div>
+	</Button>
+</div>
+<div class="my-6">
+	<Button fill="lineTheme" onclick={() => (visible = true)}>{lang === 'zh_CN' ? '日历' : 'Calendar'}</Button>
+</div>
+<Calendar bind:visible />
+<div class="my-6 flex justify-between px-8">
+	<Icon type="iconify" name="duo-icons--cake" />
+	<Icon type="iconify" name="duo-icons--brush" theme />
+	<Icon type="iconify" name="bitcoin-icons--miner-filled" theme />
+	<Icon type="iconify" name="bitcoin-icons--magic-wand-outline" theme />
+	<Icon type="iconify-color" name="fluent-color--building-store-20" />
+</div>
+<div class="px-4 text-xs">
+	{#if lang === 'zh_CN'}
+		<p>
+			以上图标使用 <a class="underline" href="https://iconify.design" target="_blank">Iconify</a> 方式：
+		</p>
+		<p class="mt-2">
+			第一与第二个来自
+			<a class="underline" href="https://icon-sets.iconify.design/duo-icons/" target="_blank">duo-icons</a>，第三与第四个来自
+			<a class="underline" href="https://icon-sets.iconify.design/bitcoin-icons/" target="_blank">bitcoin-icons</a>，最后一个来自
+			<a class="underline" href="https://icon-sets.iconify.design/fluent-color/" target="_blank">fluent-color</a>。
+		</p>
+	{:else}
+		<p>
+			The above icons use <a class="underline" href="https://iconify.design" target="_blank">Iconify</a> way:
+		</p>
+		<p class="mt-2">
+			The first and second come from
+			<a class="underline" href="https://icon-sets.iconify.design/duo-icons/" target="_blank">duo-icons</a>，the third and fourth come from
+			<a class="underline" href="https://icon-sets.iconify.design/bitcoin-icons/" target="_blank">bitcoin-icons</a>，the last one comes from
+			<a class="underline" href="https://icon-sets.iconify.design/fluent-color/" target="_blank">fluent-color</a>.
+		</p>
+	{/if}
+</div>
+<div class="my-6">
+	<Button onclick={toggleLangFun}>{lang === 'zh_CN' ? '切换语言' : 'Toggle language'}</Button>
+	<Button fill="lineTheme" onclick={toggleThemeFun}>{lang === 'zh_CN' ? '切换主题' : 'Toggle theme'}</Button>
+</div>

packages/create-stdf/templates/skti/static/symbols/Heroicons.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="cake" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8.25v-1.5m0 1.5q-2.033 0-4.024.166C6.845 8.51 6 9.473 6 10.608v2.513m6-4.87q2.033 0 4.024.165C17.155 8.51 18 9.473 18 10.608v2.513m-3-4.87v-1.5m-6 1.5v-1.5m12 9.75-1.5.75a3.35 3.35 0 0 1-3 0 3.35 3.35 0 0 0-3 0 3.35 3.35 0 0 1-3 0 3.35 3.35 0 0 0-3 0 3.35 3.35 0 0 1-3 0L3 16.5m15-3.38a48.5 48.5 0 0 0-6-.37q-3.05.001-6 .37m12 0q.585.073 1.163.16c1.07.16 1.837 1.094 1.837 2.175v5.17c0 .62-.504 1.124-1.125 1.124H4.125A1.125 1.125 0 0 1 3 20.625v-5.17c0-1.08.768-2.014 1.837-2.174A48 48 0 0 1 6 13.12m6.265-10.01a.375.375 0 1 1-.53 0L12 2.845zm-3 0a.375.375 0 1 1-.53 0L9 2.845zm6 0a.375.375 0 1 1-.53 0L15 2.845z"/></symbol></svg>

packages/create-stdf/templates/skti/static/symbols/IconPark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="cup" viewBox="0 0 49 48" fill="none"><path stroke="currentColor" stroke-width="4" d="M8.778 17.012c0-.559.453-1.012 1.012-1.012h23.976c.559 0 1.012.453 1.012 1.012V31c0 7.18-5.82 13-13 13s-13-5.82-13-13z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M8.778 23h26v8h-26zM21.778 4v6M13.778 6v2M29.778 6v2"/><path stroke="currentColor" stroke-linecap="round" stroke-width="4" d="M34.778 34a7 7 0 1 0 0-14"/></symbol></svg>

packages/create-stdf/templates/skti/static/symbols/Remix.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="javascript-fill" viewBox="0 0 24 24"><path d="M6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zm7.334 13.055q1.08.87 2.156.858.66 0 1.012-.242a.75.75 0 0 0 .341-.66.97.97 0 0 0-.34-.748q-.352-.307-1.332-.616-1.177-.34-1.815-.88-.626-.54-.638-1.507 0-.913.792-1.529.77-.616 1.97-.616 1.672 0 2.683.814l-.77 1.199a2.6 2.6 0 0 0-.935-.462 3.2 3.2 0 0 0-.946-.165q-.57 0-.913.209-.34.21-.34.55 0 .374.417.638.42.254 1.43.561 1.221.363 1.738.968t.517 1.54q0 .957-.737 1.65-.726.682-2.112.715-1.815 0-3.036-1.089zm-5.53.638q.352.22.847.22.517 0 .858-.297.34-.308.341-1.067v-5.302h1.485v5.588q-.033 1.298-.748 1.87a2.5 2.5 0 0 1-.891.484 3.3 3.3 0 0 1-.935.143q-.825 0-1.463-.286-.682-.307-1.144-1.089l1.034-.847q.285.385.616.583"/></symbol><symbol id="riding-line" viewBox="0 0 24 24"><path d="M5.5 21a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9m0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m13 2a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9m0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m-7.477-8.695L13 12v6h-2v-5l-2.719-2.266A2 2 0 0 1 8 7.671l2.828-2.828a2 2 0 0 1 2.829 0l1.414 1.414a6.97 6.97 0 0 0 3.917 1.975l-.01 2.015a8.96 8.96 0 0 1-5.321-2.575zM16 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4"/></symbol><symbol id="spy-line" viewBox="0 0 24 24"><path d="M17 13a4 4 0 1 1-4 4h-2a4 4 0 1 1-.535-2h3.07A4 4 0 0 1 17 13M7 15a2 2 0 1 0 0 4 2 2 0 0 0 0-4m10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4M16 3a4 4 0 0 1 4 4v3h2v2H2v-2h2V7a4 4 0 0 1 4-4zm0 2H8c-1.054 0-2 .95-2 2v3h12V7c0-1.054-.95-2-2-2"/></symbol></svg>

packages/create-stdf/templates/skti/vite.config.js

@@ -0,0 +1,7 @@
+import tailwindcss from '@tailwindcss/vite';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [tailwindcss(), sveltekit()]
+});

packages/create-stdf/templates/skts/README.md

@@ -0,0 +1,21 @@
+# SvelteKit + Tailwind + STDF
+
+This template should help get you started developing with Svelte + Tailwind + STDF in SvelteKit.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tailwind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) + [STDF](https://stdf.design) .
+
+- [WebStorm](https://www.jetbrains.com/webstorm/) + [Svelte](https://www.jetbrains.com/help/webstorm/svelte.html) + [Tailwind](https://www.jetbrains.com/help/webstorm/tailwind-css.html) + [STDF](https://stdf.design) .
+
+## Install and run project
+
+```bash
+npm i
+
+npm run dev
+```
+
+## 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/skts/eslint.config.js

@@ -0,0 +1,26 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default [
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: {
+			globals: { ...globals.browser, ...globals.node }
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.js'],
+		languageOptions: { parserOptions: { svelteConfig } }
+	}
+];

packages/create-stdf/templates/skt/package.json → packages/create-stdf/templates/skts/package.json

@@ -14,25 +14,25 @@
 		"lint": "prettier --check . && eslint ."
 	},
 	"devDependencies": {
-		"@eslint/compat": "^1.2.5",
-		"@eslint/js": "^9.18.0",
-		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/kit": "^2.16.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"@tailwindcss/vite": "^4.0.0",
-		"eslint": "^9.18.0",
-		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^3.0.0",
-		"globals": "^16.0.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
+		"@eslint/compat": "^1.2.9",
+		"@eslint/js": "^9.27.0",
+		"@sveltejs/adapter-auto": "^6.0.1",
+		"@sveltejs/kit": "^2.21.1",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@tailwindcss/vite": "^4.1.7",
+		"eslint": "^9.27.0",
+		"eslint-config-prettier": "^10.1.5",
+		"eslint-plugin-svelte": "^3.9.0",
+		"globals": "^16.2.0",
+		"prettier": "^3.5.3",
+		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"rollup-plugin-stdf-icon": "file:../../../rollup-plugin-stdf-icon",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
+		"svelte": "^5.33.3",
+		"svelte-check": "^4.2.1",
 		"stdf": "file:../../../stdf",
-		"tailwindcss": "^4.0.0",
-		"typescript": "^5.0.0",
-		"vite": "^6.0.0"
+		"tailwindcss": "^4.1.7",
+		"typescript": "^5.8.3",
+		"vite": "^6.3.5"
 	}
 }

packages/create-stdf/templates/skts/src/app.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<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 + Tailwind + STDF</title>
+		%sveltekit.head%
+	</head>
+
+	<body data-sveltekit-preload-data="hover" class="bg-primaryWhite dark:bg-darkBlack text-black dark:text-white">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

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

@@ -0,0 +1,7 @@
+<script>
+	import '../app.css';
+
+	let { children } = $props();
+</script>
+
+{@render children()}

packages/create-stdf/templates/skt/src/routes/+page.svelte → packages/create-stdf/templates/skts/src/routes/+page.svelte

@@ -143,12 +143,31 @@
 	<Icon name="cup" theme path="symbols/IconPark.svg" />
 </div>
 <div class="px-4 text-xs">
-	{lang === 'zh_CN' ? '图标：第一个来自' : 'Icons: The first one comes from'}
-	<a class="underline" href="https://heroicons.com">Heroicons</a>
-	，{lang === 'zh_CN' ? '最后一个来自' : 'the last one comes from'}
-	<a class="underline" href="https://iconpark.oceanengine.com">IconPark</a>
-	，{lang === 'zh_CN' ? '其余来自' : 'the rest come from'}
-	<a class="underline" href="https://remixicon.com">Remix Icon</a> 。
+	{#if lang === 'zh_CN'}
+		<p>
+			以上图标通过 <a class="underline" href="https://www.npmjs.com/package/rollup-plugin-stdf-icon" target="_blank">
+				rollup-plugin-stdf-icon
+			</a> 使用 SVG Sprites 方式：
+		</p>
+		<p class="mt-2">
+			第一个来自
+			<a class="underline" href="https://heroicons.com" target="_blank">Heroicons</a>，最后一个来自
+			<a class="underline" href="https://iconpark.oceanengine.com" target="_blank">IconPark</a>，其余来自
+			<a class="underline" href="https://remixicon.com" target="_blank">Remix Icon</a>。
+		</p>
+	{:else}
+		<p>
+			The above icons use <a class="underline" href="https://www.npmjs.com/package/rollup-plugin-stdf-icon" target="_blank">
+				rollup-plugin-stdf-icon
+			</a> way:
+		</p>
+		<p class="mt-2">
+			The first one comes from
+			<a class="underline" href="https://heroicons.com" target="_blank">Heroicons</a>，the last one comes from
+			<a class="underline" href="https://iconpark.oceanengine.com" target="_blank">IconPark</a>，the rest come from
+			<a class="underline" href="https://remixicon.com" target="_blank">Remix Icon</a>.
+		</p>
+	{/if}
 </div>
 <div class="my-6">
 	<Button onclick={toggleLangFun}>{lang === 'zh_CN' ? '切换语言' : 'Toggle language'}</Button>

packages/create-stdf/templates/skts/src/routes/Counter.svelte

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

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

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

packages/create-stdf/templates/skts/static/symbols/Heroicons.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="cake" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8.25v-1.5m0 1.5q-2.033 0-4.024.166C6.845 8.51 6 9.473 6 10.608v2.513m6-4.87q2.033 0 4.024.165C17.155 8.51 18 9.473 18 10.608v2.513m-3-4.87v-1.5m-6 1.5v-1.5m12 9.75-1.5.75a3.35 3.35 0 0 1-3 0 3.35 3.35 0 0 0-3 0 3.35 3.35 0 0 1-3 0 3.35 3.35 0 0 0-3 0 3.35 3.35 0 0 1-3 0L3 16.5m15-3.38a48.5 48.5 0 0 0-6-.37q-3.05.001-6 .37m12 0q.585.073 1.163.16c1.07.16 1.837 1.094 1.837 2.175v5.17c0 .62-.504 1.124-1.125 1.124H4.125A1.125 1.125 0 0 1 3 20.625v-5.17c0-1.08.768-2.014 1.837-2.174A48 48 0 0 1 6 13.12m6.265-10.01a.375.375 0 1 1-.53 0L12 2.845zm-3 0a.375.375 0 1 1-.53 0L9 2.845zm6 0a.375.375 0 1 1-.53 0L15 2.845z"/></symbol></svg>

packages/create-stdf/templates/skts/static/symbols/IconPark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="cup" viewBox="0 0 49 48" fill="none"><path stroke="currentColor" stroke-width="4" d="M8.778 17.012c0-.559.453-1.012 1.012-1.012h23.976c.559 0 1.012.453 1.012 1.012V31c0 7.18-5.82 13-13 13s-13-5.82-13-13z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M8.778 23h26v8h-26zM21.778 4v6M13.778 6v2M29.778 6v2"/><path stroke="currentColor" stroke-linecap="round" stroke-width="4" d="M34.778 34a7 7 0 1 0 0-14"/></symbol></svg>

packages/create-stdf/templates/skts/static/symbols/Remix.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="javascript-fill" viewBox="0 0 24 24"><path d="M6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zm7.334 13.055q1.08.87 2.156.858.66 0 1.012-.242a.75.75 0 0 0 .341-.66.97.97 0 0 0-.34-.748q-.352-.307-1.332-.616-1.177-.34-1.815-.88-.626-.54-.638-1.507 0-.913.792-1.529.77-.616 1.97-.616 1.672 0 2.683.814l-.77 1.199a2.6 2.6 0 0 0-.935-.462 3.2 3.2 0 0 0-.946-.165q-.57 0-.913.209-.34.21-.34.55 0 .374.417.638.42.254 1.43.561 1.221.363 1.738.968t.517 1.54q0 .957-.737 1.65-.726.682-2.112.715-1.815 0-3.036-1.089zm-5.53.638q.352.22.847.22.517 0 .858-.297.34-.308.341-1.067v-5.302h1.485v5.588q-.033 1.298-.748 1.87a2.5 2.5 0 0 1-.891.484 3.3 3.3 0 0 1-.935.143q-.825 0-1.463-.286-.682-.307-1.144-1.089l1.034-.847q.285.385.616.583"/></symbol><symbol id="riding-line" viewBox="0 0 24 24"><path d="M5.5 21a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9m0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m13 2a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9m0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m-7.477-8.695L13 12v6h-2v-5l-2.719-2.266A2 2 0 0 1 8 7.671l2.828-2.828a2 2 0 0 1 2.829 0l1.414 1.414a6.97 6.97 0 0 0 3.917 1.975l-.01 2.015a8.96 8.96 0 0 1-5.321-2.575zM16 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4"/></symbol><symbol id="spy-line" viewBox="0 0 24 24"><path d="M17 13a4 4 0 1 1-4 4h-2a4 4 0 1 1-.535-2h3.07A4 4 0 0 1 17 13M7 15a2 2 0 1 0 0 4 2 2 0 0 0 0-4m10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4M16 3a4 4 0 0 1 4 4v3h2v2H2v-2h2V7a4 4 0 0 1 4-4zm0 2H8c-1.054 0-2 .95-2 2v3h12V7c0-1.054-.95-2-2-2"/></symbol></svg>

packages/create-stdf/templates/skts/svelte.config.js

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

packages/create-stdf/templates/skt/vite.config.js → packages/create-stdf/templates/skts/vite.config.js

@@ -12,10 +12,7 @@ export default defineConfig({
 		svgSprite([
 			{ inFile: 'src/lib/svgs/Heroicons', outFile: 'static/symbols' },
 			{ inFile: 'src/lib/svgs/IconPark', outFile: 'static/symbols' },
-			{ inFile: 'src/lib/svgs/Remix', outFile: 'static/symbols' },
-			// 单独为 Cell 与 NavBar 用到的图标创建一个 symbol。详见：https://stdf.design/guide/icon
-			// Create a symbol for the icons used by Cell and NavBar. See: https://stdf.design/guide/icon
-			{ inFile: 'src/lib/symbol', outFile: 'static/fonts' }
+			{ inFile: 'src/lib/svgs/Remix', outFile: 'static/symbols' }
 		])
 	]
 });

packages/create-stdf/templates/sktsi/.prettierignore

@@ -0,0 +1,6 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb

packages/create-stdf/templates/sktsi/.prettierrc

@@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 140,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

packages/create-stdf/templates/sktsi/README.md

@@ -0,0 +1,21 @@
+# SvelteKit + Tailwind + STDF
+
+This template should help get you started developing with Svelte + Tailwind + STDF in SvelteKit.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tailwind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) + [STDF](https://stdf.design) .
+
+- [WebStorm](https://www.jetbrains.com/webstorm/) + [Svelte](https://www.jetbrains.com/help/webstorm/svelte.html) + [Tailwind](https://www.jetbrains.com/help/webstorm/tailwind-css.html) + [STDF](https://stdf.design) .
+
+## Install and run project
+
+```bash
+npm i
+
+npm run dev
+```
+
+## 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/sktsi/eslint.config.js

@@ -0,0 +1,26 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default [
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: {
+			globals: { ...globals.browser, ...globals.node }
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.js'],
+		languageOptions: { parserOptions: { svelteConfig } }
+	}
+];

packages/create-stdf/templates/sktsi/jsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

packages/create-stdf/templates/sktsi/package.json

@@ -0,0 +1,42 @@
+{
+	"name": "skt",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.9",
+		"@eslint/js": "^9.27.0",
+		"@iconify-json/bitcoin-icons": "^1.2.2",
+		"@iconify-json/duo-icons": "^1.2.2",
+		"@iconify-json/fluent-color": "^1.2.12",
+		"@iconify/tailwind4": "^1.0.6",
+		"@sveltejs/adapter-auto": "^6.0.1",
+		"@sveltejs/kit": "^2.21.1",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@tailwindcss/vite": "^4.1.7",
+		"eslint": "^9.27.0",
+		"eslint-config-prettier": "^10.1.5",
+		"eslint-plugin-svelte": "^3.9.0",
+		"globals": "^16.2.0",
+		"prettier": "^3.5.3",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"rollup-plugin-stdf-icon": "file:../../../rollup-plugin-stdf-icon",
+		"svelte": "^5.33.3",
+		"svelte-check": "^4.2.1",
+		"stdf": "file:../../../stdf",
+		"tailwindcss": "^4.1.7",
+		"typescript": "^5.8.3",
+		"vite": "^6.3.5"
+	}
+}

packages/create-stdf/templates/sktsi/src/app.css

@@ -0,0 +1,72 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@plugin "@iconify/tailwind4" {
+	prefixes: duo-icons, bitcoin-icons, fluent-color;
+}
+
+@theme {
+	--color-primary-50: oklch(0.979 0.01 267.36);
+	--color-primary-100: oklch(0.95 0.024 270.343);
+	--color-primary-200: oklch(0.847 0.074 271.188);
+	--color-primary-300: oklch(0.741 0.13 272.232);
+	--color-primary-400: oklch(0.634 0.193 271.595);
+	--color-primary-500: oklch(0.536 0.252 268.66);
+	--color-primary: oklch(0.467 0.296 264.886);
+	--color-primary-700: oklch(0.397 0.26 264.877);
+	--color-primary-800: oklch(0.331 0.221 264.833);
+	--color-primary-900: oklch(0.26 0.178 264.428);
+	--color-primary-950: oklch(0.192 0.13 266.64);
+
+	--color-dark-50: oklch(0.995 0.012 101.474);
+	--color-dark-100: oklch(0.986 0.025 97.107);
+	--color-dark-200: oklch(0.965 0.059 95.884);
+	--color-dark-300: oklch(0.938 0.089 92.952);
+	--color-dark-400: oklch(0.91 0.114 89.711);
+	--color-dark-500: oklch(0.88 0.136 86.375);
+	--color-dark: oklch(0.845 0.153 80.597);
+	--color-dark-700: oklch(0.71 0.137 75.734);
+	--color-dark-800: oklch(0.58 0.118 70.166);
+	--color-dark-900: oklch(0.449 0.097 65.209);
+	--color-dark-950: oklch(0.321 0.074 62.379);
+
+	--color-primaryBlack: oklch(0.116 0.054 267.087);
+	--color-primaryWhite: oklch(0.961 0.001 286.375);
+	--color-darkBlack: oklch(0.183 0.035 86.634);
+	--color-darkWhite: oklch(0.962 0.001 17.178);
+
+	--color-success: oklch(0.704 0.142 167.084);
+	--color-warning: oklch(0.558 0.154 47.186);
+	--color-error: oklch(0.564 0.223 28.46);
+	--color-info: oklch(0.482 0.14 261.518);
+
+	--color-extend0: oklch(0.703 0.149 235.059);
+	--color-Twitter: oklch(0.703 0.149 235.059);
+	--color-extend1: oklch(0.702 0.194 38.137);
+	--color-Svelte: oklch(0.702 0.194 38.137);
+	--color-extend2: oklch(0.482 0.107 161.212);
+	--color-Starbucks: oklch(0.482 0.107 161.212);
+
+	--color-black: oklch(0 0 0);
+	--color-white: oklch(1 0 0);
+	--color-gray-50: oklch(0.961 0 0);
+	--color-gray-100: oklch(0.925 0 0);
+	--color-gray-200: oklch(0.845 0 0);
+	--color-gray-300: oklch(0.767 0 0);
+	--color-gray-400: oklch(0.683 0 0);
+	--color-gray-500: oklch(0.6 0 0);
+	--color-gray-600: oklch(0.51 0 0);
+	--color-gray-700: oklch(0.42 0 0);
+	--color-gray-800: oklch(0.321 0 0);
+	--color-gray-900: oklch(0.218 0 0);
+	--color-gray-950: oklch(0.159 0 0);
+	--color-transparent: transparent;
+}
+
+
+@source "../node_modules/stdf/**/*.svelte";
+
+html {
+	-webkit-tap-highlight-color: transparent;
+}

packages/create-stdf/templates/sktsi/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

packages/create-stdf/templates/sktsi/src/app.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<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 + Tailwind + STDF</title>
+		%sveltekit.head%
+	</head>
+
+	<body data-sveltekit-preload-data="hover" class="bg-primaryWhite dark:bg-darkBlack text-black dark:text-white">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

packages/create-stdf/templates/sktsi/src/data/nintendo.ts

@@ -0,0 +1,59 @@
+import type { ThemeProps } from 'stdf/theme';
+
+const Nintendo: ThemeProps = {
+	name: 'Nintendo',
+	color: {
+		primary: {
+			50: 'oklch(0.98 0.01 25.073)', // #FFF6F5 hsl(6, 100%, 98%)
+			100: 'oklch(0.953 0.023 24.126)', // #FFEAE8 hsl(5, 100%, 96%)
+			200: 'oklch(0.845 0.076 21.796)', // #FAB9B6 hsl(3, 87%, 85%)
+			300: 'oklch(0.745 0.133 21.872)', // #F58886 hsl(1, 85%, 74%)
+			400: 'oklch(0.662 0.188 22.749)', // #F0575A hsl(359, 84%, 64%)
+			500: 'oklch(0.609 0.224 25.256)', // #EB2B34 hsl(357, 83%, 55%)
+			default: 'oklch(0.581 0.238 27.862)', // #E60012 hsl(355, 100%, 45%)
+			700: 'oklch(0.508 0.207 26.549)', // #C00016 hsl(353, 100%, 38%)
+			800: 'oklch(0.43 0.174 24.608)', // #990017 hsl(351, 100%, 30%)
+			900: 'oklch(0.351 0.141 21.971)', // #730015 hsl(349, 100%, 23%)
+			950: 'oklch(0.266 0.107 17.45)' // #4D0011 hsl(347, 100%, 15%)
+		},
+		dark: {
+			50: 'oklch(0.992 0.011 189.833)', // #F5FFFE hsl(174, 100%, 98%)
+			100: 'oklch(0.983 0.024 193.6)', // #E8FFFE hsl(177, 100%, 96%)
+			200: 'oklch(0.938 0.067 196.074)', // #B6F9F9 hsl(180, 85%, 85%)
+			300: 'oklch(0.893 0.099 198.69)', // #85F0F4 hsl(182, 84%, 74%)
+			400: 'oklch(0.847 0.12 201.806)', // #57E4EE hsl(184, 82%, 64%)
+			500: 'oklch(0.803 0.131 206.757)', // #2AD6E9 hsl(186, 81%, 54%)
+			default: 'oklch(0.752 0.133 215.123)', // #00C3E3 hsl(189, 100%, 45%)
+			700: 'oklch(0.646 0.116 218.359)', // #009EBD hsl(190, 100%, 37%)
+			800: 'oklch(0.535 0.1 223.819)', // #007998 hsl(192, 100%, 30%)
+			900: 'oklch(0.426 0.083 227.589)', // #005772 hsl(194, 100%, 22%)
+			950: 'oklch(0.319 0.064 230.58)' // #00384D hsl(196, 100%, 15%)
+		},
+		primaryBlack: 'oklch(0.139 0.05 18.003)', // #190103 hsl(355, 95%, 5%)
+		primaryWhite: 'oklch(0.962 0.001 17.178)', // #F3F2F2 hsl(355, 5%, 95%)
+		darkBlack: 'oklch(0.184 0.03 206.812)', // #011619 hsl(188, 95%, 5%)
+		darkWhite: 'oklch(0.963 0.001 197.138)', // #F2F3F3 hsl(188, 5%, 95%)
+		functional: {
+			success: 'oklch(0.669 0.214 144.385)', // #00b42a hsl(134, 100%, 35%)
+			warning: 'oklch(0.865 0.176 95.103)', // #f7d00c hsl(50, 94%, 51%)
+			error: 'oklch(0.642 0.218 25.88)', // #f53f3f hsl(0, 90%, 60%)
+			info: 'oklch(0.549 0.249 263.048)' // #165dff hsl(222, 100%, 54%)
+		},
+		extend: [
+			{
+				color: 'oklch(0.492 0.217 261.351)', // #0052d9 hsl(217, 100%, 43%)
+				alias: 'Tencent'
+			},
+			{
+				color: 'oklch(0.651 0.212 142.608)', // #1aad19 hsl(120, 75%, 39%)
+				alias: 'WeChat'
+			},
+			{
+				color: 'oklch(0.692 0.181 46.213)', // #f37021 hsl(23, 90%, 54%)
+				alias: 'Hermès'
+			}
+		]
+	}
+};
+
+export default Nintendo;

packages/create-stdf/templates/sktsi/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/sktsi/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/sktsi/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/sktsi/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/sktsi/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/sktsi/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/sktsi/src/routes/+layout.svelte

@@ -0,0 +1,7 @@
+<script>
+	import '../app.css';
+
+	let { children } = $props();
+</script>
+
+{@render children()}

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

@@ -0,0 +1,205 @@
+<script>
+	import { setContext } from 'svelte';
+	import { Button, Cell, Icon, Calendar } from 'stdf';
+	import { STDFTheme, switchTheme, darkMode } from 'stdf/theme';
+	import NintendoTheme from '../data/nintendo';
+	import { en_US, zh_CN } from 'stdf/lang';
+	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 mode = $state(sessionStorage.getItem('mode') === 'dark' ? 'dark' : 'light');
+
+	$effect(() => {
+		if (mode === 'dark') {
+			darkMode(true);
+		} else {
+			darkMode(false);
+		}
+	});
+	const toggleModeFun = () => {
+		if (mode === 'dark') {
+			// 切换到 (light switch to light)
+			mode = 'light';
+			darkMode(false);
+			sessionStorage.setItem('mode', 'light');
+		} else {
+			// 切换到 (dark switch to dark)
+			mode = 'dark';
+			darkMode(true);
+			sessionStorage.setItem('mode', 'dark');
+		}
+	};
+
+	// 设置语言 (setting language)
+	let lang = $state(localStorage.getItem('lang') === 'en_US' ? 'en_US' : 'zh_CN');
+	setContext('STDF_lang', localStorage.getItem('lang') === 'en_US' ? en_US : zh_CN);
+	const toggleLangFun = () => {
+		lang = lang === 'zh_CN' ? 'en_US' : 'zh_CN';
+		localStorage.setItem('lang', lang);
+		window.location.reload();
+	};
+
+	// 进度条 (percent)
+	let percent = $state(20);
+	const reduceFunc = () => {
+		if (percent > 0) {
+			percent -= 10;
+		}
+	};
+	const increaseFunc = () => {
+		if (percent < 100) {
+			percent += 10;
+		}
+	};
+
+	// 日历(calendar)
+	let visible = $state(false);
+
+	// 主题(theme)
+	let theme = $state('STDF');
+	const toggleThemeFun = () => {
+		if (theme === 'STDF') {
+			theme = 'Nintendo';
+			switchTheme(NintendoTheme);
+		} else {
+			theme = 'STDF';
+			switchTheme(STDFTheme);
+		}
+	};
+</script>
+
+<div class="flex items-center justify-center gap-2 pt-10 text-center">
+	<a class="flex w-10 flex-col items-center" href="https://kit.svelte.dev" target="_blank" rel="noreferrer">
+		<img src="/svelte.svg" alt="Svelte Logo" />
+	</a>+
+	<a class="flex w-10 flex-col items-center" href="https://tailwindcss.com" target="_blank" rel="noreferrer">
+		<img src="/tailwindcss.svg" alt="Tailwind Logo" />
+	</a>+
+	<a class="flex w-8 flex-col items-center" href="https://stdf.design" target="_blank" rel="noreferrer" aria-label="STDF Logo">
+		<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="my-6 text-center text-xs">
+	{#if lang === 'zh_CN'}
+		<p>这是 SvelteKit + Tailwind + 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-6">
+	<a href="about">
+		<Cell title={lang === 'zh_CN' ? '跳转 ABOUT' : 'Go to ABOUT'} />
+	</a>
+</div>
+<div class="my-6">
+	<Cell
+		title={lang === 'zh_CN' ? '暗模式' : 'Dark mode'}
+		right={{ type: 'switch', switch: { active: mode === 'dark' } }}
+		onclick={toggleModeFun}
+	/>
+</div>
+<div class="mt-8">
+	<Counter bind:percent />
+</div>
+<div class="mb-8">
+	<Button heightIn="0" group fill="lineTheme">
+		<div class="flex w-full">
+			<button class="border-primary dark:border-dark flex-1 border-r py-2 active:opacity-80" onclick={reduceFunc}>-10</button>
+			<button class="border-primary dark:border-dark flex-1 border-r py-2 active:opacity-80" onclick={increaseFunc}>+10</button>
+			<button class="flex-1 py-2 active:opacity-80" onclick={() => (percent = 20)}>
+				{lang === 'zh_CN' ? '重置' : 'Reset'}
+			</button>
+		</div>
+	</Button>
+</div>
+<div class="my-6">
+	<Button fill="lineTheme" onclick={() => (visible = true)}>{lang === 'zh_CN' ? '日历' : 'Calendar'}</Button>
+</div>
+<Calendar bind:visible />
+<div class="my-6 flex justify-between px-8">
+	<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">
+	{#if lang === 'zh_CN'}
+		<p>
+			以上图标通过 <a class="underline" href="https://www.npmjs.com/package/rollup-plugin-stdf-icon" target="_blank">
+				rollup-plugin-stdf-icon
+			</a> 使用 SVG Sprites 方式：
+		</p>
+		<p class="mt-2">
+			第一个来自
+			<a class="underline" href="https://heroicons.com" target="_blank">Heroicons</a>，最后一个来自
+			<a class="underline" href="https://iconpark.oceanengine.com" target="_blank">IconPark</a>，其余来自
+			<a class="underline" href="https://remixicon.com" target="_blank">Remix Icon</a>。
+		</p>
+	{:else}
+		<p>
+			The above icons use <a class="underline" href="https://www.npmjs.com/package/rollup-plugin-stdf-icon" target="_blank">
+				rollup-plugin-stdf-icon
+			</a> way:
+		</p>
+		<p class="mt-2">
+			The first one comes from
+			<a class="underline" href="https://heroicons.com" target="_blank">Heroicons</a>，the last one comes from
+			<a class="underline" href="https://iconpark.oceanengine.com" target="_blank">IconPark</a>，the rest come from
+			<a class="underline" href="https://remixicon.com" target="_blank">Remix Icon</a>.
+		</p>
+	{/if}
+</div>
+<div class="my-6 flex justify-between px-8">
+	<Icon type="iconify" name="duo-icons--cake" />
+	<Icon type="iconify" name="duo-icons--brush" theme />
+	<Icon type="iconify" name="bitcoin-icons--miner-filled" theme />
+	<Icon type="iconify" name="bitcoin-icons--magic-wand-outline" theme />
+	<Icon type="iconify-color" name="fluent-color--building-store-20" />
+</div>
+<div class="px-4 text-xs">
+	{#if lang === 'zh_CN'}
+		<p>
+			以上图标使用 <a class="underline" href="https://iconify.design" target="_blank">Iconify</a> 方式：
+		</p>
+		<p class="mt-2">
+			第一与第二个来自
+			<a class="underline" href="https://icon-sets.iconify.design/duo-icons/" target="_blank">duo-icons</a>，第三与第四个来自
+			<a class="underline" href="https://icon-sets.iconify.design/bitcoin-icons/" target="_blank">bitcoin-icons</a>，最后一个来自
+			<a class="underline" href="https://icon-sets.iconify.design/fluent-color/" target="_blank">fluent-color</a>。
+		</p>
+	{:else}
+		<p>
+			The above icons use <a class="underline" href="https://iconify.design" target="_blank">Iconify</a> way:
+		</p>
+		<p class="mt-2">
+			The first and second come from
+			<a class="underline" href="https://icon-sets.iconify.design/duo-icons/" target="_blank">duo-icons</a>，the third and fourth come from
+			<a class="underline" href="https://icon-sets.iconify.design/bitcoin-icons/" target="_blank">bitcoin-icons</a>，the last one comes from
+			<a class="underline" href="https://icon-sets.iconify.design/fluent-color/" target="_blank">fluent-color</a>.
+		</p>
+	{/if}
+</div>
+<div class="my-6">
+	<Button onclick={toggleLangFun}>{lang === 'zh_CN' ? '切换语言' : 'Toggle language'}</Button>
+	<Button fill="lineTheme" onclick={toggleThemeFun}>{lang === 'zh_CN' ? '切换主题' : 'Toggle theme'}</Button>
+</div>

packages/create-stdf/templates/sktsi/src/routes/Counter.svelte

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

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

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

packages/create-stdf/templates/sktsi/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/sktsi/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/sktsi/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/sktsi/static/symbols/Heroicons.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="cake" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8.25v-1.5m0 1.5q-2.033 0-4.024.166C6.845 8.51 6 9.473 6 10.608v2.513m6-4.87q2.033 0 4.024.165C17.155 8.51 18 9.473 18 10.608v2.513m-3-4.87v-1.5m-6 1.5v-1.5m12 9.75-1.5.75a3.35 3.35 0 0 1-3 0 3.35 3.35 0 0 0-3 0 3.35 3.35 0 0 1-3 0 3.35 3.35 0 0 0-3 0 3.35 3.35 0 0 1-3 0L3 16.5m15-3.38a48.5 48.5 0 0 0-6-.37q-3.05.001-6 .37m12 0q.585.073 1.163.16c1.07.16 1.837 1.094 1.837 2.175v5.17c0 .62-.504 1.124-1.125 1.124H4.125A1.125 1.125 0 0 1 3 20.625v-5.17c0-1.08.768-2.014 1.837-2.174A48 48 0 0 1 6 13.12m6.265-10.01a.375.375 0 1 1-.53 0L12 2.845zm-3 0a.375.375 0 1 1-.53 0L9 2.845zm6 0a.375.375 0 1 1-.53 0L15 2.845z"/></symbol></svg>

packages/create-stdf/templates/sktsi/static/symbols/IconPark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="cup" viewBox="0 0 49 48" fill="none"><path stroke="currentColor" stroke-width="4" d="M8.778 17.012c0-.559.453-1.012 1.012-1.012h23.976c.559 0 1.012.453 1.012 1.012V31c0 7.18-5.82 13-13 13s-13-5.82-13-13z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M8.778 23h26v8h-26zM21.778 4v6M13.778 6v2M29.778 6v2"/><path stroke="currentColor" stroke-linecap="round" stroke-width="4" d="M34.778 34a7 7 0 1 0 0-14"/></symbol></svg>

packages/create-stdf/templates/sktsi/static/symbols/Remix.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="javascript-fill" viewBox="0 0 24 24"><path d="M6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zm7.334 13.055q1.08.87 2.156.858.66 0 1.012-.242a.75.75 0 0 0 .341-.66.97.97 0 0 0-.34-.748q-.352-.307-1.332-.616-1.177-.34-1.815-.88-.626-.54-.638-1.507 0-.913.792-1.529.77-.616 1.97-.616 1.672 0 2.683.814l-.77 1.199a2.6 2.6 0 0 0-.935-.462 3.2 3.2 0 0 0-.946-.165q-.57 0-.913.209-.34.21-.34.55 0 .374.417.638.42.254 1.43.561 1.221.363 1.738.968t.517 1.54q0 .957-.737 1.65-.726.682-2.112.715-1.815 0-3.036-1.089zm-5.53.638q.352.22.847.22.517 0 .858-.297.34-.308.341-1.067v-5.302h1.485v5.588q-.033 1.298-.748 1.87a2.5 2.5 0 0 1-.891.484 3.3 3.3 0 0 1-.935.143q-.825 0-1.463-.286-.682-.307-1.144-1.089l1.034-.847q.285.385.616.583"/></symbol><symbol id="riding-line" viewBox="0 0 24 24"><path d="M5.5 21a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9m0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m13 2a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9m0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m-7.477-8.695L13 12v6h-2v-5l-2.719-2.266A2 2 0 0 1 8 7.671l2.828-2.828a2 2 0 0 1 2.829 0l1.414 1.414a6.97 6.97 0 0 0 3.917 1.975l-.01 2.015a8.96 8.96 0 0 1-5.321-2.575zM16 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4"/></symbol><symbol id="spy-line" viewBox="0 0 24 24"><path d="M17 13a4 4 0 1 1-4 4h-2a4 4 0 1 1-.535-2h3.07A4 4 0 0 1 17 13M7 15a2 2 0 1 0 0 4 2 2 0 0 0 0-4m10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4M16 3a4 4 0 0 1 4 4v3h2v2H2v-2h2V7a4 4 0 0 1 4-4zm0 2H8c-1.054 0-2 .95-2 2v3h12V7c0-1.054-.95-2-2-2"/></symbol></svg>

packages/create-stdf/templates/sktsi/static/tailwindcss.svg

@@ -0,0 +1,7 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<title>Tailwind CSS</title>
+	<path
+		fill="#00bcff"
+		d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"
+	/>
+</svg>

packages/create-stdf/templates/sktsi/svelte.config.js

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

packages/create-stdf/templates/sktsi/vite.config.js

@@ -0,0 +1,18 @@
+import tailwindcss from '@tailwindcss/vite';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import svgSprite from 'rollup-plugin-stdf-icon';
+
+export default defineConfig({
+	plugins: [
+		tailwindcss(),
+		sveltekit(),
+		// 一般来说，一个应用的的 svg 不多时都放在一个文件夹下，合并为一个 symbol 即可。此处演示了不同文件夹下的图标如何合并为不同的 symbol。
+		// Generally speaking, when the svg of an application is not much, it is placed in a folder and merged into one symbol. This example shows how the icons in different folders are merged into different symbols.
+		svgSprite([
+			{ inFile: 'src/lib/svgs/Heroicons', outFile: 'static/symbols' },
+			{ inFile: 'src/lib/svgs/IconPark', outFile: 'static/symbols' },
+			{ inFile: 'src/lib/svgs/Remix', outFile: 'static/symbols' }
+		])
+	]
+});

packages/create-stdf/templates/sktt/.npmrc

@@ -1 +0,0 @@
-engine-strict=true

packages/create-stdf/templates/sktt/src/lib/symbol/ri-arrow-left-s-line.svg

@@ -1 +0,0 @@
-<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/sktt/src/lib/symbol/ri-arrow-right-s-line.svg

@@ -1 +0,0 @@
-<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/sktti/.prettierignore

@@ -0,0 +1,6 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb

packages/create-stdf/templates/sktti/.prettierrc

@@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 140,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

packages/create-stdf/templates/sktt/README.md → packages/create-stdf/templates/sktti/README.md

@@ -8,6 +8,14 @@ This template should help get you started developing with Svelte + Tailwind + Ty
 
 - [WebStorm](https://www.jetbrains.com/webstorm/) + [Svelte](https://www.jetbrains.com/help/webstorm/svelte.html) + [Tailwind](https://www.jetbrains.com/help/webstorm/tailwind-css.html) + [TypeScript](https://typescriptlang.org) + [STDF](https://stdf.design) .
 
+## Install and run project
+
+```bash
+npm i
+
+npm run dev
+```
+
 ## More Info
 
 For more information about quickly create a new project, see the STDF [Quick start](https://stdf.design/guide) guide.