@bookklik/senangstart-icons 1.0.7 → 1.0.8

package/docs/ms/index.md

@@ -0,0 +1,48 @@
+---
+layout: home
+
+hero:
+  name: "SenangStart Icons"
+  text: "Ikon cantik untuk projek web moden"
+  tagline: Pustaka ikon terkurasi, boleh disesuaikan, dan mudah digunakan
+  actions:
+    - theme: brand
+      text: Bermula
+      link: /ms/guide/getting-started
+    - theme: alt
+      text: Lihat Ikon
+      link: /ms/icons/
+  image:
+    src: https://senangstart.com/img/use_senangstart.svg
+    alt: SenangStart Icons
+
+features:
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 00-1.72 0L2.36 18.64a1.21 1.21 0 000 1.72l1.28 1.28a1.2 1.2 0 001.72 0L21.64 5.36a1.2 1.2 0 000-1.72M10.5 10.5l3 3M5 6v4M19 15v4M10 3v2M7 8H3M21 17h-4M11 4H9"></path></svg>
+    title: Boleh Disesuaikan
+    details: Mudah menyesuaikan warna, saiz, dan gaya untuk memadankan sistem reka bentuk anda.
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3h5L12 8 18 8 8.5 22l3.5-10h-6l2-9z"></path></svg>
+    title: Ringan
+    details: Ikon SVG yang dioptimumkan, pantas dimuatkan dan mesra prestasi.
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9.90 5.32 L9.14 2.94 A9.5 9.5 0 0 1 14.86 2.94 L14.10 5.32 A7 7 0 0 1 16.73 6.84 L18.42 5.00 A9.5 9.5 0 0 1 21.27 9.94 L18.83 10.48 A7 7 0 0 1 18.83 13.52 L21.27 14.06 A9.5 9.5 0 0 1 18.42 19.00 L16.73 17.16 A7 7 0 0 1 14.10 18.68 L14.86 21.06 A9.5 9.5 0 0 1 9.14 21.06 L9.90 18.68 A7 7 0 0 1 7.27 17.16 L5.58 19.00 A9.5 9.5 0 0 1 2.73 14.06 L5.17 13.52 A7 7 0 0 1 5.17 10.48 L2.73 9.94 A9.5 9.5 0 0 1 5.58 5.00 L7.27 6.84 A7 7 0 0 1 9.90 5.32 Z M14.5 12 A2.5 2.5 0 1 0 9.5 12 A2.5 2.5 0 1 0 14.5 12 Z"></path></svg>
+    title: Integrasi Mudah
+    details: API mudah dengan pelbagai cara penggunaan - Web Components, CDN, atau npm.
+---
+
+## Mula Pantas
+
+Tambah SenangStart Icons ke projek anda:
+
+```html
+<!-- CDN -->
+<script src="https://unpkg.com/@bookklik/senangstart-icons/dist/senangstart-icon.min.js"></script>
+
+<!-- Gunakan ikon -->
+<ss-icon name="home"></ss-icon>
+<ss-icon name="search" size="24"></ss-icon>
+```
+
+Atau pasang melalui npm:
+
+```bash
+npm install @bookklik/senangstart-icons
+```

package/package.json

