【create】更新 create-stdf 模板，添加新的 SVG 图标和代码文件，同时删除不再使用的模板文件，优化项目结构。

packages/create-stdf/package.json

@@ -1,18 +1,18 @@
 {
 	"name": "create-stdf",
-	"version": "0.2.3",
+	"version": "0.2.4",
 	"description": "A CLI for creating new STDF projects",
 	"bin": {
 		"create-stdf": "index.js"
 	},
 	"scripts": {
 		"build": "rollup -c",
-		"update": "node scripts/update",
 		"test": "echo \"Error: no test specified\" && exit 1"
 	},
 	"files": [
 		"dist/**",
-		"templates/**"
+		"templates/**",
+		"snippet/**"
 	],
 	"engines": {
 		"node": ">=14.14"
@@ -21,7 +21,8 @@
 		"@clack/prompts": "^0.10.0",
 		"fs-extra": "^11.3.0",
 		"kleur": "^4.1.5",
-		"minimist": "^1.2.8"
+		"minimist": "^1.2.8",
+		"pacote": "^21.0.0"
 	},
 	"devDependencies": {
 		"@rollup/plugin-terser": "^0.4.4",

packages/create-stdf/scripts/update.js

@@ -1,63 +0,0 @@
-import fs from 'node:fs';
-import { exec } from 'node:child_process';
-
-// 封装函数，传入版本号，需要修改的 package.json 中的 devDependencies 的 key 值，需要修改的文件路径，直接修改 package.json 并重新写入
-// 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 值，则更新为最新版本
-	// 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 最新版本
-// Get the latest version of stdf
-exec('npm show stdf version', (error, stdout, stderr) => {
-	if (error) {
-		console.error(`执行命令出错：${error.message}`);
-		return;
-	}
-	if (stderr) {
-		console.error(`命令错误：${stderr}`);
-		return;
-	}
-	const version = stdout.trim();
-	console.log(`👉 stdf 最新版本：${version}`);
-	// 更新模板中的 package.json 的 stdf 版本号
-	// Update the stdf version number in the template package.json
-	updatePackageJson(version, 'stdf', 'templates/skti/package.json');
-	updatePackageJson(version, 'stdf', 'templates/skts/package.json');
-	updatePackageJson(version, 'stdf', 'templates/sktsi/package.json');
-	updatePackageJson(version, 'stdf', 'templates/sktti/package.json');
-	updatePackageJson(version, 'stdf', 'templates/sktts/package.json');
-	updatePackageJson(version, 'stdf', 'templates/skttsi/package.json');
-});
-
-// 获取 rollup-plugin-stdf-icon 最新版本
-// Get the latest version of rollup-plugin-stdf-icon
-exec('npm show rollup-plugin-stdf-icon version', (errorIcon, stdoutIcon, stderrIcon) => {
-	if (errorIcon) {
-		console.error(`执行命令出错：${errorIcon.message}`);
-		return;
-	}
-	if (stderrIcon) {
-		console.error(`命令错误：${stderrIcon}`);
-		return;
-	}
-	const version = stdoutIcon.trim();
-	console.log(`👉 rollup-plugin-stdf-icon 最新版本：${version}`);
-	// 更新模板中的 package.json 的 rollup-plugin-stdf-icon 版本号
-	// Update the rollup-plugin-stdf-icon version number in the template package.json
-	updatePackageJson(version, 'rollup-plugin-stdf-icon', 'templates/skti/package.json');
-	updatePackageJson(version, 'rollup-plugin-stdf-icon', 'templates/skts/package.json');
-	updatePackageJson(version, 'rollup-plugin-stdf-icon', 'templates/sktsi/package.json');
-	updatePackageJson(version, 'rollup-plugin-stdf-icon', 'templates/sktti/package.json');
-	updatePackageJson(version, 'rollup-plugin-stdf-icon', 'templates/sktts/package.json');
-	updatePackageJson(version, 'rollup-plugin-stdf-icon', 'templates/skttsi/package.json');
-});

packages/create-stdf/snippet/iconify.txt

@@ -0,0 +1,30 @@
+<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>

packages/create-stdf/snippet/stdf-icon.txt

@@ -0,0 +1,34 @@
+<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>

packages/create-stdf/templates/skts/vite.config.js → packages/create-stdf/snippet/vite-stdf-icon.txt

@@ -1,8 +1,3 @@
-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(),
@@ -15,4 +10,4 @@ export default defineConfig({
 			{ inFile: 'src/lib/svgs/Remix', outFile: 'static/symbols' }
 		])
 	]
-});
+});

