@bookklik/senangstart-icons 1.0.6 → 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.6",
+  "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/src/icons.css

@@ -139,6 +139,16 @@
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.75 12a8.25 8.25 0 108.25-8.25c-2.3 0-4.5 1-6 2.5L3.75 8.5m0-4.5v4.5h4.5'/%3E%3C/svg%3E");
 }
 
+.ss-rotate-add {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.25 12a8.25 8.25 0 11-8.25-8.25c2.3 0 4.5 1 6 2.5L20.25 8.5m0-4.5v4.5h-4.5m-6.75 3.5L15 12m-3 3L12 9'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.25 12a8.25 8.25 0 11-8.25-8.25c2.3 0 4.5 1 6 2.5L20.25 8.5m0-4.5v4.5h-4.5m-6.75 3.5L15 12m-3 3L12 9'/%3E%3C/svg%3E");
+}
+
+.ss-rotate-minus {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.75 12a8.25 8.25 0 108.25-8.25c-2.3 0-4.5 1-6 2.5L3.75 8.5m0-4.5v4.5h4.5m.75 3.5L15 12'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.75 12a8.25 8.25 0 108.25-8.25c-2.3 0-4.5 1-6 2.5L3.75 8.5m0-4.5v4.5h4.5m.75 3.5L15 12'/%3E%3C/svg%3E");
+}
+
 .ss-arrow-top-right-on-square {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25'/%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25'/%3E%3C/svg%3E");
@@ -879,6 +889,16 @@
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12M6 21h12M18 8v8a2 2 0 01-2 2H8a2 2 0 01-2-2V8a2 2 0 012-2h8a2 2 0 012 2ZM3 6 3 18M21 6 21 18'/%3E%3C/svg%3E");
 }
 
+.ss-flip-horizontal {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3L12 21M8 20 8 4 3 20 8 20M16 4 16 20 21 20 16 4'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3L12 21M8 20 8 4 3 20 8 20M16 4 16 20 21 20 16 4'/%3E%3C/svg%3E");
+}
+
+.ss-flip-vertical {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 12L3 12m1-4L20 8 4 3 4 8M20 16 4 16 4 21 20 16'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 12L3 12m1-4L20 8 4 3 4 8M20 16 4 16 4 21 20 16'/%3E%3C/svg%3E");
+}
+
 .ss-grid {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v18M15 3v18M3 9h18M3 15h18M3 21h18M3 3h18M3 3v18M21 3v18'/%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v18M15 3v18M3 9h18M3 15h18M3 21h18M3 3h18M3 3v18M21 3v18'/%3E%3C/svg%3E");

package/src/icons.json

@@ -347,6 +347,24 @@
       "arrow-rotate-ccw"
     ]
   },
+  {
+    "name": "Rotate Add",
+    "slug": "rotate-add",
+    "src": "M20.25 12a8.25 8.25 0 11-8.25-8.25c2.3 0 4.5 1 6 2.5L20.25 8.5m0-4.5v4.5h-4.5m-6.75 3.5L15 12m-3 3L12 9",
+    "tags": [
+      "rotate",
+      "arrow-rotate-add"
+    ]
+  },
+  {
+    "name": "Rotate Minus",
+    "slug": "rotate-minus",
+    "src": "M3.75 12a8.25 8.25 0 108.25-8.25c-2.3 0-4.5 1-6 2.5L3.75 8.5m0-4.5v4.5h4.5m.75 3.5L15 12",
+    "tags": [
+      "rotate",
+      "rotate-minus"
+    ]
+  },
   {
     "name": "Arrow Top Right On Square",
     "slug": "arrow-top-right-on-square",
@@ -1903,6 +1921,18 @@
     "src": "M6 3h12M6 21h12M18 8v8a2 2 0 01-2 2H8a2 2 0 01-2-2V8a2 2 0 012-2h8a2 2 0 012 2ZM3 6 3 18M21 6 21 18",
     "tags": ["container", "box", "center", "layout", "design"]
   },
+  {
+    "name": "Flip Horizontal",
+    "slug": "flip-horizontal",
+    "src": "m12 3L12 21M8 20 8 4 3 20 8 20M16 4 16 20 21 20 16 4",
+    "tags": ["flip", "horizontal", "flip-horizontal", "design"]
+  },
+  {
+    "name": "Flip Vertical",
+    "slug": "flip-vertical",
+    "src": "m21 12L3 12m1-4L20 8 4 3 4 8M20 16 4 16 4 21 20 16",
+    "tags": ["flip", "vertical", "flip-vertical", "design"]
+  },
   {
     "name": "Grid",
     "slug": "grid",

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"}]}