@@ -1,15 +1,21 @@
 {
   "name": "@bookklik/senangstart-icons",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Curated Starter icons designed for web projects.",
   "main": "dist/senangstart-icon.min.js",
   "scripts": {
     "build:svg": "node scripts/build-svgs.js",
+    "build:icon-docs": "node scripts/build-icon-docs.js",
     "build:css": "node scripts/build-css.js",
-    "build": "npm run build:svg && npm run build:css && webpack --mode production",
+    "build": "node scripts/build.js",
     "build:watch": "npm run build:svg && npm run build:css && webpack --mode production --watch",
     "dev": "npm run build:svg && npm run build:css && webpack --mode development --watch",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "keywords": [
     "icons",
@@ -21,11 +27,15 @@
   "devDependencies": {
     "@babel/core": "^7.23.0",
     "@babel/preset-env": "^7.23.0",
+    "@vitest/coverage-v8": "^3.2.4",
     "babel-loader": "^9.1.3",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
+    "jsdom": "^26.1.0",
     "mini-css-extract-plugin": "^2.7.6",
     "terser-webpack-plugin": "^5.3.9",
+    "vitepress": "^1.6.4",
+    "vitest": "^3.2.4",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"
   }

package/scripts/build-icon-docs.js

@@ -0,0 +1,331 @@
+const fs = require('fs');
+const path = require('path');
+
+// Paths
+const iconsJsonPath = path.join(__dirname, '..', 'src', 'icons.json');
+const docsIconsDir = path.join(__dirname, '..', 'docs', 'icons');
+const docsIconsDirMs = path.join(__dirname, '..', 'docs', 'ms', 'icons');
+const indexPath = path.join(docsIconsDir, 'index.md');
+const indexPathMs = path.join(docsIconsDirMs, 'index.md');
+
+// Read icons.json
+const icons = JSON.parse(fs.readFileSync(iconsJsonPath, 'utf8'));
+
+// Ensure docs/icons directories exist
+fs.mkdirSync(docsIconsDir, { recursive: true });
+fs.mkdirSync(docsIconsDirMs, { recursive: true });
+
+console.log(`📝 Generating documentation for ${icons.length} icons...\n`);
+
+// Generate markdown for each icon
+const iconLinks = [];
+
+icons.forEach((icon, index) => {
+    const { name, slug, src, tags } = icon;
+    
+    // Create SVG preview (stroke-based icon)
+    const svgPreview = `<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="${src}"></path></svg>`;
+    
+    // Generate English markdown content
+    const markdownEn = `---
+title: ${name}
+---
+
+# ${name}
+
+<div style="display: flex; justify-content: center; padding: 2rem; background: var(--vp-c-bg-soft); border-radius: 8px; margin: 1rem 0;">
+${svgPreview}
+</div>
+
+## Usage
+
+\`\`\`html
+<ss-icon name="${slug}"></ss-icon>
+\`\`\`
+
+### With custom size
+
+\`\`\`html
+<ss-icon name="${slug}" size="32"></ss-icon>
+\`\`\`
+
+### With custom color
+
+\`\`\`html
+<ss-icon name="${slug}" color="#3b82f6"></ss-icon>
+\`\`\`
+
+### With custom stroke width
+
+\`\`\`html
+<ss-icon name="${slug}" stroke="2"></ss-icon>
+\`\`\`
+
+## Icon Details
+
+| Property | Value |
+|----------|-------|
+| **Name** | ${name} |
+| **Slug** | \`${slug}\` |
+| **Tags** | ${tags.map(t => `\`${t}\``).join(', ')} |
+
+## SVG Path
+
+\`\`\`
+${src}
+\`\`\`
+
+## Raw SVG
+
+\`\`\`html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="${src}"></path>
+</svg>
+\`\`\`
+
+---
+
+[← Back to Icon Library](/icons/)
+`;
+
+    // Generate Malay markdown content
+    const markdownMs = `---
+title: ${name}
+---
+
+# ${name}
+
+<div style="display: flex; justify-content: center; padding: 2rem; background: var(--vp-c-bg-soft); border-radius: 8px; margin: 1rem 0;">
+${svgPreview}
+</div>
+
+## Penggunaan
+
+\`\`\`html
+<ss-icon name="${slug}"></ss-icon>
+\`\`\`
+
+### Dengan saiz tersuai
+
+\`\`\`html
+<ss-icon name="${slug}" size="32"></ss-icon>
+\`\`\`
+
+### Dengan warna tersuai
+
+\`\`\`html
+<ss-icon name="${slug}" color="#3b82f6"></ss-icon>
+\`\`\`
+
+### Dengan lebar garisan tersuai
+
+\`\`\`html
+<ss-icon name="${slug}" stroke="2"></ss-icon>
+\`\`\`
+
+## Butiran Ikon
+
+| Ciri | Nilai |
+|------|-------|
+| **Nama** | ${name} |
+| **Slug** | \`${slug}\` |
+| **Tag** | ${tags.map(t => `\`${t}\``).join(', ')} |
+
+## Laluan SVG
+
+\`\`\`
+${src}
+\`\`\`
+
+## SVG Mentah
+
+\`\`\`html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="${src}"></path>
+</svg>
+\`\`\`
+
+---
+
+[← Kembali ke Pustaka Ikon](/ms/icons/)
+`;
+
+    // Write individual icon markdown files (English)
+    const iconFilePath = path.join(docsIconsDir, `${slug}.md`);
+    fs.writeFileSync(iconFilePath, markdownEn);
+    
+    // Write individual icon markdown files (Malay)
+    const iconFilePathMs = path.join(docsIconsDirMs, `${slug}.md`);
+    fs.writeFileSync(iconFilePathMs, markdownMs);
+    
+    // Add to links array
+    iconLinks.push({
+        name,
+        slug,
+        tags
+    });
+    
+    // Progress indicator
+    if ((index + 1) % 50 === 0 || index === icons.length - 1) {
+        console.log(`  ✓ Generated ${index + 1}/${icons.length} icon docs (EN + MS)`);
+    }
+});
+
+// Generate English index.md with links to all icons
+const indexMarkdownEn = `---
+title: Icon Library
+---
+
+# Icon Library
+
+Browse all **${icons.length}** available icons in SenangStart Icons.
+
+## Usage
+
+Once you find the icon you need, use it like this:
+
+\`\`\`html
+<ss-icon name="icon-name"></ss-icon>
+\`\`\`
+
+## All Icons
+
+<div class="icon-grid">
+
+${iconLinks.map(icon => {
+    return `<a href="./${icon.slug}" class="icon-card" title="${icon.tags.join(', ')}">
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="${icons.find(i => i.slug === icon.slug).src}"></path></svg>
+  <span>${icon.name}</span>
+</a>`;
+}).join('\n\n')}
+
+</div>
+
+<style>
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.icon-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  text-decoration: none;
+  color: var(--vp-c-text-1) !important;
+  transition: all 0.2s ease;
+  text-align: center;
+  aspect-ratio: 1/1;
+}
+
+.icon-card:hover {
+  background: var(--vp-c-bg-soft-up);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.icon-card svg {
+  margin-bottom: 0.5rem;
+  width: 3rem;
+  height: 3rem;
+}
+
+.icon-card span {
+  font-size: 0.8rem;
+  word-break: break-word;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+</style>
+`;
+
+// Generate Malay index.md with links to all icons
+const indexMarkdownMs = `---
+title: Pustaka Ikon
+---
+
+# Pustaka Ikon
+
+Layari semua **${icons.length}** ikon yang tersedia dalam SenangStart Icons.
+
+## Penggunaan
+
+Setelah anda menemui ikon yang diperlukan, gunakannya seperti ini:
+
+\`\`\`html
+<ss-icon name="nama-ikon"></ss-icon>
+\`\`\`
+
+## Semua Ikon
+
+<div class="icon-grid">
+
+${iconLinks.map(icon => {
+    return `<a href="./${icon.slug}" class="icon-card" title="${icon.tags.join(', ')}">
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="${icons.find(i => i.slug === icon.slug).src}"></path></svg>
+  <span>${icon.name}</span>
+</a>`;
+}).join('\n\n')}
+
+</div>
+
+<style>
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.icon-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  text-decoration: none;
+  color: var(--vp-c-text-1) !important;
+  transition: all 0.2s ease;
+  text-align: center;
+  aspect-ratio: 1/1;
+}
+
+.icon-card:hover {
+  background: var(--vp-c-bg-soft-up);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.icon-card svg {
+  margin-bottom: 0.5rem;
+  width: 3rem;
+  height: 3rem;
+}
+
+.icon-card span {
+  font-size: 0.8rem;
+  word-break: break-word;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+</style>
+`;
+
+fs.writeFileSync(indexPath, indexMarkdownEn);
+fs.writeFileSync(indexPathMs, indexMarkdownMs);
+
+console.log(`\n✅ Icon documentation generated successfully!`);
+console.log(`   - ${icons.length} English icon pages created`);
+console.log(`   - ${icons.length} Malay icon pages created`);
+console.log(`   - English index at docs/icons/index.md`);
+console.log(`   - Malay index at docs/ms/icons/index.md`);