packages/create-stdf/src/index.js

@@ -6,12 +6,12 @@ import { fileURLToPath } from 'node:url';
 import * as p from '@clack/prompts';
 import { bold, cyan, grey, red, blue } from 'kleur/colors';
 import minimist from 'minimist';
+import pacote from 'pacote';
 
 import * as langAll from './lang';
 
 // 获取版本号
 // Get version
-// @ts-ignore
 const { version } = JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url), 'utf-8'));
 
 // 显示版本号
@@ -35,6 +35,7 @@ const argv = minimist(process.argv.slice(2));
 const argvProjectName = argv._[0];
 const argvTemplate = argv.template || argv.t;
 const argvLanguage = argv.language || argv.l;
+const argvIconUsage = argv.iconUsage || argv.i;
 
 // 语言列表
 // Language list
@@ -61,19 +62,10 @@ lang = argvLanguage && languages.find(item => item.value === argvLanguage) ? lan
 // 模板列表
 // Template list
 const templateOptions = [
-	{ 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 },
+	{ 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 },
 ];
 
 // 包管理工具列表
@@ -85,22 +77,57 @@ const packageManagerOptions = [
 	{ value: 'yarn', label: 'Yarn', install: 'yarn', dev: 'yarn run dev' },
 ];
 
-// 如果命令行参数中有项目名称，但没有模板名称，直接使用第一个模板 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]);
+// 图标使用方式列表
+// Icon usage method list
+const iconUsageOptions = [
+	{ value: 'stdf-icon', label: 'rollup-plugin-stdf-icon' },
+	{ value: 'iconify', label: 'iconify' },
+	{ value: 'both', label: 'rollup-plugin-stdf-icon & iconify' },
+	{ value: 'none', label: 'none' },
+];
+
+// 如果命令行参数中仅有项目名称
+// If there is only a project name in the command line parameters
+if (argvProjectName && !argvTemplate && !argvIconUsage) {
+	createFunc(argvProjectName, templateOptions[0], iconUsageOptions[0], packageManagerOptions[0]);
+	process.exit(0);
 }