package/scripts/build.js

@@ -0,0 +1,40 @@
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+// Helper function to recursively copy a directory
+function copyDir(src, dest) {
+    fs.mkdirSync(dest, { recursive: true });
+    const entries = fs.readdirSync(src);
+    
+    for (const entry of entries) {
+        const srcPath = path.join(src, entry);
+        const destPath = path.join(dest, entry);
+        
+        if (fs.statSync(srcPath).isDirectory()) {
+            copyDir(srcPath, destPath);
+        } else {
+            fs.copyFileSync(srcPath, destPath);
+        }
+    }
+}
+
+console.log('🔨 Building SenangStart Icons...\n');
+
+// Step 1: Build SVGs
+console.log('📦 Step 1: Building SVGs...');
+execSync('node scripts/build-svgs.js', { stdio: 'inherit' });
+
+// Step 2: Build CSS
+console.log('\n🎨 Step 2: Building CSS...');
+execSync('node scripts/build-css.js', { stdio: 'inherit' });
+
+// Step 3: Run Generate Icon Docs
+console.log('\n⚙️  Step 3: Running Generate Icon Docs...');
+execSync('node scripts/build-icon-docs.js', { stdio: 'inherit' });
+
+// Step 4: Run Webpack
+console.log('\n⚙️  Step 4: Running Webpack...');
+execSync('npx webpack --mode production', { stdio: 'inherit' });
+
+console.log('\n✅ Build complete! Files copied to docs/public/');

package/test-results.json

@@ -0,0 +1,11 @@
+npx : The CJS build of Vite's Node API is deprecated. See 
+https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more 
+details.
+At line:1 char:1
++ npx vitest run tests/build-pipeline.test.js --reporter=json 2>&1 | Ou ...
++ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    + CategoryInfo          : NotSpecified: (The CJS bu...e details.:String 
+   ) [], RemoteException
+    + FullyQualifiedErrorId : NativeCommandError
+ 
+{"numTotalTestSuites":9,"numPassedTestSuites":6,"numFailedTestSuites":3,"numPendingTestSuites":0,"numTotalTests":14,"numPassedTests":13,"numFailedTests":1,"numPendingTests":0,"numTodoTests":0,"snapshot":{"added":0,"failure":false,"filesAdded":0,"filesRemoved":0,"filesRemovedList":[],"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0,"didUpdate":false},"startTime":1768184278421,"success":false,"testResults":[{"assertionResults":[{"ancestorTitles":["Build Pipeline Integration","Source files"],"fullName":"Build Pipeline Integration Source files should have icons.json","status":"passed","title":"should have icons.json","duration":1.2354001998901367,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Source files"],"fullName":"Build Pipeline Integration Source files should have all required source files","status":"passed","title":"should have all required source files","duration":0.46810007095336914,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Generated SVG files"],"fullName":"Build Pipeline Integration Generated SVG files should have svg directory","status":"passed","title":"should have svg directory","duration":0.37180042266845703,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Generated SVG files"],"fullName":"Build Pipeline Integration Generated SVG files should have SVG file for each icon in icons.json","status":"passed","title":"should have SVG file for each icon in icons.json","duration":21.953199863433838,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Generated SVG files"],"fullName":"Build Pipeline Integration Generated SVG files should have index.js exporting all icons","status":"passed","title":"should have index.js exporting all icons","duration":0.5628995895385742,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Generated CSS"],"fullName":"Build Pipeline Integration Generated CSS should have icons.css file","status":"passed","title":"should have icons.css file","duration":0.21340036392211914,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Generated CSS"],"fullName":"Build Pipeline Integration Generated CSS should have CSS class for each icon","status":"passed","title":"should have CSS class for each icon","duration":9.665900230407715,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Documentation files"],"fullName":"Build Pipeline Integration Documentation files should have docs directory structure","status":"passed","title":"should have docs directory structure","duration":0.31890010833740234,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Documentation files"],"fullName":"Build Pipeline Integration Documentation files should have documentation for each icon","status":"passed","title":"should have documentation for each icon","duration":44.08650016784668,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Icon data consistency"],"fullName":"Build Pipeline Integration Icon data consistency should have matching icon counts across all generated files","status":"failed","title":"should have matching icon counts across all generated files","duration":8.33899974822998,"failureMessages":["AssertionError: expected 248 to be 246 // Object.is equality\n    at C:\\wamp64\\www\\senangstart-icons\\tests\\build-pipeline.test.js:93:31\n    at file:///C:/wamp64/www/senangstart-icons/node_modules/@vitest/runner/dist/chunk-hooks.js:155:11\n    at file:///C:/wamp64/www/senangstart-icons/node_modules/@vitest/runner/dist/chunk-hooks.js:752:26\n    at file:///C:/wamp64/www/senangstart-icons/node_modules/@vitest/runner/dist/chunk-hooks.js:1897:20\n    at new Promise (<anonymous>)\n    at runWithTimeout (file:///C:/wamp64/www/senangstart-icons/node_modules/@vitest/runner/dist/chunk-hooks.js:1863:10)\n    at runTest (file:///C:/wamp64/www/senangstart-icons/node_modules/@vitest/runner/dist/chunk-hooks.js:1574:12)\n    at processTicksAndRejections (node:internal/process/task_queues:95:5)\n    at runSuite (file:///C:/wamp64/www/senangstart-icons/node_modules/@vitest/runner/dist/chunk-hooks.js:1729:8)\n    at runSuite (file:///C:/wamp64/www/senangstart-icons/node_modules/@vitest/runner/dist/chunk-hooks.js:1729:8)"],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Icon data consistency"],"fullName":"Build Pipeline Integration Icon data consistency should have valid SVG path data in icons.json","status":"passed","title":"should have valid SVG path data in icons.json","duration":9.310800075531006,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Icon data consistency"],"fullName":"Build Pipeline Integration Icon data consistency should have normalized slugs (lowercase, hyphenated)","status":"passed","title":"should have normalized slugs (lowercase, hyphenated)","duration":7.935400009155273,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Build scripts"],"fullName":"Build Pipeline Integration Build scripts should have all build scripts","status":"passed","title":"should have all build scripts","duration":0.5515999794006348,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Webpack configuration"],"fullName":"Build Pipeline Integration Webpack configuration should have webpack.config.js","status":"passed","title":"should have webpack.config.js","duration":0.3931999206542969,"failureMessages":[],"meta":{}}],"startTime":1768184278865,"endTime":1768184278972.3933,"status":"failed","message":"","name":"C:/wamp64/www/senangstart-icons/tests/build-pipeline.test.js"}]}