-// 如果命令行参数中有项目名称和模板名称，直接使用命令行参数中的值
-// If there is a project name and template name in the command line parameters, use the value in the command line parameters directly
-else if (argvProjectName && argvTemplate) {
+// 如果命令行参数中仅有项目名称和模板名称
+// If there is a project name and template name in the command line parameters
+else if (argvProjectName && argvTemplate && !argvIconUsage) {
 	const item = templateOptions.find(item => item.value === argvTemplate);
 	if (!item) {
 		p.intro(red(lang.pectn));
 	} else if (!item.finish) {
 		p.intro(red(item.label + ' ' + lang.hnay));
 	} else {
-		createFunc(argvProjectName, item);
+		createFunc(argvProjectName, item, iconUsageOptions[0], packageManagerOptions[0]);
+	}
+	// 如果命令行参数中仅有项目名称和图标使用方式
+	// If there is a project name and icon usage method in the command line parameters
+} else if (argvProjectName && !argvTemplate && argvIconUsage) {
+	const item = iconUsageOptions.find(item => item.value === argvIconUsage);
+	if (!item) {
+		p.intro(red(lang.pic));
+	} else {
+		createFunc(argvProjectName, templateOptions[0], item, packageManagerOptions[0]);
+	}
+	// 如果命令行参数中有项目名称和模板名称和图标使用方式
+	// If there is a project name and template name and icon usage method in the command line parameters
+} else if (argvProjectName && argvTemplate && argvIconUsage) {
+	const itemTemplate = templateOptions.find(item => item.value === argvTemplate);
+	const itemIconUsage = iconUsageOptions.find(item => item.value === argvIconUsage);
+	if (!itemTemplate) {
+		p.intro(red(lang.pectn));
+	} else if (!itemTemplate.finish) {
+		p.intro(red(item.label + ' ' + lang.hnay));
+	} else if (!itemIconUsage) {
+		p.intro(red(lang.pic));
+	} else {
+		createFunc(argvProjectName, itemTemplate, itemIconUsage, packageManagerOptions[0]);
 	}
+	// 如果命令行参数中没有项目名称，则进入交互式创建项目
+	// If there is no project name in the command line parameters, enter the interactive creation project
 } else {
 	(async () => {
 		// 选择一种语言
@@ -148,6 +175,18 @@ else if (argvProjectName && argvTemplate) {
 			});
 		}
 
+		// 选择图标使用方式
+		// Select icon usage method
+		const iconUsage = await p.select({
+			message: bold(lang.psai),
+			options: iconUsageOptions,
+		});
+
+		if (p.isCancel(iconUsage)) {
+			p.cancel(red('⛔ ') + lang.oc);
+			process.exit(0);
+		}
+
 		// 输入项目名称
 		// Enter the project name
 		const projectName = await p.text({
@@ -186,15 +225,20 @@ else if (argvProjectName && argvTemplate) {
 
 		// 根据 template 的值，复制对应目录下的所有文件到当前目录
 		// According to the value of template, copy all files under the corresponding directory to the current directory
-		templateOptions.forEach(async item => {
-			if (item.value === template) {
-				createFunc(projectName, item, packageManager);
-			}
-		});
+		createFunc(
+			projectName,
+			templateOptions.find(i => i.value === template),
+			iconUsageOptions.find(i => i.value === iconUsage),
+			packageManagerOptions.find(i => i.value === packageManager)
+		);
+		// templateOptions.forEach(async item => {
+		// 	if (item.value === template) {
+		// 	}
+		// });
 	})();
 }
 
-function createFunc(projectName, item, packageManager) {
+function createFunc(projectName, templateItem, iconUsageItem, packageManagerItem) {
 	// 如果 projectName 是数字，转为字符串
 	// If projectName is a number, convert it to a string
 	if (typeof projectName === 'number') {
@@ -211,16 +255,12 @@ function createFunc(projectName, item, packageManager) {
 
 	// 获取模板目录的绝对路径，考虑到 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}`);
+	const templatePath = path.resolve(fileURLToPath(import.meta.url), '../..', `templates/${templateItem.template}`);
 
 	// 将 templatePath 目录下的所有文件复制到 projectDir 目录下
 	// Copy all files under the templatePath directory to the projectDir directory\
 	fs.copy(templatePath, projectDir)
-		.then(() => {
-			spinner.stop();
-			p.outro(`${projectName} - ${lang.pcsucc} 🎉`);
-
+		.then(async () => {
 			// 读取 package.json 文件
 			// Read the package.json file
 			const packageJson = JSON.parse(fs.readFileSync(`${projectDir}/package.json`, 'utf-8'));
@@ -229,17 +269,103 @@ function createFunc(projectName, item, packageManager) {
 			// Modify the name attribute in package.json in the project to projectName
 			packageJson.name = projectName;
 
+			// 获取最新版本号
+			// Get the latest version number
+			const getLatestVersion = async packageName => {
+				const manifest = await pacote.manifest(`${packageName}@latest`);
+				return manifest.version;
+			};
+
+			// 获取 stdf 的最新版本号
+			// Get the latest version number of stdf
+			const stdfV = await getLatestVersion('stdf');
+			packageJson.devDependencies['stdf'] = `^${stdfV}`;
+
+			const addIconifyFun = async () => {
+				const iconifyTailwind4V = await getLatestVersion('@iconify/tailwind4');
+				const bitcoin_iconsV = await getLatestVersion('@iconify-json/bitcoin-icons');
+				const duo_iconsV = await getLatestVersion('@iconify-json/duo-icons');
+				const fluent_colorV = await getLatestVersion('@iconify-json/fluent-color');
+				packageJson.devDependencies['@iconify/tailwind4'] = `^${iconifyTailwind4V}`;
+				packageJson.devDependencies['@iconify-json/bitcoin-icons'] = `^${bitcoin_iconsV}`;
+				packageJson.devDependencies['@iconify-json/duo-icons'] = `^${duo_iconsV}`;
+				packageJson.devDependencies['@iconify-json/fluent-color'] = `^${fluent_colorV}`;
+				// 在 ${projectDir}/src/app.css 的第 4 行增加 @plugin "@iconify/tailwind4" {
+				// 	prefixes: duo-icons, bitcoin-icons, fluent-color;
+				// }
+				const appCss = fs.readFileSync(`${projectDir}/src/app.css`, 'utf-8');
+				const appCssLines = appCss.split('\n');
+				appCssLines.splice(
+					3,
+					0,
+					`
+@plugin "@iconify/tailwind4" {
+	prefixes: duo-icons, bitcoin-icons, fluent-color;
+}`
+				);
+				fs.writeFileSync(`${projectDir}/src/app.css`, appCssLines.join('\n'), 'utf-8');
+				// 在 ${projectDir}/src/routes/+page.svelte 的 <Calendar bind:visible /> 下方增加图标使用示例
+				const pageSvelte = fs.readFileSync(`${projectDir}/src/routes/+page.svelte`, 'utf-8');
+				const pageSvelteLines = pageSvelte.split('\n');
+				const iconifySnippet = fs.readFileSync(new URL('../snippet/iconify.txt', import.meta.url), 'utf-8');
+				pageSvelteLines.splice(pageSvelteLines.indexOf('<Calendar bind:visible />') + 1, 0, iconifySnippet);
+				fs.writeFileSync(`${projectDir}/src/routes/+page.svelte`, pageSvelteLines.join('\n'), 'utf-8');
+			};
+			const addStdfIconFun = async () => {
+				const rollupPluginStdfIconV = await getLatestVersion('rollup-plugin-stdf-icon');
+				packageJson.devDependencies['rollup-plugin-stdf-icon'] = `^${rollupPluginStdfIconV}`;
+				const viteConfig = fs.readFileSync(`${projectDir}/vite.config.js`, 'utf-8');
+				const viteConfigLines = viteConfig.split('\n');
+				viteConfigLines.splice(1, 0, `import svgSprite from 'rollup-plugin-stdf-icon';`);
+				const viteStdfIconSnippet = fs.readFileSync(new URL('../snippet/vite-stdf-icon.txt', import.meta.url), 'utf-8');
+				// 将【export default defineConfig({ plugins: [tailwindcss(), sveltekit()] });】替换为 viteStdfIconSnippet 的代码
+				// Replace 【export default defineConfig({ plugins: [tailwindcss(), sveltekit()] });】 with the code of viteStdfIconSnippet
+				viteConfigLines.splice(
+					viteConfigLines.indexOf('export default defineConfig({ plugins: [tailwindcss(), sveltekit()] });'),
+					1,
+					viteStdfIconSnippet
+				);
+				fs.writeFileSync(`${projectDir}/vite.config.js`, viteConfigLines.join('\n'), 'utf-8');
+				// 将 snippet/svgs 整个目录复制到 ${projectDir}/src/lib 目录下
+				// Copy the snippet/svgs directory to the ${projectDir}/src/lib directory
+				fs.copySync(new URL('../snippet/svgs', import.meta.url).pathname, `${projectDir}/src/lib/svgs`);
+				// 在 ${projectDir}/src/routes/+page.svelte 的 <Calendar bind:visible /> 下方增加图标使用示例
+				const pageSvelte = fs.readFileSync(`${projectDir}/src/routes/+page.svelte`, 'utf-8');
+				const pageSvelteLines = pageSvelte.split('\n');
+				const stdfIconSnippet = fs.readFileSync(new URL('../snippet/stdf-icon.txt', import.meta.url), 'utf-8');
+				pageSvelteLines.splice(pageSvelteLines.indexOf('<Calendar bind:visible />') + 1, 0, stdfIconSnippet);
+				fs.writeFileSync(`${projectDir}/src/routes/+page.svelte`, pageSvelteLines.join('\n'), 'utf-8');
+			};
+
+			// 如果 iconUsageItem 的值为 iconify
+			// If the value of iconUsageItem is iconify
+			if (iconUsageItem.value === 'iconify') {
+				await addIconifyFun();
+			}
+
+			// 如果 iconUsageItem 的值为 stdf-icon，则获取 rollup-plugin-stdf-icon 的最新版本号
+			// If the value of iconUsageItem is stdf-icon, get the latest version number of rollup-plugin-stdf-icon
+			if (iconUsageItem.value === 'stdf-icon') {
+				await addStdfIconFun();
+			}
+
+			// 如果 iconUsageItem 的值为 both，则同时调用 addIconifyFun 和 addStdfIconFun
+			// If the value of iconUsageItem is both, call addIconifyFun and addStdfIconFun
+			if (iconUsageItem.value === 'both') {
+				await addIconifyFun();
+				await addStdfIconFun();
+			}
+
 			// 将修改后的 packageJson 写入到项目内的 package.json 文件中
 			// Write the modified packageJson to the package.json file in the project
 			fs.writeFileSync(`${projectDir}/package.json`, JSON.stringify(packageJson, null, 4), 'utf-8');
 
-			// 根据 item.value 的值，判断是否使用了 @sveltejs/kit
-			// According to the value of item.value, determine whether @sveltejs/kit is used
-			// const isHasKit = item.value === 'skt' || item.value === 'sku' || item.value === 'sktt' || item.value === 'skut';
+			spinner.stop();
+			p.outro(`🎉🎉🎉 ${projectName} - ${lang.pcsucc}`);
 
 			// 根据 item.value 的值，判断使用 Tailwind 还是 UnoCSS
 			// According to the value of item.value, determine whether to use Tailwind or UnoCSS
-			const isHasUno = item.value.includes('u');
+			const isHasUno = templateItem.value.includes('u');
 
 			// 获得依赖的版本号
 			// get the version number of the dependency
@@ -250,10 +376,6 @@ function createFunc(projectName, item, packageManager) {
 				stdf: packageJson.devDependencies.stdf.replace('^', ''),
 			};
 
-			// if (isHasKit) {
-			// versions['@sveltejs/kit'] = packageJson.devDependencies['@sveltejs/kit'].replace('^', '');
-			// }
-
 			if (isHasUno) {
 				versions['unocss'] = packageJson.devDependencies.unocss.replace('^', '');
 			} else {
@@ -279,12 +401,12 @@ function createFunc(projectName, item, packageManager) {
 
     ${blue(`1. cd ${projectName}`)}
     ${blue(`2. git init && git add -A && git commit -m "Initial commit"`)}
-    ${blue(`3. ${packageManagerOptions.find(item => item.value === packageManager).install}`)}
-    ${blue(`4. ${packageManagerOptions.find(item => item.value === packageManager).dev}`)}
+    ${blue(`3. ${packageManagerItem.install}`)}
+    ${blue(`4. ${packageManagerItem.dev}`)}
     `
 			);
-			// 显示配置主题色
-			// Display configuration theme color
+			// 提示配置主题色
+			// Prompt configuration theme color
 			console.log(
 				`🎨 ${grey(isHasUno ? lang.pcyt_vu : lang.pcyt_vt)}
     `

packages/create-stdf/src/lang.js

@@ -9,7 +9,8 @@ export const en_US = {
 	psat: 'Please select a template',
 	oc: 'Operation cancelled',
 	pca: 'Please choose again',
-	pm: 'Please select a package manager',
+	psai: 'Please select icon usage',
+	pm: 'Please select package manager',
 	cfsing: 'Creating file...',
 	pcsucc: 'Project created successfully',
 	tgs: 'To get started:',
@@ -17,6 +18,7 @@ export const en_US = {
 	pcyt_vu: 'Tip: please configure Initial Color System in src/app.css, reference https://stdf.design/guide/theme',
 	cferror: 'Failed to create file',
 	pectn: 'Please enter the correct template name!',
+	pic: 'Please enter the correct icon usage!',
 };
 
 // 简体中文 chinese
@@ -30,7 +32,8 @@ export const zh_CN = {
 	psat: '请选择一个模板',
 	oc: '操作已取消',
 	pca: '请重新选择',
-	pm: '请选择一个包管理工具',
+	psai: '请选择图标使用方式',
+	pm: '请选择包管理工具',
 	cfsing: '正在创建文件...',
 	pcsucc: '项目创建成功',
 	tgs: '开始：',
@@ -38,6 +41,7 @@ export const zh_CN = {
 	pcyt_vu: '提示：请到 src/app.css 配置初始主题色，参考 https://stdf.design/guide/theme',
 	cferror: '创建文件失败',
 	pectn: '请输入正确的模板名称！',
+	pic: '请输入正确的图标使用方式！',
 };
 
 // 繁體中文 chinese traditional
@@ -51,7 +55,8 @@ export const zh_TW = {
 	psat: '請選擇一個模板',
 	oc: '操作已取消',
 	pca: '請重新選擇',
-	pm: '請選擇一個包管理工具',
+	psai: '請選擇圖標使用方式',
+	pm: '請選擇包管理工具',
 	cfsing: '正在創建文件...',
 	pcsucc: '項目創建成功',
 	tgs: '開始：',
@@ -59,6 +64,7 @@ export const zh_TW = {
 	pcyt_vu: '提示：請到 src/app.css 配置初始主題色，參考 https://stdf.design/guide/theme',
 	cferror: '創建文件失敗',
 	pectn: '請輸入正確的模板名稱！',
+	pic: '請輸入正確的圖標使用方式！',
 };
 
 // 日语 japanese
@@ -72,6 +78,7 @@ export const ja_JP = {
 	psat: 'テンプレートを選択してください',
 	oc: '操作がキャンセルされました',
 	pca: 'もう一度選択してください',
+	psai: 'アイコンの使用方法を選択してください',
 	pm: 'パッケージマネージャーを選択してください',
 	cfsing: 'ファイルを作成しています...',
 	pcsucc: 'プロジェクトが正常に作成されました',
@@ -80,6 +87,7 @@ export const ja_JP = {
 	pcyt_vu: 'ヒント：src/app.css ファイルで初期カラーシステムを設定し、参考 https://stdf.design/guide/theme',
 	cferror: 'ファイルの作成に失敗しました',
 	pectn: '正しいテンプレート名を入力してください！',
+	pic: '正しいアイコン使用方法を入力してください！',
 };
 
 // 韩语 korean
@@ -93,6 +101,7 @@ export const ko_KR = {
 	psat: '템플릿을 선택하십시오',
 	oc: '작업이 취소되었습니다',
 	pca: '다시 선택하십시오',
+	psai: '아이콘 사용 방법을 선택하십시오',
 	pm: '패키지 관리자를 선택하십시오',
 	cfsing: '파일을 만드는 중입니다...',
 	pcsucc: '프로젝트가 성공적으로 생성되었습니다',
@@ -101,6 +110,7 @@ export const ko_KR = {
 	pcyt_vu: '팁: src/app.css 파일에서 초기 색상 시스템을 구성하고 참조 https://stdf.design/guide/theme',
 	cferror: '파일 생성 실패',
 	pectn: '올바른 템플릿 이름을 입력하십시오!',
+	pic: '올바른 아이콘 사용 방법을 입력하십시오!',
 };
 
 // 西班牙语 spanish
@@ -114,6 +124,7 @@ export const es_ES = {
 	psat: 'Por favor seleccione una plantilla',
 	oc: 'Operación cancelada',
 	pca: 'Por favor, elija de nuevo',
+	psai: 'Por favor seleccione el uso de iconos',
 	pm: 'Por favor seleccione un administrador de paquetes',
 	cfsing: 'Creando archivo...',
 	pcsucc: 'Proyecto creado con éxito',
@@ -122,6 +133,7 @@ export const es_ES = {
 	pcyt_vu: 'Consejo: configure su sistema de colores en reference https://stdf.design/guide/theme',
 	cferror: 'Error al crear archivo',
 	pectn: '¡Por favor ingrese el nombre de la plantilla correcto!',
+	pic: '¡Por favor ingrese el uso correcto de iconos!',
 };
 
 // 俄语 russian
@@ -135,6 +147,7 @@ export const ru_RU = {
 	psat: 'Пожалуйста, выберите шаблон',
 	oc: 'Операция отменена',
 	pca: 'Пожалуйста, выберите снова',
+	psai: 'Пожалуйста, выберите использование иконок',
 	pm: 'Пожалуйста, выберите пакетный менеджер',
 	cfsing: 'Создание файла...',
 	pcsucc: 'Проект успешно создан',
@@ -143,6 +156,7 @@ export const ru_RU = {
 	pcyt_vu: 'Совет: настройте свой цветовой систему в ссылке https://stdf.design/guide/theme',
 	cferror: 'Не удалось создать файл',
 	pectn: 'Пожалуйста, введите правильное название шаблона!',
+	pic: 'Пожалуйста, введите правильное использование иконок!',
 };
 
 // 法语 french
@@ -156,6 +170,7 @@ export const fr_FR = {
 	psat: 'Veuillez sélectionner un modèle',
 	oc: 'Opération annulée',
 	pca: 'Veuillez choisir à nouveau',
+	psai: "Veuillez sélectionner le mode d'utilisation des icônes",
 	pm: 'Veuillez sélectionner un gestionnaire de paquets',
 	cfsing: 'Création de fichier...',
 	pcsucc: 'Projet créé avec succès',
@@ -164,6 +179,7 @@ export const fr_FR = {
 	pcyt_vu: 'Conseil: veuillez configurer votre système de couleurs dans reference https://stdf.design/guide/theme',
 	cferror: 'Échec de la création du fichier',
 	pectn: 'Veuillez saisir le nom du modèle correct!',
+	pic: "Veuillez saisir le mode d'utilisation correct des icônes!",
 };
 
 // 德语 german
@@ -177,6 +193,7 @@ export const de_DE = {
 	psat: 'Bitte wählen Sie eine Vorlage aus',
 	oc: 'Vorgang abgebrochen',
 	pca: 'Bitte wählen Sie erneut',
+	psai: 'Bitte wählen Sie die Verwendung von Icons',
 	pm: 'Bitte wählen Sie einen Paketmanager aus',
 	cfsing: 'Erstelle Datei...',
 	pcsucc: 'Projekt erfolgreich erstellt',
@@ -185,6 +202,7 @@ export const de_DE = {
 	pcyt_vu: 'Tip: please configure your color system in reference https://stdf.design/guide/theme',
 	cferror: 'Fehler beim Erstellen der Datei',
 	pectn: 'Bitte geben Sie den richtigen Vorlagennamen ein!',
+	pic: 'Bitte geben Sie den richtigen Verwendungsmodus für Icons ein!',
 };
 
 // 意大利语 italian
@@ -198,6 +216,7 @@ export const it_IT = {
 	psat: 'Seleziona un modello',
 	oc: 'Operazione annullata',
 	pca: 'Seleziona di nuovo',
+	psai: 'Seleziona il modo di utilizzo delle icone',
 	pm: 'Seleziona un gestore di pacchetti',
 	cfsing: 'Creazione del file in corso...',
 	pcsucc: 'Progetto creato con successo',
@@ -206,4 +225,5 @@ export const it_IT = {
 	pcyt_vu: 'Consiglio: configura il tuo sistema di colori in https://stdf.design/guide/theme',
 	cferror: 'Impossibile creare il file',
 	pectn: 'Inserisci il nome del modello corretto!',
+	pic: 'Inserisci il modo di utilizzo corretto delle icone!',
 };

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

@@ -27,10 +27,8 @@
 		"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/sktts/src/app.css → packages/create-stdf/templates/skt/src/app.css

@@ -60,9 +60,8 @@
 	--color-transparent: transparent;
 }
 
-
 @source "../node_modules/stdf/**/*.svelte";
 
 html {
 	-webkit-tap-highlight-color: transparent;
-}
+}

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

@@ -135,40 +135,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">
 	<Button onclick={toggleLangFun}>{lang === 'zh_CN' ? '切换语言' : 'Toggle language'}</Button>
 	<Button fill="lineTheme" onclick={toggleThemeFun}>{lang === 'zh_CN' ? '切换主题' : 'Toggle theme'}</Button>

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

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

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

@@ -1,41 +0,0 @@
-{
-	"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

@@ -1,71 +0,0 @@
-@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

@@ -1,171 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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/README.md

@@ -1,21 +0,0 @@
-# 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

@@ -1,26 +0,0 @@
-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/skts/jsconfig.json

@@ -1,19 +0,0 @@
-{
-	"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/skts/src/app.html

@@ -1,15 +0,0 @@
-<!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/lib/svgs/Heroicons/cake.svg

@@ -1,4 +0,0 @@
-<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/skts/src/lib/svgs/IconPark/cup.svg

@@ -1 +0,0 @@
-<?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/skts/src/lib/svgs/Remix/javascript-fill.svg

@@ -1 +0,0 @@
-<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/skts/src/lib/svgs/Remix/riding-line.svg

@@ -1 +0,0 @@
-<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/skts/src/lib/svgs/Remix/spy-line.svg

@@ -1 +0,0 @@
-<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/skts/src/routes/+layout.svelte

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

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

@@ -1,9 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

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

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

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

@@ -1,15 +0,0 @@
-{
-	"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

@@ -1,21 +0,0 @@
-# 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

@@ -1,26 +0,0 @@
-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

@@ -1,19 +0,0 @@
-{
-	"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

@@ -1,42 +0,0 @@
-{
-	"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

@@ -1,72 +0,0 @@
-@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

@@ -1,13 +0,0 @@
-// 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

@@ -1,15 +0,0 @@
-<!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

@@ -1,59 +0,0 @@
-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

@@ -1,4 +0,0 @@
-<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

@@ -1 +0,0 @@
-<?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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-// 修改 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

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

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

@@ -1,205 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -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="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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1,7 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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/sktts/package.json → packages/create-stdf/templates/sktt/package.json

@@ -27,10 +27,8 @@
 		"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",
 		"typescript-eslint": "^8.32.1",

packages/create-stdf/templates/skts/src/app.css → packages/create-stdf/templates/sktt/src/app.css

@@ -60,9 +60,8 @@
 	--color-transparent: transparent;
 }
 
-
 @source "../node_modules/stdf/**/*.svelte";
 
 html {
 	-webkit-tap-highlight-color: transparent;
-}
+}

packages/create-stdf/templates/sktts/src/routes/+page.svelte → packages/create-stdf/templates/sktt/src/routes/+page.svelte

@@ -138,40 +138,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">
 	<Button onclick={toggleLangFun}>{lang === 'zh_CN' ? '切换语言' : 'Toggle language'}</Button>
 	<Button fill="lineTheme" onclick={toggleThemeFun}>{lang === 'zh_CN' ? '切换主题' : 'Toggle theme'}</Button>