package/tests/build-css.test.js

@@ -0,0 +1,134 @@
+/**
+ * Tests for build-css.js
+ * 
+ * Tests CSS generation with SVG data URIs
+ */
+import { describe, it, expect, beforeAll } from 'vitest';
+import fs from 'fs';
+import path from 'path';
+
+const iconsPath = path.resolve(__dirname, '../src/icons.json');
+const cssPath = path.resolve(__dirname, '../src/icons.css');
+
+// Recreate the encodeSvg function from build-css.js for testing
+function encodeSvg(svg) {
+  return svg
+    .replace(/"/g, "'")
+    .replace(/%/g, "%25")
+    .replace(/#/g, "%23")
+    .replace(/{/g, "%7B")
+    .replace(/}/g, "%7D")
+    .replace(/</g, "%3C")
+    .replace(/>/g, "%3E")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+// Recreate generateSvg function from build-css.js
+function generateSvg(icon) {
+  const { src, viewBox, fill, stroke, strokeWidth } = icon;
+  const vBox = viewBox || "0 0 24 24";
+  const fl = fill || "none";
+  const strk = stroke || "currentColor";
+  const strkWidth = strokeWidth || "2";
+
+  return `<svg xmlns='http://www.w3.org/2000/svg' viewBox='${vBox}' fill='${fl}' stroke='${strk}' stroke-width='${strkWidth}' stroke-linecap='round' stroke-linejoin='round'><path d='${src}'/></svg>`;
+}
+
+describe('build-css.js', () => {
+  let icons;
+  let cssContent;
+
+  beforeAll(() => {
+    icons = JSON.parse(fs.readFileSync(iconsPath, 'utf8'));
+    cssContent = fs.readFileSync(cssPath, 'utf8');
+  });
+
+  describe('encodeSvg function', () => {
+    it('should replace double quotes with single quotes', () => {
+      const result = encodeSvg('<svg viewBox="0 0 24 24">');
+      expect(result).not.toContain('"');
+      expect(result).toContain("'");
+    });
+
+    it('should URL-encode special characters', () => {
+      const result = encodeSvg('<svg>#test</svg>');
+      expect(result).toContain('%3C'); // <
+      expect(result).toContain('%3E'); // >
+      expect(result).toContain('%23'); // #
+    });
+
+    it('should collapse whitespace', () => {
+      const result = encodeSvg('<svg>  test   test  </svg>');
+      expect(result).not.toContain('  '); // no double spaces
+    });
+  });
+
+  describe('generateSvg function', () => {
+    it('should generate valid SVG string', () => {
+      const icon = { src: 'M12 4.5v15m7.5-7.5h-15', name: 'test' };
+      const svg = generateSvg(icon);
+
+      expect(svg).toContain("<svg");
+      expect(svg).toContain("xmlns='http://www.w3.org/2000/svg'");
+      expect(svg).toContain("<path d='M12 4.5v15m7.5-7.5h-15'");
+    });
+
+    it('should apply default values', () => {
+      const icon = { src: 'M0 0', name: 'test' };
+      const svg = generateSvg(icon);
+
+      expect(svg).toContain("viewBox='0 0 24 24'");
+      expect(svg).toContain("fill='none'");
+      expect(svg).toContain("stroke='currentColor'");
+      expect(svg).toContain("stroke-width='2'");
+    });
+
+    it('should use custom values when provided', () => {
+      const icon = {
+        src: 'M0 0',
+        name: 'test',
+        viewBox: '0 0 48 48',
+        fill: 'red',
+        stroke: 'blue',
+        strokeWidth: '4'
+      };
+      const svg = generateSvg(icon);
+
+      expect(svg).toContain("viewBox='0 0 48 48'");
+      expect(svg).toContain("fill='red'");
+      expect(svg).toContain("stroke='blue'");
+      expect(svg).toContain("stroke-width='4'");
+    });
+  });
+
+  describe('CSS file generation', () => {
+    it('should contain base .ss class', () => {
+      expect(cssContent).toContain('.ss {');
+      expect(cssContent).toContain('display: inline-block;');
+      expect(cssContent).toContain('width: 1em;');
+      expect(cssContent).toContain('height: 1em;');
+    });
+
+    it('should contain mask properties in base class', () => {
+      expect(cssContent).toContain('mask-size: contain;');
+      expect(cssContent).toContain('mask-repeat: no-repeat;');
+      expect(cssContent).toContain('mask-position: center;');
+    });
+
+    it('should generate class for each icon', () => {
+      icons.forEach(icon => {
+        expect(cssContent).toContain(`.ss-${icon.slug}`);
+      });
+    });
+
+    it('should use data URI for mask-image', () => {
+      expect(cssContent).toContain('mask-image: url("data:image/svg+xml,');
+    });
+
+    it('should have proper header comment', () => {
+      expect(cssContent).toContain('Senangstart Icons - CSS Only');
+      expect(cssContent).toContain('Auto-generated');
+    });
+  });
+});