├── .gitignore
├── test
    ├── setup.js
    ├── utils.test.js
    ├── cli.test.js
    └── index.test.js
├── vitest.config.js
├── .husky
    └── pre-push
├── src
    └── icons
    │   ├── MdiHome.svelte
    │   └── FluentSearch12Regular.svelte
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
    └── workflows
    │   ├── release.yml
    │   └── ci.yml
├── CHANGELOG.md
├── package.json
├── README.md
├── cli.js
└── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules/


--------------------------------------------------------------------------------
/test/setup.js:
--------------------------------------------------------------------------------
1 | // Test setup file
2 | import { vi } from 'vitest';
3 | 
4 | // Global test setup - minimal mocking here
5 | // Individual test files should handle their own specific mocks
6 | 


--------------------------------------------------------------------------------
/vitest.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vitest/config';
 2 | 
 3 | export default defineConfig({
 4 |   test: {
 5 |     environment: 'jsdom',
 6 |     globals: true,
 7 |     setupFiles: ['./test/setup.js']
 8 |   }
 9 | });
10 | 


--------------------------------------------------------------------------------
/.husky/pre-push:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | . "$(dirname -- "$0")/_/husky.sh"
 3 | 
 4 | echo "🧪 Running tests before push..."
 5 | npm run test:run
 6 | 
 7 | if [ $? -ne 0 ]; then
 8 |   echo "❌ Tests failed! Push aborted."
 9 |   exit 1
10 | fi
11 | 
12 | echo "✅ All tests passed! Proceeding with push..."
13 | 


--------------------------------------------------------------------------------
/src/icons/MdiHome.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts" module>
 2 |   export interface MdiHomeProps {
 3 |     size?: number;
 4 |     class?: string;
 5 |   }
 6 | </script>
 7 | 
 8 | <script lang="ts">
 9 |   const { size = 0.7, class: className = '' }: MdiHomeProps = $props();
10 | </script>
11 | 
12 | <svg
13 |    xmlns="http://www.w3.org/2000/svg"
14 |    width="{size}em"
15 |    height="{size}em"
16 |    viewBox="0 0 24 24"
17 |    class="{className}">
18 |   <path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z"/>
19 | </svg>


--------------------------------------------------------------------------------
/src/icons/FluentSearch12Regular.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts" module>
 2 |   export interface FluentSearch12RegularProps {
 3 |     size?: number;
 4 |     class?: string;
 5 |   }
 6 | </script>
 7 | 
 8 | <script lang="ts">
 9 |   const { size = 0.7, class: className = '' }: FluentSearch12RegularProps = $props();
10 | </script>
11 | 
12 | <svg
13 |    xmlns="http://www.w3.org/2000/svg"
14 |    width="{size}em"
15 |    height="{size}em"
16 |    viewBox="0 0 12 12"
17 |    class="{className}">
18 |   <path fill="currentColor" d="M5 1a4 4 0 1 0 2.452 7.16l2.694 2.693a.5.5 0 1 0 .707-.707L8.16 7.453A4 4 0 0 0 5 1M2 5a3 3 0 1 1 6 0a3 3 0 0 1-6 0"/>
19 | </svg>


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: '[FEATURE] '
 5 | labels: enhancement
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: '[BUG] '
 5 | labels: bug
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Run command: `npx svelicon ...`
16 | 2. See error
17 | 
18 | **Expected behavior**
19 | A clear and concise description of what you expected to happen.
20 | 
21 | **Screenshots/Output**
22 | If applicable, add screenshots or command output to help explain your problem.
23 | 
24 | **Environment (please complete the following information):**
25 |  - OS: [e.g. macOS, Windows, Linux]
26 |  - Node.js version: [e.g. 18.x, 20.x]
27 |  - Svelicon version: [e.g. 2.0.0-beta.1]
28 | 
29 | **Additional context**
30 | Add any other context about the problem here.
31 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | ## [Unreleased]
 4 | 
 5 | ### Added
 6 | - Automated CI/CD pipeline with NPM publishing
 7 | - Path traversal security protection
 8 | - Pre-push git hooks for testing
 9 | - Version management scripts
10 | 
11 | ### Security
12 | - Fixed path traversal vulnerability
13 | - Added security audit in CI pipeline
14 | 
15 | ## [2.0.0-beta.1] - 2024-11-14
16 | 
17 | ### Added
18 | - Colon-to-slash icon format conversion (`fluent:home-24-filled` → `fluent/home-24-filled`)
19 | - Batch icon downloads with comma-separated lists
20 | - TypeScript support with `--withts` flag
21 | - Comprehensive test suite with 39+ tests
22 | - CLI commands: `download` and `search`
23 | - Interactive icon selection
24 | - Progress tracking for batch operations
25 | - Concurrency control for API requests
26 | - TSConfig validation and path mapping suggestions
27 | 
28 | ### Changed
29 | - Improved error handling and user feedback
30 | - Better component name generation
31 | - Enhanced CLI interface with Commander.js
32 | 
33 | ### Fixed
34 | - Icon name parsing edge cases
35 | - Component generation for complex icon names
36 | - File path handling improvements
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelicon",
 3 |   "version": "2.0.2",
 4 |   "description": "✨ Svelte Icon Library - Search, discover and download Iconify icons as Svelte components with TypeScript support",
 5 |   "keywords": [
 6 |     "svelte",
 7 |     "svelte5",
 8 |     "svelte icon",
 9 |     "icons",
10 |     "svg",
11 |     "iconify",
12 |     "search",
13 |     "batch download",
14 |     "typescript",
15 |     "cli",
16 |     "parallel",
17 |     "font awesome",
18 |     "fluent",
19 |     "lucide",
20 |     "material design"
21 |   ],
22 |   "repository": {
23 |     "type": "git",
24 |     "url": "git+https://github.com/friendofsvelte/svelicon.git"
25 |   },
26 |   "main": "index.js",
27 |   "type": "module",
28 |   "bin": {
29 |     "svelicon": "cli.js"
30 |   },
31 |   "dependencies": {
32 |     "@iconify/utils": "^2.1.5",
33 |     "axios": "^1.6.2",
34 |     "commander": "^11.1.0",
35 |     "mkdirp": "^3.0.1",
36 |     "p-limit": "^6.2.0"
37 |   },
38 |   "devDependencies": {
39 |     "vitest": "^2.1.0",
40 |     "jsdom": "^25.0.0",
41 |     "@vitest/ui": "^2.1.0",
42 |     "husky": "^8.0.3"
43 |   },
44 |   "scripts": {
45 |     "test": "vitest",
46 |     "test:ui": "vitest --ui",
47 |     "test:run": "vitest run",
48 |     "prepare": "husky install",
49 |     "pre-push": "npm run test:run",
50 |     "version:patch": "npm version patch",
51 |     "version:minor": "npm version minor",
52 |     "version:major": "npm version major",
53 |     "version:beta": "npm version prerelease --preid=beta",
54 |     "release": "npm run test:run && npm run version:patch",
55 |     "release:minor": "npm run test:run && npm run version:minor",
56 |     "release:major": "npm run test:run && npm run version:major",
57 |     "release:beta": "npm run test:run && npm run version:beta"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | on:
 4 |   push:
 5 |     tags:
 6 |       - 'v*'
 7 | 
 8 | jobs:
 9 |   test:
10 |     runs-on: ubuntu-latest
11 |     
12 |     steps:
13 |     - name: Checkout code
14 |       uses: actions/checkout@v4
15 |       
16 |     - name: Setup Node.js
17 |       uses: actions/setup-node@v4
18 |       with:
19 |         node-version: '20.x'
20 |         cache: 'npm'
21 |         
22 |     - name: Install dependencies
23 |       run: npm ci
24 |       
25 |     - name: Run tests
26 |       run: npm run test:run
27 |       
28 |     - name: Run security audit
29 |       run: |
30 |         echo "🔍 Running security audit for release..."
31 |         # Only fail on high/critical vulnerabilities in runtime dependencies
32 |         npm audit --audit-level=high || {
33 |           echo "⚠️  High/Critical vulnerabilities found. Checking if they affect runtime..."
34 |           if npm audit --json | jq -r '.vulnerabilities | to_entries[] | select(.value.severity == "high" or .value.severity == "critical") | .value.via[] | select(type == "object") | .dependency' | grep -v -E '^(vitest|@vitest|vite|esbuild)'; then
35 |             echo "❌ Runtime dependencies have high/critical vulnerabilities! Cannot release."
36 |             exit 1
37 |           else
38 |             echo "✅ Only development dependencies affected, safe to release"
39 |           fi
40 |         }
41 | 
42 |   publish:
43 |     needs: test
44 |     runs-on: ubuntu-latest
45 |     
46 |     steps:
47 |     - name: Checkout code
48 |       uses: actions/checkout@v4
49 |       
50 |     - name: Setup Node.js
51 |       uses: actions/setup-node@v4
52 |       with:
53 |         node-version: '20.x'
54 |         cache: 'npm'
55 |         registry-url: 'https://registry.npmjs.org'
56 |         
57 |     - name: Install dependencies
58 |       run: npm ci
59 |       
60 |     - name: Publish to NPM
61 |       run: npm publish
62 |       env:
63 |         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
64 |         
65 |     - name: Create GitHub Release
66 |       uses: actions/create-release@v1
67 |       env:
68 |         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
69 |       with:
70 |         tag_name: ${{ github.ref }}
71 |         release_name: Release ${{ github.ref }}
72 |         body: |
73 |           ## Changes
74 |           
75 |           See [CHANGELOG.md](CHANGELOG.md) for details.
76 |           
77 |           ## Installation
78 |           
79 |           ```bash
80 |           npm install -g svelicon@${{ github.ref_name }}
81 |           ```
82 |         draft: false
83 |         prerelease: ${{ contains(github.ref, 'beta') || contains(github.ref, 'alpha') }}
84 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
  1 | name: CI
  2 | 
  3 | on:
  4 |   push:
  5 |     branches: [ main, develop ]
  6 |   pull_request:
  7 |     branches: [ main, develop ]
  8 | 
  9 | permissions:
 10 |   contents: write  # Allow creating tags and releases
 11 |   packages: write  # Allow publishing packages
 12 | 
 13 | jobs:
 14 |   test:
 15 |     runs-on: ubuntu-latest
 16 |     
 17 |     strategy:
 18 |       matrix:
 19 |         node-version: [18.x, 20.x, 22.x]
 20 |     
 21 |     steps:
 22 |     - name: Checkout code
 23 |       uses: actions/checkout@v4
 24 |       
 25 |     - name: Setup Node.js ${{ matrix.node-version }}
 26 |       uses: actions/setup-node@v4
 27 |       with:
 28 |         node-version: ${{ matrix.node-version }}
 29 |         cache: 'npm'
 30 |         
 31 |     - name: Install dependencies
 32 |       run: npm ci
 33 |       
 34 |     - name: Run tests
 35 |       run: npm run test:run
 36 |       
 37 |     - name: Test CLI functionality
 38 |       run: |
 39 |         echo "Testing CLI basic functionality..."
 40 |         node cli.js --help
 41 |         
 42 |   security:
 43 |     runs-on: ubuntu-latest
 44 |     needs: test
 45 |     
 46 |     steps:
 47 |     - name: Checkout code
 48 |       uses: actions/checkout@v4
 49 |       
 50 |     - name: Setup Node.js
 51 |       uses: actions/setup-node@v4
 52 |       with:
 53 |         node-version: '20.x'
 54 |         cache: 'npm'
 55 |         
 56 |     - name: Install dependencies
 57 |       run: npm ci
 58 |       
 59 |     - name: Run security audit
 60 |       run: |
 61 |         echo "🔍 Running security audit..."
 62 |         # Check for high and critical vulnerabilities only
 63 |         # Moderate vulnerabilities in dev dependencies (esbuild/vite) are acceptable
 64 |         # as they only affect development server, not runtime CLI functionality
 65 |         npm audit --audit-level=high || {
 66 |           echo "⚠️  High/Critical vulnerabilities found. Checking if they affect runtime..."
 67 |           
 68 |           # Check if vulnerabilities are only in devDependencies
 69 |           if npm audit --json | jq -r '.vulnerabilities | to_entries[] | select(.value.severity == "high" or .value.severity == "critical") | .value.via[] | select(type == "object") | .dependency' | grep -v -E '^(vitest|@vitest|vite|esbuild)'; then
 70 |             echo "❌ Runtime dependencies have high/critical vulnerabilities!"
 71 |             exit 1
 72 |           else
 73 |             echo "✅ Only development dependencies affected, runtime is secure"
 74 |           fi
 75 |         }
 76 |       
 77 | 
 78 |   publish:
 79 |     runs-on: ubuntu-latest
 80 |     needs: [test, security]
 81 |     if: github.ref == 'refs/heads/main' && github.event_name == 'push'
 82 |     
 83 |     steps:
 84 |     - name: Checkout code
 85 |       uses: actions/checkout@v4
 86 |       with:
 87 |         fetch-depth: 0  # Fetch full history for version comparison
 88 |       
 89 |     - name: Setup Node.js
 90 |       uses: actions/setup-node@v4
 91 |       with:
 92 |         node-version: '20.x'
 93 |         cache: 'npm'
 94 |         registry-url: 'https://registry.npmjs.org'
 95 |         
 96 |     - name: Install dependencies
 97 |       run: npm ci
 98 |       
 99 |     - name: Check if version changed
100 |       id: version-check
101 |       run: |
102 |         # Get current version from package.json
103 |         CURRENT_VERSION=$(node -p "require('./package.json').version")
104 |         echo "current-version=$CURRENT_VERSION" >> $GITHUB_OUTPUT
105 |         
106 |         # Check if this version exists on NPM
107 |         if npm view svelicon@$CURRENT_VERSION version 2>/dev/null; then
108 |           echo "Version $CURRENT_VERSION already published"
109 |           echo "should-publish=false" >> $GITHUB_OUTPUT
110 |         else
111 |           echo "Version $CURRENT_VERSION is new"
112 |           echo "should-publish=true" >> $GITHUB_OUTPUT
113 |         fi
114 |         
115 |     - name: Build package
116 |       if: steps.version-check.outputs.should-publish == 'true'
117 |       run: |
118 |         echo "📦 Building package for version ${{ steps.version-check.outputs.current-version }}"
119 |         # Add any build steps here if needed
120 |         
121 |     - name: Publish to NPM
122 |       if: steps.version-check.outputs.should-publish == 'true'
123 |       run: |
124 |         echo "🚀 Publishing svelicon@${{ steps.version-check.outputs.current-version }} to NPM..."
125 |         npm publish
126 |       env:
127 |         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
128 |         
129 |     - name: Create Git Tag
130 |       if: steps.version-check.outputs.should-publish == 'true'
131 |       run: |
132 |         git config --local user.email "action@github.com"
133 |         git config --local user.name "GitHub Action"
134 |         git tag "v${{ steps.version-check.outputs.current-version }}"
135 |         git push origin "v${{ steps.version-check.outputs.current-version }}"
136 |       env:
137 |         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
138 |         
139 |     - name: Create GitHub Release
140 |       if: steps.version-check.outputs.should-publish == 'true'
141 |       uses: actions/create-release@v1
142 |       env:
143 |         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
144 |       with:
145 |         tag_name: "v${{ steps.version-check.outputs.current-version }}"
146 |         release_name: "Release v${{ steps.version-check.outputs.current-version }}"
147 |         body: |
148 |           ## 🎉 New Release: v${{ steps.version-check.outputs.current-version }}
149 |           
150 |           ### Installation
151 |           ```bash
152 |           npm install -g svelicon@${{ steps.version-check.outputs.current-version }}
153 |           ```
154 |           
155 |           ### Changes
156 |           See [CHANGELOG.md](https://github.com/friendofsvelte/svelicon/blob/main/CHANGELOG.md) for detailed changes.
157 |           
158 |           ---
159 |           *This release was automatically created by GitHub Actions*
160 |         draft: false
161 |         prerelease: ${{ contains(steps.version-check.outputs.current-version, 'beta') || contains(steps.version-check.outputs.current-version, 'alpha') }}
162 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Svelte Icon Library - Svelicon 🎨
  2 | 
  3 | Create Svelte components from Iconify SVG icons with type-safe support. A simple CLI tool for generating Svelte icons.
  4 | 
  5 | ## Features ✨
  6 | 
  7 | - 🎯 **Iconify Integration**: Access and download icons from the Iconify collection.
  8 | - 🔍 **Smart Search**: Search through thousands of icons with interactive selection.
  9 | - 🚀 **Batch Downloads**: Download multiple icons at lightning speed with parallel processing.
 10 | - ⚡ **Fast Conversion**: Quickly convert SVG icons to Svelte components.
 11 | - 📦 **TypeScript Support**: Generate fully typed components with interfaces for Svelte TypeScript projects.
 12 | - ⚙️ **Auto-Config Validation**: Automatically checks and validates tsconfig.json path mappings.
 13 | - 🎨 **Customizable Icons**: Control icon size, display behavior, and spacing.
 14 | - 🛠️ **Advanced CLI**: Powerful command-line interface with progress tracking and error handling.
 15 | - 🔄 **Flexible Output**: Generate JavaScript or TypeScript Svelte components.
 16 | 
 17 | > Svelicon streamlines the process of using Iconify icons in your Svelte projects, offering TypeScript support and flexible customization.
 18 | 
 19 | ## Requirements 🗒️
 20 | 
 21 | - Svelte 5
 22 | - Awesomeness
 23 | 
 24 | ## Quick Start 🚀
 25 | 
 26 | ### 1. Search & Discover
 27 | ```bash
 28 | npx svelicon search "home" --collection mdi
 29 | ```
 30 | 
 31 | ### 2. Interactive Selection
 32 | Choose from the search results using numbers, ranges, or "all"
 33 | 
 34 | ### 3. Automatic Download
 35 | Icons are downloaded with tsconfig validation and progress tracking
 36 | 
 37 | ### 4. Use in Your Project
 38 | ```svelte
 39 | <script>
 40 |   import HomeIcon from '$icons/MdiHome.svelte';
 41 | </script>
 42 | 
 43 | <HomeIcon size={1.5} class="text-blue-500" />
 44 | ```
 45 | 
 46 | ## Usage 🚀
 47 | 
 48 | ### 🔍 Search Icons
 49 | 
 50 | Search through thousands of icons interactively:
 51 | 
 52 | ```bash
 53 | # Search for icons
 54 | npx svelicon search "arrow"
 55 | 
 56 | # Search within a specific collection
 57 | npx svelicon search "home" --collection mdi
 58 | 
 59 | # Search and browse without downloading
 60 | npx svelicon search "user" --no-download
 61 | 
 62 | # Advanced search with filters
 63 | npx svelicon search "database" --collection lucide --limit 30
 64 | ```
 65 | 
 66 | ### 📦 Download Icons
 67 | 
 68 | #### Single Icon Download
 69 | ```bash
 70 | npx svelicon download "mdi:home"
 71 | ```
 72 | 
 73 | #### Batch Download (Super Fast!)
 74 | ```bash
 75 | # Download multiple icons at once
 76 | npx svelicon download "mdi:home,lucide:star,heroicons:user"
 77 | 
 78 | # Batch download with custom concurrency
 79 | npx svelicon download "mdi:home,mdi:user,lucide:star" --concurrent 20
 80 | ```
 81 | 
 82 | ### Legacy Format (Still Supported)
 83 | ```bash
 84 | npx svelicon fluent/person-passkey-28-filled
 85 | ```
 86 | 
 87 | ### 🛠️ CLI Commands & Options
 88 | 
 89 | #### Search Command
 90 | ```bash
 91 | npx svelicon search <query> [options]
 92 | 
 93 | Options:
 94 |   -c, --collection <name>     Filter by icon collection (e.g., mdi, lucide)
 95 |   --category <name>           Filter by category
 96 |   -l, --limit <number>        Number of results to show (default: 20)
 97 |   -o, --output <dir>          Output directory (default: "src/icons")
 98 |   --withts                    Generate TypeScript version (default: true)
 99 |   --withjs                    Generate JavaScript version
100 |   --concurrent <number>       Concurrent downloads (default: 10)
101 |   --skip-tsconfig            Skip tsconfig.json validation
102 |   --no-download               Only search, don't download
103 | ```
104 | 
105 | #### Download Command
106 | ```bash
107 | npx svelicon download <icons> [options]
108 | 
109 | Arguments:
110 |   <icons>                     Icon name or comma-separated list
111 | 
112 | Options:
113 |   -o, --output <dir>          Output directory (default: "src/icons")
114 |   --withts                    Generate TypeScript version (default: true)
115 |   --withjs                    Generate JavaScript version
116 |   -c, --concurrent <number>   Concurrent downloads for batch (default: 10)
117 |   --skip-tsconfig            Skip tsconfig.json validation
118 | ```
119 | 
120 | ### ⚙️ TypeScript Configuration
121 | 
122 | Svelicon automatically validates your `tsconfig.json` and suggests the optimal configuration:
123 | 
124 | ```json
125 | {
126 |   "compilerOptions": {
127 |     "paths": {
128 |       "$icons": ["src/icons"],
129 |       "$icons/*": ["src/icons/*"]
130 |     }
131 |   }
132 | }
133 | ```
134 | 
135 | This enables clean imports:
136 | ```typescript
137 | import HomeIcon from '$icons/MdiHome.svelte';
138 | ```
139 | 
140 | ## Component Props 🎛️
141 | 
142 | All generated components accept these props:
143 | 
144 | ```typescript
145 | interface IconProps {
146 |   size?: number;      // Icon size in em units
147 |   class?: string;     // Add custom CSS classes to the SVG element
148 | }
149 | ```
150 | 
151 | ## Examples 📝
152 | 
153 | ### 🎯 With Path Mapping (Recommended)
154 | 
155 | ```svelte
156 | <script>
157 |   import HomeIcon from '$icons/MdiHome.svelte';
158 |   import StarIcon from '$icons/LucideStar.svelte';
159 | </script>
160 | 
161 | <HomeIcon size={1.2} />
162 | <StarIcon class="text-yellow-500" />
163 | ```
164 | 
165 | ### TypeScript Usage
166 | 
167 | ```svelte
168 | <script lang="ts">
169 |   import HomeIcon, { type MdiHomeProps } from '$icons/MdiHome.svelte';
170 |   
171 |   let iconProps: MdiHomeProps = {
172 |     size: 1.2,
173 |     class: 'my-custom-icon'
174 |   };
175 | </script>
176 | 
177 | <HomeIcon {...iconProps} />
178 | ```
179 | 
180 | ### Without Path Mapping
181 | 
182 | ```svelte
183 | <script>
184 |   import HomeIcon from './icons/MdiHome.svelte';
185 | </script>
186 | 
187 | <HomeIcon size={1.2} />
188 | ```
189 | 
190 | ## Component Output Structure
191 | 
192 | Generated components include:
193 | 
194 | ```svelte
195 | <script lang="ts" module>
196 |   export interface MdiHomeProps {
197 |     size?: number;
198 |     class?: string;
199 |   }
200 | </script>
201 | 
202 | <script lang="ts">
203 |   const { size = 0.7, class: className = '' }: MdiHomeProps = $props();
204 | </script>
205 | 
206 | <svg
207 |    xmlns="http://www.w3.org/2000/svg"
208 |    width="{size}em"
209 |    height="{size}em"
210 |    viewBox="0 0 24 24"
211 |    class="{className}">
212 |   <!-- optimized SVG path data -->
213 | </svg>
214 | ```
215 | 
216 | ## Benefits 🌟
217 | 
218 | - **🔍 Smart Discovery**: Search through 200,000+ icons with intelligent filtering
219 | - **⚡ Lightning Fast**: Parallel batch downloads with configurable concurrency
220 | - **🎯 Zero Runtime Dependencies**: Svelte icon components are standalone
221 | - **🌲 Tree-Shakeable**: Only import the Svelte icons you use
222 | - **🔧 Auto-Configuration**: Intelligent tsconfig.json validation and suggestions
223 | - **📦 Type-Safe**: Full TypeScript support with generated interfaces
224 | - **📏 Small Bundle Size**: Minimal impact on your Svelte app's size
225 | - **🎨 Flexible**: Use any Iconify icon in your Svelte project
226 | - **📊 Progress Tracking**: Real-time feedback during batch operations
227 | - **🛡️ Error Resilient**: Comprehensive error handling and retry logic
228 | 
229 | https://youtu.be/6cpXq1MHg-A
230 | 
231 | ## Contributing 🤝
232 | 
233 | Contributions are welcome! Please read our Contributing Guide for details.
234 | 
235 | ## License 📄
236 | 
237 | MIT © [Friend of Svelte](https://github.com/friendofsvelte)
238 | 
239 | ## Support 💖
240 | 
241 | If you find this Svelte icon library helpful, please consider:
242 | 
243 | - ⭐ Starring the GitHub repo
244 | - 🐛 Creating issues for bugs and feature requests
245 | - 🔀 Contributing to the code base
246 | 
247 | ## Related Projects 🔗
248 | 
249 | - [Iconify](https://iconify.design/)
250 | - [SvelteKit](https://kit.svelte.dev/)
251 | - [Friend of Svelte](https://github.com/friendofsvelte)
252 | 
253 | ---
254 | 
255 | Made with ❤️ by [Friend of Svelte](https://github.com/friendofsvelte)
256 | 


--------------------------------------------------------------------------------
/test/utils.test.js:
--------------------------------------------------------------------------------
  1 | import { describe, it, expect, vi, beforeEach } from 'vitest';
  2 | import { promises as fs } from 'fs';
  3 | 
  4 | // Mock the fs module
  5 | vi.mock('fs');
  6 | const mockFs = vi.mocked(fs);
  7 | 
  8 | describe('Utility Functions', () => {
  9 |   beforeEach(() => {
 10 |     vi.clearAllMocks();
 11 |   });
 12 | 
 13 |   describe('TSConfig Validation', () => {
 14 |     it('should detect valid $icons path mapping', async () => {
 15 |       const validTsConfig = {
 16 |         compilerOptions: {
 17 |           paths: {
 18 |             '$icons': ['src/icons'],
 19 |             '$icons/*': ['src/icons/*']
 20 |           }
 21 |         }
 22 |       };
 23 | 
 24 |       mockFs.readFile.mockResolvedValue(JSON.stringify(validTsConfig));
 25 | 
 26 |       // Simulate the validateTsConfig function logic
 27 |       const configContent = await fs.readFile('tsconfig.json', 'utf8');
 28 |       const config = JSON.parse(configContent);
 29 |       const paths = config.compilerOptions?.paths;
 30 |       const hasIconsMapping = paths['$icons'] || paths['$icons/*'];
 31 | 
 32 |       expect(hasIconsMapping).toBeTruthy();
 33 |     });
 34 | 
 35 |     it('should handle missing tsconfig.json', async () => {
 36 |       mockFs.readFile.mockRejectedValue(new Error('File not found'));
 37 | 
 38 |       try {
 39 |         await fs.readFile('tsconfig.json', 'utf8');
 40 |       } catch (error) {
 41 |         expect(error.message).toBe('File not found');
 42 |       }
 43 |     });
 44 | 
 45 |     it('should handle invalid JSON in tsconfig', async () => {
 46 |       mockFs.readFile.mockResolvedValue('invalid json content');
 47 | 
 48 |       try {
 49 |         const configContent = await fs.readFile('tsconfig.json', 'utf8');
 50 |         JSON.parse(configContent);
 51 |       } catch (error) {
 52 |         expect(error).toBeInstanceOf(SyntaxError);
 53 |       }
 54 |     });
 55 | 
 56 |     it('should check multiple tsconfig locations', async () => {
 57 |       const possiblePaths = [
 58 |         'tsconfig.json',
 59 |         '.svelte-kit/tsconfig.json',
 60 |         'tsconfig.app.json'
 61 |       ];
 62 | 
 63 |       // Mock first two to fail, third to succeed
 64 |       mockFs.readFile
 65 |         .mockRejectedValueOnce(new Error('Not found'))
 66 |         .mockRejectedValueOnce(new Error('Not found'))
 67 |         .mockResolvedValueOnce(JSON.stringify({
 68 |           compilerOptions: {
 69 |             paths: {
 70 |               '$icons/*': ['src/icons/*']
 71 |             }
 72 |           }
 73 |         }));
 74 | 
 75 |       let foundConfig = false;
 76 |       for (const configPath of possiblePaths) {
 77 |         try {
 78 |           const content = await fs.readFile(configPath, 'utf8');
 79 |           const config = JSON.parse(content);
 80 |           if (config.compilerOptions?.paths?.['$icons/*']) {
 81 |             foundConfig = true;
 82 |             break;
 83 |           }
 84 |         } catch (error) {
 85 |           continue;
 86 |         }
 87 |       }
 88 | 
 89 |       expect(foundConfig).toBe(true);
 90 |     });
 91 |   });
 92 | 
 93 |   describe('Progress Tracking', () => {
 94 |     it('should track progress correctly', () => {
 95 |       // Simulate the createProgressTracker function
 96 |       const createProgressTracker = (total, label = 'Processing') => {
 97 |         let completed = 0;
 98 |         return {
 99 |           update: () => {
100 |             completed++;
101 |             const percentage = Math.round((completed / total) * 100);
102 |             return { completed, total, percentage };
103 |           },
104 |           reset: () => { completed = 0; },
105 |           getCompleted: () => completed
106 |         };
107 |       };
108 | 
109 |       const tracker = createProgressTracker(5, 'Testing');
110 |       
111 |       expect(tracker.getCompleted()).toBe(0);
112 |       
113 |       const result1 = tracker.update();
114 |       expect(result1).toEqual({ completed: 1, total: 5, percentage: 20 });
115 |       
116 |       const result2 = tracker.update();
117 |       expect(result2).toEqual({ completed: 2, total: 5, percentage: 40 });
118 |       
119 |       tracker.reset();
120 |       expect(tracker.getCompleted()).toBe(0);
121 |     });
122 |   });
123 | 
124 |   describe('String Capitalization', () => {
125 |     it('should capitalize icon names correctly', () => {
126 |       const capitalizeFirstLetter = (string) => {
127 |         return string
128 |           .split(/[:,-]/)
129 |           .map(word => word.charAt(0).toUpperCase() + word.slice(1))
130 |           .join('');
131 |       };
132 | 
133 |       const testCases = [
134 |         { input: 'fluent:home-24-filled', expected: 'FluentHome24Filled' },
135 |         { input: 'material-design-icons', expected: 'MaterialDesignIcons' },
136 |         { input: 'simple', expected: 'Simple' },
137 |         { input: 'multi:part-name', expected: 'MultiPartName' },
138 |         { input: 'with,comma-separated', expected: 'WithCommaSeparated' }
139 |       ];
140 | 
141 |       testCases.forEach(({ input, expected }) => {
142 |         expect(capitalizeFirstLetter(input)).toBe(expected);
143 |       });
144 |     });
145 | 
146 |     it('should handle edge cases in capitalization', () => {
147 |       const capitalizeFirstLetter = (string) => {
148 |         return string
149 |           .split(/[:,-]/)
150 |           .map(word => word.charAt(0).toUpperCase() + word.slice(1))
151 |           .join('');
152 |       };
153 | 
154 |       const edgeCases = [
155 |         { input: '', expected: '' },
156 |         { input: 'a', expected: 'A' },
157 |         { input: 'a:b', expected: 'AB' },
158 |         { input: '123-test', expected: '123Test' },
159 |         { input: 'UPPERCASE', expected: 'UPPERCASE' }
160 |       ];
161 | 
162 |       edgeCases.forEach(({ input, expected }) => {
163 |         expect(capitalizeFirstLetter(input)).toBe(expected);
164 |       });
165 |     });
166 |   });
167 | 
168 |   describe('SVG Template Generation', () => {
169 |     it('should generate correct SVG template', () => {
170 |       const generateSvgTemplate = (pathData, width, height, size) => `<svg
171 |    xmlns="http://www.w3.org/2000/svg"
172 |    width="{${size}}em"
173 |    height="{${size}}em"
174 |    viewBox="0 0 ${width} ${height}"
175 |    class="{className}">
176 |   ${pathData}
177 | </svg>`;
178 | 
179 |       const result = generateSvgTemplate('<path d="M10 10"/>', 24, 24, 'size');
180 |       
181 |       expect(result).toContain('width="{size}em"');
182 |       expect(result).toContain('height="{size}em"');
183 |       expect(result).toContain('viewBox="0 0 24 24"');
184 |       expect(result).toContain('<path d="M10 10"/>');
185 |       expect(result).toContain('class="{className}"');
186 |     });
187 | 
188 |     it('should generate TypeScript component template', () => {
189 |       const generateComponentTemplate = ({ scriptContent, size = 'size', pathData, width, height }) => {
190 |         const svgTemplate = `<svg
191 |    xmlns="http://www.w3.org/2000/svg"
192 |    width="{${size}}em"
193 |    height="{${size}}em"
194 |    viewBox="0 0 ${width} ${height}"
195 |    class="{className}">
196 |   ${pathData}
197 | </svg>`;
198 |         return `${scriptContent}\n\n${svgTemplate}`;
199 |       };
200 | 
201 |       const scriptContent = `<script lang="ts" module>
202 |   export interface TestProps {
203 |     size?: number;
204 |     class?: string;
205 |   }
206 | </script>
207 | 
208 | <script lang="ts">
209 |   const { size = 0.7, class: className = '' }: TestProps = $props();
210 | </script>`;
211 | 
212 |       const result = generateComponentTemplate({
213 |         scriptContent,
214 |         pathData: '<path d="M10 10"/>',
215 |         width: 24,
216 |         height: 24
217 |       });
218 | 
219 |       expect(result).toContain('<script lang="ts" module>');
220 |       expect(result).toContain('export interface TestProps');
221 |       expect(result).toContain('<script lang="ts">');
222 |       expect(result).toContain('$props()');
223 |       expect(result).toContain('<svg');
224 |       expect(result).toContain('<path d="M10 10"/>');
225 |     });
226 |   });
227 | 
228 |   describe('Error Handling', () => {
229 |     it('should handle network timeouts gracefully', async () => {
230 |       const mockNetworkCall = vi.fn().mockRejectedValue(new Error('ETIMEDOUT'));
231 | 
232 |       try {
233 |         await mockNetworkCall();
234 |       } catch (error) {
235 |         expect(error.message).toBe('ETIMEDOUT');
236 |       }
237 |     });
238 | 
239 |     it('should handle file system errors', async () => {
240 |       mockFs.writeFile.mockRejectedValue(new Error('Permission denied'));
241 | 
242 |       try {
243 |         await fs.writeFile('test.txt', 'content');
244 |       } catch (error) {
245 |         expect(error.message).toBe('Permission denied');
246 |       }
247 |     });
248 | 
249 |     it('should handle invalid SVG content', () => {
250 |       const invalidSvgContent = 'not an svg';
251 |       
252 |       // Simulate SVG validation
253 |       const isValidSvg = (content) => {
254 |         return content.includes('<svg') && content.includes('</svg>');
255 |       };
256 | 
257 |       expect(isValidSvg(invalidSvgContent)).toBe(false);
258 |       expect(isValidSvg('<svg></svg>')).toBe(true);
259 |     });
260 |   });
261 | 
262 |   describe('Concurrency Control', () => {
263 |     it('should respect concurrency limits', async () => {
264 |       const pLimit = (concurrency) => {
265 |         let running = 0;
266 |         const queue = [];
267 | 
268 |         return (fn) => {
269 |           return new Promise((resolve, reject) => {
270 |             queue.push({ fn, resolve, reject });
271 |             process();
272 |           });
273 |         };
274 | 
275 |         function process() {
276 |           if (running >= concurrency || queue.length === 0) return;
277 |           
278 |           running++;
279 |           const { fn, resolve, reject } = queue.shift();
280 |           
281 |           fn().then(resolve, reject).finally(() => {
282 |             running--;
283 |             process();
284 |           });
285 |         }
286 |       };
287 | 
288 |       const limit = pLimit(2);
289 |       let maxConcurrent = 0;
290 |       let currentConcurrent = 0;
291 | 
292 |       const tasks = Array.from({ length: 5 }, (_, i) => 
293 |         limit(async () => {
294 |           currentConcurrent++;
295 |           maxConcurrent = Math.max(maxConcurrent, currentConcurrent);
296 |           await new Promise(resolve => setTimeout(resolve, 10));
297 |           currentConcurrent--;
298 |           return i;
299 |         })
300 |       );
301 | 
302 |       await Promise.all(tasks);
303 |       expect(maxConcurrent).toBeLessThanOrEqual(2);
304 |     });
305 |   });
306 | });
307 | 


--------------------------------------------------------------------------------
/test/cli.test.js:
--------------------------------------------------------------------------------
  1 | import { describe, it, expect, vi, beforeEach } from 'vitest';
  2 | import { exec } from 'child_process';
  3 | import { promisify } from 'util';
  4 | 
  5 | const execAsync = promisify(exec);
  6 | 
  7 | describe('CLI Commands', () => {
  8 |   const CLI_PATH = './cli.js';
  9 | 
 10 |   describe('Icon Format Parsing', () => {
 11 |     it('should convert colon format to slash format', () => {
 12 |       // Test the conversion logic directly
 13 |       const testCases = [
 14 |         { input: 'fluent:home-24-filled', expected: 'fluent/home-24-filled' },
 15 |         { input: 'mdi:user', expected: 'mdi/user' },
 16 |         { input: 'lucide:arrow-right', expected: 'lucide/arrow-right' },
 17 |         { input: 'material-symbols:settings', expected: 'material-symbols/settings' }
 18 |       ];
 19 | 
 20 |       testCases.forEach(({ input, expected }) => {
 21 |         // Simulate the conversion logic from cli.js
 22 |         const converted = input.includes(':') && !input.includes('/') 
 23 |           ? input.replace(':', '/') 
 24 |           : input;
 25 |         expect(converted).toBe(expected);
 26 |       });
 27 |     });
 28 | 
 29 |     it('should handle mixed formats in comma-separated list', () => {
 30 |       const input = 'fluent:home-24-filled,mdi/user,lucide:arrow-right';
 31 |       const icons = input.split(',')
 32 |         .map(icon => icon.trim())
 33 |         .filter(Boolean)
 34 |         .map(icon => {
 35 |           if (icon.includes(':') && !icon.includes('/')) {
 36 |             return icon.replace(':', '/');
 37 |           }
 38 |           return icon;
 39 |         });
 40 | 
 41 |       expect(icons).toEqual([
 42 |         'fluent/home-24-filled',
 43 |         'mdi/user',
 44 |         'lucide/arrow-right'
 45 |       ]);
 46 |     });
 47 | 
 48 |     it('should preserve slash format when present', () => {
 49 |       const input = 'mdi/home';
 50 |       const converted = input.includes(':') && !input.includes('/') 
 51 |         ? input.replace(':', '/') 
 52 |         : input;
 53 |       expect(converted).toBe('mdi/home');
 54 |     });
 55 | 
 56 |     it('should handle edge cases', () => {
 57 |       const testCases = [
 58 |         { input: 'collection:icon:with:colons', expected: 'collection/icon:with:colons' },
 59 |         { input: 'collection/icon:mixed', expected: 'collection/icon:mixed' },
 60 |         { input: 'simple-icon', expected: 'simple-icon' }
 61 |       ];
 62 | 
 63 |       testCases.forEach(({ input, expected }) => {
 64 |         const converted = input.includes(':') && !input.includes('/') 
 65 |           ? input.replace(':', '/') 
 66 |           : input;
 67 |         expect(converted).toBe(expected);
 68 |       });
 69 |     });
 70 |   });
 71 | 
 72 |   describe('Command Line Arguments', () => {
 73 |     it('should parse download command with multiple icons', () => {
 74 |       const args = ['download', 'fluent:home-24-filled,fluent:data-area-24-filled', '-o', 'src/icons', '--withts'];
 75 |       
 76 |       // Simulate argument parsing
 77 |       const iconsArg = args[1];
 78 |       const outputIndex = args.indexOf('-o');
 79 |       const withTsIndex = args.indexOf('--withts');
 80 |       
 81 |       expect(iconsArg).toBe('fluent:home-24-filled,fluent:data-area-24-filled');
 82 |       expect(outputIndex).toBe(2);
 83 |       expect(args[outputIndex + 1]).toBe('src/icons');
 84 |       expect(withTsIndex).toBeGreaterThan(-1);
 85 |     });
 86 | 
 87 |     it('should handle quoted arguments', () => {
 88 |       const quotedInput = '"fluent:home-24-filled,fluent:data-area-24-filled,fluent:apps-24-filled"';
 89 |       const unquoted = quotedInput.replace(/^"(.*)"$/, '$1');
 90 |       
 91 |       expect(unquoted).toBe('fluent:home-24-filled,fluent:data-area-24-filled,fluent:apps-24-filled');
 92 |     });
 93 |   });
 94 | 
 95 |   describe('Component Name Generation', () => {
 96 |     it('should generate correct component names from icon identifiers', () => {
 97 |       const testCases = [
 98 |         { input: 'fluent/home-24-filled', expected: 'FluentHome24Filled' },
 99 |         { input: 'mdi/user-circle', expected: 'MdiUserCircle' },
100 |         { input: 'lucide/arrow-right', expected: 'LucideArrowRight' },
101 |         { input: 'material-symbols/settings-outline', expected: 'MaterialSymbolsSettingsOutline' }
102 |       ];
103 | 
104 |       // Simulate the capitalizeFirstLetter function from index.js
105 |       const capitalizeFirstLetter = (string) => {
106 |         return string
107 |           .split(/[:,-]/)
108 |           .map(word => word.charAt(0).toUpperCase() + word.slice(1))
109 |           .join('');
110 |       };
111 | 
112 |       testCases.forEach(({ input, expected }) => {
113 |         const names = input.split('/');
114 |         const collectionName = names[0];
115 |         const iconName = names[1];
116 |         const componentName = `${capitalizeFirstLetter(collectionName)}${capitalizeFirstLetter(iconName.replace(/ /g, '-'))}`;
117 |         
118 |         expect(componentName).toBe(expected);
119 |       });
120 |     });
121 |   });
122 | 
123 |   describe('Error Handling', () => {
124 |     it('should handle invalid icon formats gracefully', () => {
125 |       const invalidFormats = [
126 |         '',
127 |         '   ',
128 |         'invalid',
129 |         'collection/',
130 |         '/icon-name',
131 |         'collection//icon-name'
132 |       ];
133 | 
134 |       invalidFormats.forEach(format => {
135 |         const names = format.split('/');
136 |         const collectionName = names[0];
137 |         const iconName = names[1];
138 |         
139 |         // Check if either part is missing or empty/whitespace
140 |         const isInvalid = !iconName || !collectionName || 
141 |                          iconName.trim() === '' || collectionName.trim() === '';
142 |         
143 |         if (format === '' || format === '   ' || format === 'collection/' || format === '/icon-name') {
144 |           expect(isInvalid).toBe(true);
145 |         }
146 |       });
147 |     });
148 | 
149 |     it('should validate required arguments', () => {
150 |       const requiredArgs = ['download'];
151 |       const providedArgs = ['download', 'fluent:home-24-filled'];
152 |       
153 |       expect(providedArgs.length).toBeGreaterThan(requiredArgs.length);
154 |       expect(providedArgs[0]).toBe('download');
155 |       expect(providedArgs[1]).toBeTruthy();
156 |     });
157 |   });
158 | 
159 |   describe('Options Parsing', () => {
160 |     it('should parse output directory option', () => {
161 |       const args = ['-o', 'custom/path', '--withts'];
162 |       const outputIndex = args.indexOf('-o');
163 |       const outputDir = outputIndex !== -1 ? args[outputIndex + 1] : 'src/icons';
164 |       
165 |       expect(outputDir).toBe('custom/path');
166 |     });
167 | 
168 |     it('should parse TypeScript option', () => {
169 |       const args = ['--withts'];
170 |       const withTs = args.includes('--withts');
171 |       
172 |       expect(withTs).toBe(true);
173 |     });
174 | 
175 |     it('should parse concurrency option', () => {
176 |       const args = ['-c', '5'];
177 |       const concurrencyIndex = args.indexOf('-c');
178 |       const concurrency = concurrencyIndex !== -1 ? parseInt(args[concurrencyIndex + 1]) : 10;
179 |       
180 |       expect(concurrency).toBe(5);
181 |     });
182 | 
183 |     it('should use default values when options not provided', () => {
184 |       const args = ['download', 'mdi:home'];
185 |       
186 |       const outputDir = args.includes('-o') ? args[args.indexOf('-o') + 1] : 'src/icons';
187 |       const withTs = args.includes('--withts') || !args.includes('--withjs');
188 |       const concurrency = args.includes('-c') ? parseInt(args[args.indexOf('-c') + 1]) : 10;
189 |       
190 |       expect(outputDir).toBe('src/icons');
191 |       expect(withTs).toBe(true);
192 |       expect(concurrency).toBe(10);
193 |     });
194 |   });
195 | 
196 |   describe('Pattern Download Command', () => {
197 |     it('should validate pattern download arguments', () => {
198 |       const args = ['node', 'cli.js', 'pattern-download', 'eye*', '-c', 'fluent', '-o', 'icons'];
199 |       
200 |       // Test argument parsing logic
201 |       const pattern = args[3]; // 'eye*'
202 |       const collectionIndex = args.indexOf('-c');
203 |       const collection = collectionIndex !== -1 ? args[collectionIndex + 1] : null;
204 |       const outputIndex = args.indexOf('-o');
205 |       const output = outputIndex !== -1 ? args[outputIndex + 1] : 'src/icons';
206 |       
207 |       expect(pattern).toBe('eye*');
208 |       expect(collection).toBe('fluent');
209 |       expect(output).toBe('icons');
210 |     });
211 | 
212 |     it('should require collection parameter', () => {
213 |       const args = ['node', 'cli.js', 'pattern-download', 'eye*'];
214 |       
215 |       expect(() => {
216 |         // This would normally be handled by commander.js validation
217 |         const hasCollection = args.includes('-c') || args.includes('--collection');
218 |         if (!hasCollection) {
219 |           throw new Error('required option \'-c, --collection <name>\' not specified');
220 |         }
221 |       }).toThrow('required option');
222 |     });
223 | 
224 |     it('should handle various pattern formats', () => {
225 |       const patterns = [
226 |         'eye*',      // prefix
227 |         '*home',     // suffix  
228 |         '*arrow*',   // contains
229 |         '*',         // all
230 |         '^user.*'    // regex
231 |       ];
232 | 
233 |       patterns.forEach(pattern => {
234 |         const args = ['node', 'cli.js', 'pattern-download', pattern, '-c', 'fluent'];
235 |         const patternArg = args[3];
236 |         expect(patternArg).toBe(pattern);
237 |       });
238 |     });
239 | 
240 |     it('should parse command line options correctly', () => {
241 |       const args = [
242 |         'node', 'cli.js', 'pattern-download', 'home*', 
243 |         '-c', 'mdi',
244 |         '-o', 'custom/path',
245 |         '--withjs',
246 |         '--concurrent', '5',
247 |         '-l', '50',
248 |         '--skip-tsconfig'
249 |       ];
250 |       
251 |       // Test option parsing
252 |       const collection = args[args.indexOf('-c') + 1];
253 |       const output = args[args.indexOf('-o') + 1];
254 |       const concurrent = args[args.indexOf('--concurrent') + 1];
255 |       const limit = args[args.indexOf('-l') + 1];
256 |       const hasWithjs = args.includes('--withjs');
257 |       const hasSkipTsconfig = args.includes('--skip-tsconfig');
258 |       
259 |       expect(collection).toBe('mdi');
260 |       expect(output).toBe('custom/path');
261 |       expect(concurrent).toBe('5');
262 |       expect(limit).toBe('50');
263 |       expect(hasWithjs).toBe(true);
264 |       expect(hasSkipTsconfig).toBe(true);
265 |     });
266 |   });
267 | });
268 | 


--------------------------------------------------------------------------------
/cli.js:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env node
  2 | import {program} from 'commander';
  3 | import {downloadIcon, downloadIcons, searchIcons, downloadCollection} from './index.js';
  4 | import readline from 'readline';
  5 | 
  6 | // Helper function for interactive selection
  7 | async function interactiveSelect(icons, maxDisplay = 20) {
  8 |     if (icons.length === 0) return [];
  9 |     
 10 |     const rl = readline.createInterface({
 11 |         input: process.stdin,
 12 |         output: process.stdout
 13 |     });
 14 | 
 15 |     const displayIcons = icons.slice(0, maxDisplay);
 16 |     console.log('\n📋 Available icons:');
 17 |     displayIcons.forEach((icon, index) => {
 18 |         console.log(`  ${index + 1}. ${icon}`);
 19 |     });
 20 |     
 21 |     if (icons.length > maxDisplay) {
 22 |         console.log(`  ... and ${icons.length - maxDisplay} more`);
 23 |     }
 24 | 
 25 |     return new Promise((resolve) => {
 26 |         rl.question('\nSelect icons (comma-separated numbers, ranges like 1-5, or "all"): ', (answer) => {
 27 |             rl.close();
 28 |             
 29 |             if (answer.toLowerCase().trim() === 'all') {
 30 |                 resolve(icons);
 31 |                 return;
 32 |             }
 33 |             
 34 |             const selected = [];
 35 |             const parts = answer.split(',').map(s => s.trim());
 36 |             
 37 |             for (const part of parts) {
 38 |                 if (part.includes('-')) {
 39 |                     const [start, end] = part.split('-').map(n => parseInt(n.trim()));
 40 |                     for (let i = start; i <= Math.min(end, displayIcons.length); i++) {
 41 |                         if (i >= 1) selected.push(displayIcons[i - 1]);
 42 |                     }
 43 |                 } else {
 44 |                     const index = parseInt(part);
 45 |                     if (index >= 1 && index <= displayIcons.length) {
 46 |                         selected.push(displayIcons[index - 1]);
 47 |                     }
 48 |                 }
 49 |             }
 50 |             
 51 |             resolve([...new Set(selected)]); // Remove duplicates
 52 |         });
 53 |     });
 54 | }
 55 | 
 56 | // Single icon download command
 57 | program
 58 |     .command('download')
 59 |     .description('Download a single icon or multiple icons')
 60 |     .argument('<icons>', 'icon name (e.g., mdi:home) or comma-separated list')
 61 |     .option('-o, --output <dir>', 'output directory', 'src/icons')
 62 |     .option('--withts', 'generate TypeScript version', true)
 63 |     .option('--withjs', 'generate JavaScript version', false)
 64 |     .option('-c, --concurrent <number>', 'concurrent downloads for batch', '10')
 65 |     .option('--skip-tsconfig', 'skip tsconfig.json validation')
 66 |     .action(async (icons, options) => {
 67 |         try {
 68 |             // Parse icon list and convert colon format to slash format
 69 |             const iconList = icons.split(',')
 70 |                 .map(icon => icon.trim())
 71 |                 .filter(Boolean)
 72 |                 .map(icon => {
 73 |                     // Convert "collection:icon-name" to "collection/icon-name"
 74 |                     if (icon.includes(':') && !icon.includes('/')) {
 75 |                         return icon.replace(':', '/');
 76 |                     }
 77 |                     return icon;
 78 |                 });
 79 |             const concurrency = parseInt(options.concurrent);
 80 |             
 81 |             if (iconList.length === 1) {
 82 |                 // Single icon download
 83 |                 const results = await downloadIcon(iconList[0], {
 84 |                     outputDir: options.output,
 85 |                     withTs: options.withts,
 86 |                     withJs: options.withjs,
 87 |                     skipTsConfigCheck: options.skipTsconfig
 88 |                 });
 89 | 
 90 |                 if (results.length) {
 91 |                     console.log('https://github.com/friendofsvelte/svelicon ✨ \n');
 92 |                     results.forEach(file => {
 93 |                         console.log(`🚀 Successfully created: ${file}`);
 94 |                     });
 95 |                 }
 96 |             } else {
 97 |                 // Batch download
 98 |                 const results = await downloadIcons(iconList, {
 99 |                     outputDir: options.output,
100 |                     withTs: options.withts,
101 |                     withJs: options.withjs,
102 |                     concurrency,
103 |                     skipTsConfigCheck: options.skipTsconfig
104 |                 });
105 | 
106 |                 if (results.length) {
107 |                     console.log('\nhttps://github.com/friendofsvelte/svelicon ✨');
108 |                     console.log(`🚀 Successfully created ${results.length} files`);
109 |                 }
110 |             }
111 |         } catch (error) {
112 |             console.error('Error:', error.message);
113 |             process.exit(1);
114 |         }
115 |     });
116 | 
117 | // Pattern download command
118 | program
119 |     .command('pattern-download')
120 |     .description('Download icons matching a pattern from a specific collection')
121 |     .argument('<pattern>', 'pattern to match (e.g., "eye*", "*home", "*arrow*", "*", or regex)')
122 |     .requiredOption('-c, --collection <name>', 'icon collection (e.g., fluent, mdi, lucide)')
123 |     .option('-o, --output <dir>', 'output directory', 'src/icons')
124 |     .option('--withts', 'generate TypeScript version', true)
125 |     .option('--withjs', 'generate JavaScript version', false)
126 |     .option('--concurrent <number>', 'concurrent downloads', '10')
127 |     .option('-l, --limit <number>', 'maximum icons to search', '100')
128 |     .option('--skip-tsconfig', 'skip tsconfig.json validation')
129 |     .action(async (pattern, options) => {
130 |         try {
131 |             console.log(`🎯 Pattern Download: "${pattern}" from "${options.collection}"`);
132 |             console.log('📋 Pattern Examples:');
133 |             console.log('  • "eye*"     - Icons starting with "eye"');
134 |             console.log('  • "*home"    - Icons ending with "home"');
135 |             console.log('  • "*arrow*"  - Icons containing "arrow"');
136 |             console.log('  • "*"        - All icons in collection');
137 |             console.log('  • "^user.*"  - Regex: icons starting with "user"');
138 |             console.log('');
139 | 
140 |             const results = await downloadCollection(pattern, {
141 |                 collection: options.collection,
142 |                 outputDir: options.output,
143 |                 withTs: options.withts,
144 |                 withJs: options.withjs,
145 |                 concurrency: parseInt(options.concurrent),
146 |                 limit: parseInt(options.limit),
147 |                 skipTsConfigCheck: options.skipTsconfig
148 |             });
149 | 
150 |             if (results.length > 0) {
151 |                 console.log('\nhttps://github.com/friendofsvelte/svelicon ✨');
152 |                 console.log(`🚀 Successfully created ${results.length} files`);
153 |                 console.log(`📁 Location: ${options.output}/`);
154 |             } else {
155 |                 console.log('\n💡 Try different patterns or check collection name');
156 |                 console.log('   Popular collections: fluent, mdi, lucide, heroicons, tabler');
157 |             }
158 |         } catch (error) {
159 |             console.error('Error:', error.message);
160 |             process.exit(1);
161 |         }
162 |     });
163 | 
164 | // Search command
165 | program
166 |     .command('search')
167 |     .description('Search for icons and optionally download them')
168 |     .argument('<query>', 'search term (e.g., "arrow", "user")')
169 |     .option('-c, --collection <name>', 'filter by icon collection (e.g., mdi, lucide)')
170 |     .option('--category <name>', 'filter by category')
171 |     .option('-l, --limit <number>', 'number of results to show', '20')
172 |     .option('-o, --output <dir>', 'output directory', 'src/icons')
173 |     .option('--withts', 'generate TypeScript version', true)
174 |     .option('--withjs', 'generate JavaScript version', false)
175 |     .option('--concurrent <number>', 'concurrent downloads', '10')
176 |     .option('--skip-tsconfig', 'skip tsconfig.json validation')
177 |     .option('--no-download', 'only search, don\'t download')
178 |     .action(async (query, options) => {
179 |         try {
180 |             console.log(`🔍 Searching for "${query}"...`);
181 |             
182 |             const searchResults = await searchIcons(query, {
183 |                 collection: options.collection,
184 |                 category: options.category,
185 |                 limit: parseInt(options.limit)
186 |             });
187 | 
188 |             if (searchResults.icons.length === 0) {
189 |                 console.log('❌ No icons found matching your search');
190 |                 return;
191 |             }
192 | 
193 |             console.log(`\n✅ Found ${searchResults.icons.length} icons (${searchResults.total} total available)`);
194 | 
195 |             if (options.noDownload) {
196 |                 searchResults.icons.forEach((icon, index) => {
197 |                     console.log(`  ${index + 1}. ${icon}`);
198 |                 });
199 |                 return;
200 |             }
201 | 
202 |             const selectedIcons = await interactiveSelect(searchResults.icons, parseInt(options.limit));
203 | 
204 |             if (selectedIcons.length === 0) {
205 |                 console.log('No icons selected for download');
206 |                 return;
207 |             }
208 | 
209 |             console.log(`\n📦 Downloading ${selectedIcons.length} selected icons...`);
210 | 
211 |             const results = await downloadIcons(selectedIcons, {
212 |                 outputDir: options.output,
213 |                 withTs: options.withts,
214 |                 withJs: options.withjs,
215 |                 concurrency: parseInt(options.concurrent),
216 |                 skipTsConfigCheck: options.skipTsconfig
217 |             });
218 | 
219 |             if (results.length) {
220 |                 console.log('\nhttps://github.com/friendofsvelte/svelicon ✨');
221 |             }
222 |         } catch (error) {
223 |             console.error('Error:', error.message);
224 |             process.exit(1);
225 |         }
226 |     });
227 | 
228 | // Legacy support - keep the old single argument format
229 | program
230 |     .argument('[icon]', 'icon name (legacy format, use "download" command instead)')
231 |     .option('-o, --output <dir>', 'output directory', 'src/icons')
232 |     .option('--withts', 'generate TypeScript version', true)
233 |     .option('--withjs', 'generate JavaScript version', false)
234 |     .action(async (icon, options, command) => {
235 |         // Only run this if no subcommand was used
236 |         if (command.args.length > 0 && !['download', 'search'].includes(process.argv[2])) {
237 |             console.log('⚠️  Legacy format detected. Consider using: svelicon download <icon>');
238 |             
239 |             try {
240 |                 // Convert colon format to slash format for legacy support
241 |                 const processedIcon = icon && icon.includes(':') && !icon.includes('/') 
242 |                     ? icon.replace(':', '/') 
243 |                     : icon;
244 |                     
245 |                 const results = await downloadIcon(processedIcon, {
246 |                     outputDir: options.output,
247 |                     withTs: options.withts,
248 |                     withJs: options.withjs
249 |                 });
250 | 
251 |                 if (results.length) {
252 |                     console.log('https://github.com/friendofsvelte/svelicon ✨ \n');
253 |                     results.forEach(file => {
254 |                         console.log(`🚀 Successfully created: ${file}`);
255 |                     });
256 |                 }
257 |             } catch (error) {
258 |                 console.error('Error:', error.message);
259 |                 process.exit(1);
260 |             }
261 |         }
262 |     });
263 | 
264 | program.parse();


--------------------------------------------------------------------------------
/test/index.test.js:
--------------------------------------------------------------------------------
  1 | import { describe, it, expect } from 'vitest';
  2 | 
  3 | describe('svelicon', () => {
  4 | 
  5 |   describe('Pure Unit Tests', () => {
  6 |     it('should test capitalizeFirstLetter function logic', () => {
  7 |       // Test the capitalization logic used in the codebase
  8 |       const capitalizeFirstLetter = (string) => {
  9 |         return string
 10 |           .split(/[:,-]/)
 11 |           .map(word => word.charAt(0).toUpperCase() + word.slice(1))
 12 |           .join('');
 13 |       };
 14 | 
 15 |       expect(capitalizeFirstLetter('fluent:home-24-filled')).toBe('FluentHome24Filled');
 16 |       expect(capitalizeFirstLetter('mdi:user-circle')).toBe('MdiUserCircle');
 17 |       expect(capitalizeFirstLetter('material-symbols:settings')).toBe('MaterialSymbolsSettings');
 18 |       expect(capitalizeFirstLetter('simple')).toBe('Simple');
 19 |     });
 20 | 
 21 |     it('should test icon name parsing logic', () => {
 22 |       // Test the icon name parsing logic
 23 |       const parseIconName = (icon) => {
 24 |         const names = icon.split('/');
 25 |         const collectionName = names[0];
 26 |         const iconName = names[1];
 27 |         return { collectionName, iconName };
 28 |       };
 29 | 
 30 |       const result1 = parseIconName('mdi/home');
 31 |       expect(result1.collectionName).toBe('mdi');
 32 |       expect(result1.iconName).toBe('home');
 33 | 
 34 |       const result2 = parseIconName('fluent/data-area-24-filled');
 35 |       expect(result2.collectionName).toBe('fluent');
 36 |       expect(result2.iconName).toBe('data-area-24-filled');
 37 |     });
 38 | 
 39 |     it('should test colon to slash conversion logic', () => {
 40 |       // Test the colon to slash conversion logic from CLI
 41 |       const convertColonToSlash = (icon) => {
 42 |         return icon.includes(':') && !icon.includes('/') 
 43 |           ? icon.replace(':', '/') 
 44 |           : icon;
 45 |       };
 46 | 
 47 |       expect(convertColonToSlash('fluent:home-24-filled')).toBe('fluent/home-24-filled');
 48 |       expect(convertColonToSlash('mdi:user')).toBe('mdi/user');
 49 |       expect(convertColonToSlash('mdi/home')).toBe('mdi/home'); // Already has slash
 50 |       expect(convertColonToSlash('simple-icon')).toBe('simple-icon'); // No colon
 51 |     });
 52 | 
 53 |     it('should test component name generation logic', () => {
 54 |       // Test component name generation
 55 |       const generateComponentName = (collectionName, iconName) => {
 56 |         const capitalizeFirstLetter = (string) => {
 57 |           return string
 58 |             .split(/[:,-]/)
 59 |             .map(word => word.charAt(0).toUpperCase() + word.slice(1))
 60 |             .join('');
 61 |         };
 62 |         
 63 |         return `${capitalizeFirstLetter(collectionName)}${capitalizeFirstLetter(iconName.replace(/ /g, '-'))}`;
 64 |       };
 65 | 
 66 |       expect(generateComponentName('fluent', 'home-24-filled')).toBe('FluentHome24Filled');
 67 |       expect(generateComponentName('mdi', 'user-circle')).toBe('MdiUserCircle');
 68 |       expect(generateComponentName('material-symbols', 'arrow-back-ios')).toBe('MaterialSymbolsArrowBackIos');
 69 |     });
 70 |   });
 71 | 
 72 |   describe('Template Generation', () => {
 73 |     it('should generate correct SVG template', () => {
 74 |       const generateSvgTemplate = (pathData, width, height, size) => `<svg
 75 |    xmlns="http://www.w3.org/2000/svg"
 76 |    width="{${size}}em"
 77 |    height="{${size}}em"
 78 |    viewBox="0 0 ${width} ${height}"
 79 |    class="{className}">
 80 |   ${pathData}
 81 | </svg>`;
 82 | 
 83 |       const result = generateSvgTemplate('<path d="M10 10"/>', 24, 24, 'size');
 84 |       
 85 |       expect(result).toContain('width="{size}em"');
 86 |       expect(result).toContain('height="{size}em"');
 87 |       expect(result).toContain('viewBox="0 0 24 24"');
 88 |       expect(result).toContain('<path d="M10 10"/>');
 89 |       expect(result).toContain('class="{className}"');
 90 |     });
 91 | 
 92 |     it('should generate TypeScript component template', () => {
 93 |       const generateComponent = (pathData, height, width, componentName, isTypescript) => {
 94 |         const scriptContent = isTypescript ? `<script lang="ts" module>
 95 |   export interface ${componentName}Props {
 96 |     size?: number;
 97 |     class?: string;
 98 |   }
 99 | </script>
100 | 
101 | <script lang="ts">
102 |   const { size = 0.7, class: className = '' }: ${componentName}Props = $props();
103 | </script>` : `<script>
104 |   const { size = 0.7, class: className = '' } = $props();
105 | </script>`;
106 | 
107 |         const svgTemplate = `<svg
108 |    xmlns="http://www.w3.org/2000/svg"
109 |    width="{size}em"
110 |    height="{size}em"
111 |    viewBox="0 0 ${width} ${height}"
112 |    class="{className}">
113 |   ${pathData}
114 | </svg>`;
115 | 
116 |         return `${scriptContent}\n\n${svgTemplate}`;
117 |       };
118 | 
119 |       const tsResult = generateComponent('<path d="M10 10"/>', 24, 24, 'TestIcon', true);
120 |       expect(tsResult).toContain('<script lang="ts" module>');
121 |       expect(tsResult).toContain('export interface TestIconProps');
122 |       expect(tsResult).toContain('<script lang="ts">');
123 |       expect(tsResult).toContain('$props()');
124 | 
125 |       const jsResult = generateComponent('<path d="M10 10"/>', 24, 24, 'TestIcon', false);
126 |       expect(jsResult).toContain('<script>');
127 |       expect(jsResult).not.toContain('lang="ts"');
128 |       expect(jsResult).not.toContain('interface');
129 |     });
130 |   });
131 | 
132 |   describe('Utility Functions', () => {
133 |     it('should test progress tracking logic', () => {
134 |       const createProgressTracker = (total, label = 'Processing') => {
135 |         let completed = 0;
136 |         return {
137 |           update: () => {
138 |             completed++;
139 |             const percentage = Math.round((completed / total) * 100);
140 |             return { completed, total, percentage };
141 |           },
142 |           reset: () => { completed = 0; },
143 |           getCompleted: () => completed
144 |         };
145 |       };
146 | 
147 |       const tracker = createProgressTracker(5, 'Testing');
148 |       
149 |       expect(tracker.getCompleted()).toBe(0);
150 |       
151 |       const result1 = tracker.update();
152 |       expect(result1).toEqual({ completed: 1, total: 5, percentage: 20 });
153 |       
154 |       const result2 = tracker.update();
155 |       expect(result2).toEqual({ completed: 2, total: 5, percentage: 40 });
156 |       
157 |       tracker.reset();
158 |       expect(tracker.getCompleted()).toBe(0);
159 |     });
160 | 
161 |     it('should test array processing logic', () => {
162 |       // Test empty array handling
163 |       const processEmptyArray = (arr) => {
164 |         if (!Array.isArray(arr) || arr.length === 0) {
165 |           return [];
166 |         }
167 |         return arr.map(item => item.toUpperCase());
168 |       };
169 | 
170 |       expect(processEmptyArray([])).toEqual([]);
171 |       expect(processEmptyArray(null)).toEqual([]);
172 |       expect(processEmptyArray(['test'])).toEqual(['TEST']);
173 |     });
174 | 
175 |     it('should test concurrency limit logic', () => {
176 |       // Test concurrency control logic
177 |       const pLimit = (concurrency) => {
178 |         let running = 0;
179 |         const queue = [];
180 | 
181 |         return (fn) => {
182 |           return new Promise((resolve, reject) => {
183 |             queue.push({ fn, resolve, reject });
184 |             process();
185 |           });
186 |         };
187 | 
188 |         function process() {
189 |           if (running >= concurrency || queue.length === 0) return;
190 |           
191 |           running++;
192 |           const { fn, resolve, reject } = queue.shift();
193 |           
194 |           fn().then(resolve, reject).finally(() => {
195 |             running--;
196 |             process();
197 |           });
198 |         }
199 |       };
200 | 
201 |       const limit = pLimit(2);
202 |       expect(typeof limit).toBe('function');
203 |     });
204 |   });
205 | 
206 |   describe('Collection Download', () => {
207 |     it('should match wildcard patterns correctly', () => {
208 |       // Import the pattern matching function (we'll need to export it)
209 |       const matchesPattern = (iconName, pattern) => {
210 |         if (pattern === '*') return true;
211 |         if (pattern.startsWith('*') && pattern.endsWith('*')) {
212 |           const text = pattern.slice(1, -1);
213 |           return iconName.includes(text);
214 |         }
215 |         if (pattern.startsWith('*')) {
216 |           const suffix = pattern.slice(1);
217 |           return iconName.endsWith(suffix);
218 |         }
219 |         if (pattern.endsWith('*')) {
220 |           const prefix = pattern.slice(0, -1);
221 |           return iconName.startsWith(prefix);
222 |         }
223 |         try {
224 |           const regex = new RegExp(pattern, 'i');
225 |           return regex.test(iconName);
226 |         } catch (error) {
227 |           return iconName === pattern;
228 |         }
229 |       };
230 | 
231 |       // Test prefix patterns
232 |       expect(matchesPattern('home-24-filled', 'home*')).toBe(true);
233 |       expect(matchesPattern('arrow-left', 'home*')).toBe(false);
234 |       expect(matchesPattern('eye-open', 'eye*')).toBe(true);
235 | 
236 |       // Test suffix patterns
237 |       expect(matchesPattern('arrow-home', '*home')).toBe(true);
238 |       expect(matchesPattern('home-arrow', '*home')).toBe(false);
239 |       expect(matchesPattern('back-arrow', '*arrow')).toBe(true);
240 | 
241 |       // Test contains patterns
242 |       expect(matchesPattern('user-arrow-left', '*arrow*')).toBe(true);
243 |       expect(matchesPattern('home-filled', '*arrow*')).toBe(false);
244 |       expect(matchesPattern('arrow', '*arrow*')).toBe(true);
245 | 
246 |       // Test match all
247 |       expect(matchesPattern('anything', '*')).toBe(true);
248 |       expect(matchesPattern('', '*')).toBe(true);
249 | 
250 |       // Test regex patterns
251 |       expect(matchesPattern('user123', '^user\\d+')).toBe(true);
252 |       expect(matchesPattern('admin', '^user\\d+')).toBe(false);
253 | 
254 |       // Test exact match fallback
255 |       expect(matchesPattern('exact-match', 'exact-match')).toBe(true);
256 |       expect(matchesPattern('different', 'exact-match')).toBe(false);
257 |     });
258 | 
259 |     it('should handle edge cases in pattern matching', () => {
260 |       const matchesPattern = (iconName, pattern) => {
261 |         if (pattern === '*') return true;
262 |         if (pattern.startsWith('*') && pattern.endsWith('*')) {
263 |           const text = pattern.slice(1, -1);
264 |           return iconName.includes(text);
265 |         }
266 |         if (pattern.startsWith('*')) {
267 |           const suffix = pattern.slice(1);
268 |           return iconName.endsWith(suffix);
269 |         }
270 |         if (pattern.endsWith('*')) {
271 |           const prefix = pattern.slice(0, -1);
272 |           return iconName.startsWith(prefix);
273 |         }
274 |         try {
275 |           const regex = new RegExp(pattern, 'i');
276 |           return regex.test(iconName);
277 |         } catch (error) {
278 |           return iconName === pattern;
279 |         }
280 |       };
281 | 
282 |       // Empty patterns
283 |       expect(matchesPattern('icon', '')).toBe(true); // Empty pattern should match exact
284 |       expect(matchesPattern('', '')).toBe(true);
285 | 
286 |       // Single character patterns
287 |       expect(matchesPattern('a', 'a*')).toBe(true);
288 |       expect(matchesPattern('ab', 'a*')).toBe(true);
289 |       expect(matchesPattern('ba', '*a')).toBe(true);
290 | 
291 |       // Case sensitivity (should be case insensitive for regex)
292 |       expect(matchesPattern('HOME', 'home')).toBe(true);
293 |       expect(matchesPattern('home', 'HOME')).toBe(true);
294 | 
295 |       // Invalid regex patterns should fallback to exact match
296 |       expect(matchesPattern('[invalid', '[invalid')).toBe(true);
297 |       expect(matchesPattern('other', '[invalid')).toBe(false);
298 |     });
299 | 
300 |     it('should validate collection download parameters', async () => {
301 |       const { downloadCollection } = await import('../index.js');
302 |       
303 |       // Should require collection parameter
304 |       await expect(downloadCollection('*', {})).rejects.toThrow('Collection name is required');
305 |       await expect(downloadCollection('*', { collection: '' })).rejects.toThrow('Collection name is required');
306 |     });
307 | 
308 |     it('should handle collection download with mocked API', async () => {
309 |       // Mock the searchIcons function
310 |       const mockSearchIcons = vi.fn();
311 |       const mockDownloadIcons = vi.fn();
312 |       
313 |       // Mock successful search results
314 |       mockSearchIcons.mockResolvedValue({
315 |         icons: ['fluent:home-24-filled', 'fluent:home-20-regular', 'fluent:arrow-left', 'fluent:eye-open']
316 |       });
317 |       
318 |       mockDownloadIcons.mockResolvedValue(['home-24-filled.svelte', 'home-20-regular.svelte']);
319 | 
320 |       // Test would require more complex mocking setup
321 |       // For now, just test the basic structure
322 |       expect(mockSearchIcons).toBeDefined();
323 |       expect(mockDownloadIcons).toBeDefined();
324 |     });
325 |   });
326 | 
327 |   describe('Security', () => {
328 |     it('should prevent path traversal attacks', () => {
329 |       const path = require('path');
330 |       
331 |       // Simulate the sanitizeOutputDir function
332 |       const sanitizeOutputDir = (outputDir) => {
333 |         const resolved = path.resolve(outputDir);
334 |         const cwd = process.cwd();
335 |         
336 |         if (!resolved.startsWith(cwd)) {
337 |           throw new Error(`Output directory must be within current working directory. Got: ${outputDir}`);
338 |         }
339 |         
340 |         return resolved;
341 |       };
342 | 
343 |       // Test valid paths
344 |       expect(() => sanitizeOutputDir('src/icons')).not.toThrow();
345 |       expect(() => sanitizeOutputDir('./src/icons')).not.toThrow();
346 |       expect(() => sanitizeOutputDir('icons')).not.toThrow();
347 | 
348 |       // Test malicious paths
349 |       expect(() => sanitizeOutputDir('../../../etc')).toThrow();
350 |       expect(() => sanitizeOutputDir('/etc/passwd')).toThrow();
351 |       expect(() => sanitizeOutputDir('../../..')).toThrow();
352 |     });
353 |   });
354 | 
355 |   describe('Error Handling', () => {
356 |     it('should handle invalid SVG content', () => {
357 |       const isValidSvg = (content) => {
358 |         return content.includes('<svg') && content.includes('</svg>');
359 |       };
360 | 
361 |       expect(isValidSvg('not an svg')).toBe(false);
362 |       expect(isValidSvg('<svg></svg>')).toBe(true);
363 |       expect(isValidSvg('<svg><path d="M10 10"/></svg>')).toBe(true);
364 |     });
365 | 
366 |     it('should handle invalid icon formats', () => {
367 |       const validateIconFormat = (icon) => {
368 |         if (!icon || typeof icon !== 'string') return false;
369 |         
370 |         const parts = icon.split('/');
371 |         if (parts.length !== 2) return false;
372 |         
373 |         const [collection, name] = parts;
374 |         return collection.trim() !== '' && name.trim() !== '';
375 |       };
376 | 
377 |       expect(validateIconFormat('')).toBe(false);
378 |       expect(validateIconFormat('invalid')).toBe(false);
379 |       expect(validateIconFormat('collection/')).toBe(false);
380 |       expect(validateIconFormat('/icon-name')).toBe(false);
381 |       expect(validateIconFormat('mdi/home')).toBe(true);
382 |       expect(validateIconFormat('fluent/data-area-24-filled')).toBe(true);
383 |     });
384 | 
385 |     it('should handle edge cases in string processing', () => {
386 |       const capitalizeFirstLetter = (string) => {
387 |         if (!string || typeof string !== 'string') return '';
388 |         return string
389 |           .split(/[:,-]/)
390 |           .map(word => word.charAt(0).toUpperCase() + word.slice(1))
391 |           .join('');
392 |       };
393 | 
394 |       expect(capitalizeFirstLetter('')).toBe('');
395 |       expect(capitalizeFirstLetter(null)).toBe('');
396 |       expect(capitalizeFirstLetter('a')).toBe('A');
397 |       expect(capitalizeFirstLetter('a:b')).toBe('AB');
398 |       expect(capitalizeFirstLetter('123-test')).toBe('123Test');
399 |     });
400 |   });
401 | });
402 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | import axios from 'axios';
  2 | import {promises as fs} from 'fs';
  3 | import path from 'path';
  4 | import {mkdirp} from 'mkdirp';
  5 | import {parseSVGContent, convertParsedSVG, iconToSVG} from '@iconify/utils';
  6 | import pLimit from 'p-limit';
  7 | 
  8 | // Security: Prevent path traversal attacks
  9 | function sanitizeOutputDir(outputDir) {
 10 |     const resolved = path.resolve(outputDir);
 11 |     const cwd = process.cwd();
 12 |     
 13 |     // Ensure output directory is within current working directory
 14 |     if (!resolved.startsWith(cwd)) {
 15 |         throw new Error(`Output directory must be within current working directory. Got: ${outputDir}`);
 16 |     }
 17 |     
 18 |     return resolved;
 19 | }
 20 | 
 21 | const capitalizeFirstLetter = (string) => {
 22 |     // Split the string by ':' and '-' to handle both separator types
 23 |     return string
 24 |         .split(/[:,-]/)
 25 |         .map(word => word.charAt(0).toUpperCase() + word.slice(1))
 26 |         .join('');
 27 | };
 28 | 
 29 | // Validate tsconfig.json for $icons path mapping
 30 | async function validateTsConfig(outputDir) {
 31 |     // Sanitize the output directory for security
 32 |     const safeOutputDir = sanitizeOutputDir(outputDir);
 33 |     const possibleTsConfigPaths = [
 34 |         'tsconfig.json',
 35 |         '.svelte-kit/tsconfig.json',
 36 |         'tsconfig.app.json'
 37 |     ];
 38 | 
 39 |     for (const configPath of possibleTsConfigPaths) {
 40 |         try {
 41 |             const configContent = await fs.readFile(configPath, 'utf8');
 42 |             const config = JSON.parse(configContent);
 43 |             
 44 |             const paths = config.compilerOptions?.paths;
 45 |             if (paths) {
 46 |                 const hasIconsMapping = paths['$icons'] || paths['$icons/*'];
 47 |                 const iconsMappingPath = paths['$icons']?.[0] || paths['$icons/*']?.[0];
 48 |                 
 49 |                 if (hasIconsMapping) {
 50 |                     console.log(`✅ Found $icons path mapping in ${configPath}`);
 51 |                     
 52 |                     // Check if the mapping points to our output directory
 53 |                     if (iconsMappingPath) {
 54 |                         const normalizedMappingPath = iconsMappingPath.replace(/\/\*$/, '').replace(/^\.\.\//, '');
 55 |                         const normalizedOutputDir = outputDir.replace(/^\.\//, '');
 56 |                         
 57 |                         if (normalizedMappingPath !== normalizedOutputDir) {
 58 |                             console.log(`⚠️  Warning: $icons mapping points to "${iconsMappingPath}" but downloading to "${safeOutputDir}"`);
 59 |                             console.log(`   Consider using --output "${normalizedMappingPath}" or updating your tsconfig.json`);
 60 |                         }
 61 |                     }
 62 |                     return true;
 63 |                 }
 64 |             }
 65 |         } catch (error) {
 66 |             // Continue to next config file
 67 |             continue;
 68 |         }
 69 |     }
 70 | 
 71 |     // No valid tsconfig with $icons mapping found
 72 |     console.log('⚠️  Warning: No $icons path mapping found in tsconfig.json');
 73 |     console.log('   To use path imports like "import Icon from \'$icons/MyIcon.svelte\'", add this to your tsconfig.json:');
 74 |     console.log('   {');
 75 |     console.log('     "compilerOptions": {');
 76 |     console.log('       "paths": {');
 77 |     console.log(`         "$icons": ["${safeOutputDir}"],`);
 78 |     console.log(`         "$icons/*": ["${safeOutputDir}/*"]`);
 79 |     console.log('       }');
 80 |     console.log('     }');
 81 |     console.log('   }');
 82 |     console.log('');
 83 |     
 84 |     return false;
 85 | }
 86 | 
 87 | // Common template parts
 88 | const generateSvgTemplate = (pathData, width, height, size) => `<svg
 89 |    xmlns="http://www.w3.org/2000/svg"
 90 |    width="{${size}}em"
 91 |    height="{${size}}em"
 92 |    viewBox="0 0 ${width} ${height}"
 93 |    class="{className}">
 94 |   ${pathData}
 95 | </svg>`;
 96 | 
 97 | const generateComponentTemplate = ({
 98 |                                        scriptContent, size = 'size', pathData, width, height
 99 |                                    }) => `${scriptContent}
100 | 
101 | ${generateSvgTemplate(pathData, width, height, size)}`;
102 | 
103 | function generateComponent(pathData, height, width, componentName, isTypescript) {
104 |     const scriptContent = isTypescript ? `<script lang="ts" module>
105 |   export interface ${componentName}Props {
106 |     size?: number;
107 |     class?: string;
108 |   }
109 | </script>
110 | 
111 | <script lang="ts">
112 |   const { size = 0.7, class: className = '' }: ${componentName}Props = $props();
113 | </script>` : `<script>
114 |   const { size = 0.7, class: className = '' } = $props();
115 | </script>`;
116 | 
117 |     return generateComponentTemplate({
118 |         scriptContent, pathData, width, height
119 |     });
120 | }
121 | 
122 | async function processIconData(svgContent) {
123 |     const parsedSVG = parseSVGContent(svgContent);
124 |     if (!parsedSVG) {
125 |         throw new Error('Could not parse SVG content');
126 |     }
127 | 
128 |     const iconData = convertParsedSVG(parsedSVG);
129 |     if (!iconData) {
130 |         throw new Error('Could not convert SVG to icon data');
131 |     }
132 | 
133 |     return iconData;
134 | }
135 | 
136 | // Pattern matching for collection downloads
137 | function matchesPattern(iconName, pattern) {
138 |     // Convert wildcard pattern to regex
139 |     if (pattern === '*') {
140 |         return true; // Match all
141 |     }
142 |     
143 |     if (pattern.startsWith('*') && pattern.endsWith('*')) {
144 |         // *text* - contains
145 |         const text = pattern.slice(1, -1);
146 |         return iconName.includes(text);
147 |     }
148 |     
149 |     if (pattern.startsWith('*')) {
150 |         // *suffix - ends with
151 |         const suffix = pattern.slice(1);
152 |         return iconName.endsWith(suffix);
153 |     }
154 |     
155 |     if (pattern.endsWith('*')) {
156 |         // prefix* - starts with
157 |         const prefix = pattern.slice(0, -1);
158 |         return iconName.startsWith(prefix);
159 |     }
160 |     
161 |     // Try as regex pattern
162 |     try {
163 |         const regex = new RegExp(pattern, 'i');
164 |         return regex.test(iconName);
165 |     } catch (error) {
166 |         // If regex fails, do exact match
167 |         return iconName === pattern;
168 |     }
169 | }
170 | 
171 | // Download icons matching a pattern from a collection
172 | export async function downloadCollection(pattern, options = {}) {
173 |     const {
174 |         collection = '',
175 |         outputDir = 'src/icons',
176 |         withTs = false,
177 |         withJs = true,
178 |         concurrency = 10,
179 |         limit = 100,
180 |         skipTsConfigCheck = false
181 |     } = options;
182 | 
183 |     if (!collection) {
184 |         throw new Error('Collection name is required for pattern downloads');
185 |     }
186 | 
187 |     console.log(`🔍 Searching for icons matching "${pattern}" in collection "${collection}"...`);
188 | 
189 |     try {
190 |         // Get all icons from the collection using the collection API
191 |         let searchResults;
192 |         try {
193 |             // Try to get collection info first
194 |             const collectionResponse = await axios.get(`https://api.iconify.design/collection?prefix=${collection}`);
195 |             if (collectionResponse.data && collectionResponse.data.uncategorized) {
196 |                 // Get icons from collection info
197 |                 const icons = collectionResponse.data.uncategorized.map(icon => `${collection}:${icon}`);
198 |                 searchResults = {
199 |                     icons: icons.slice(0, Math.max(limit, 500)),
200 |                     total: icons.length
201 |                 };
202 |             } else {
203 |                 throw new Error('Collection not found');
204 |             }
205 |         } catch (collectionError) {
206 |             // Fallback to search with a generic query
207 |             searchResults = await searchIcons('icon', {
208 |                 collection,
209 |                 limit: Math.max(limit, 500)
210 |             });
211 |         }
212 | 
213 |         if (searchResults.icons.length === 0) {
214 |             console.log(`❌ No icons found in collection "${collection}"`);
215 |             return [];
216 |         }
217 | 
218 |         // Filter icons by pattern
219 |         const matchingIcons = searchResults.icons.filter(iconFullName => {
220 |             // Extract just the icon name (after collection prefix)
221 |             const iconName = iconFullName.includes(':') 
222 |                 ? iconFullName.split(':')[1] 
223 |                 : iconFullName.split('/')[1];
224 |             
225 |             return iconName && matchesPattern(iconName, pattern);
226 |         });
227 | 
228 |         if (matchingIcons.length === 0) {
229 |             console.log(`❌ No icons matching pattern "${pattern}" found in collection "${collection}"`);
230 |             console.log(`💡 Available icons: ${searchResults.icons.slice(0, 5).join(', ')}${searchResults.icons.length > 5 ? '...' : ''}`);
231 |             return [];
232 |         }
233 | 
234 |         console.log(`✅ Found ${matchingIcons.length} icons matching pattern "${pattern}"`);
235 |         console.log(`📦 Icons to download: ${matchingIcons.slice(0, 5).join(', ')}${matchingIcons.length > 5 ? ` and ${matchingIcons.length - 5} more...` : ''}`);
236 | 
237 |         // Convert to proper format and download
238 |         const iconsToDownload = matchingIcons.map(icon => {
239 |             // Convert colon format to slash format if needed
240 |             return icon.includes(':') && !icon.includes('/') 
241 |                 ? icon.replace(':', '/') 
242 |                 : icon;
243 |         });
244 | 
245 |         return await downloadIcons(iconsToDownload, {
246 |             outputDir,
247 |             withTs,
248 |             withJs,
249 |             concurrency,
250 |             skipTsConfigCheck
251 |         });
252 | 
253 |     } catch (error) {
254 |         console.error(`Failed to download collection: ${error.message}`);
255 |         return [];
256 |     }
257 | }
258 | 
259 | // Search icons using Iconify API
260 | export async function searchIcons(query, options = {}) {
261 |     const {
262 |         collection = '',
263 |         category = '',
264 |         limit = 50,
265 |         start = 0
266 |     } = options;
267 | 
268 |     try {
269 |         const params = new URLSearchParams({
270 |             query,
271 |             limit: limit.toString(),
272 |             start: start.toString()
273 |         });
274 | 
275 |         if (collection) params.append('prefix', collection);
276 |         if (category) params.append('category', category);
277 | 
278 |         const response = await axios.get(`https://api.iconify.design/search?${params}`);
279 |         
280 |         if (response.status !== 200) {
281 |             throw new Error(`Search failed with status ${response.status}`);
282 |         }
283 | 
284 |         return {
285 |             icons: response.data.icons || [],
286 |             total: response.data.total || 0,
287 |             start: response.data.start || 0,
288 |             limit: response.data.limit || limit
289 |         };
290 |     } catch (error) {
291 |         console.error(`Search failed: ${error.message}`);
292 |         return { icons: [], total: 0, start: 0, limit };
293 |     }
294 | }
295 | 
296 | // Progress callback for batch operations
297 | const createProgressTracker = (total, label = 'Processing') => {
298 |     let completed = 0;
299 |     return {
300 |         update: () => {
301 |             completed++;
302 |             const percentage = Math.round((completed / total) * 100);
303 |             process.stdout.write(`\r${label}: ${completed}/${total} (${percentage}%)`);
304 |             if (completed === total) {
305 |                 console.log('\n');
306 |             }
307 |         },
308 |         reset: () => { completed = 0; },
309 |         getCompleted: () => completed
310 |     };
311 | };
312 | 
313 | // Batch download with concurrency control and progress tracking
314 | export async function downloadIcons(icons, options = {}) {
315 |     const {
316 |         outputDir = 'src/icons',
317 |         withTs = false,
318 |         withJs = true,
319 |         concurrency = 10,
320 |         delayMs = 100,
321 |         skipTsConfigCheck = false
322 |     } = options;
323 | 
324 |     if (!Array.isArray(icons) || icons.length === 0) {
325 |         console.log('No icons to download');
326 |         return [];
327 |     }
328 | 
329 |     // Validate tsconfig.json before starting download
330 |     if (!skipTsConfigCheck) {
331 |         await validateTsConfig(outputDir);
332 |     }
333 | 
334 |     console.log(`Starting batch download of ${icons.length} icons with ${concurrency} concurrent workers...`);
335 |     
336 |     const limit = pLimit(concurrency);
337 |     const progress = createProgressTracker(icons.length, 'Downloading');
338 |     const results = [];
339 |     const errors = [];
340 | 
341 |     // Add delay between requests to be respectful to the API
342 |     const downloadWithDelay = async (icon, index) => {
343 |         if (index > 0 && delayMs > 0) {
344 |             await new Promise(resolve => setTimeout(resolve, delayMs));
345 |         }
346 |         
347 |         try {
348 |             const result = await downloadIcon(icon, { outputDir, withTs, withJs, _batchMode: true });
349 |             progress.update();
350 |             return { icon, success: true, files: result };
351 |         } catch (error) {
352 |             progress.update();
353 |             errors.push({ icon, error: error.message });
354 |             return { icon, success: false, error: error.message };
355 |         }
356 |     };
357 | 
358 |     // Process all icons with concurrency limit
359 |     const promises = icons.map((icon, index) => 
360 |         limit(() => downloadWithDelay(icon, index))
361 |     );
362 | 
363 |     try {
364 |         const downloadResults = await Promise.allSettled(promises);
365 |         
366 |         downloadResults.forEach((result, index) => {
367 |             if (result.status === 'fulfilled') {
368 |                 results.push(result.value);
369 |             } else {
370 |                 errors.push({ icon: icons[index], error: result.reason?.message || 'Unknown error' });
371 |             }
372 |         });
373 | 
374 |         // Summary
375 |         const successful = results.filter(r => r.success).length;
376 |         const failed = errors.length;
377 |         
378 |         console.log(`\n📊 Batch download completed:`);
379 |         console.log(`  ✅ Successful: ${successful}`);
380 |         if (failed > 0) {
381 |             console.log(`  ❌ Failed: ${failed}`);
382 |             console.log(`\nFailed downloads:`);
383 |             errors.forEach(({ icon, error }) => {
384 |                 console.log(`  - ${icon}: ${error}`);
385 |             });
386 |         }
387 | 
388 |         return results.filter(r => r.success).flatMap(r => r.files);
389 |     } catch (error) {
390 |         console.error(`Batch download failed: ${error.message}`);
391 |         return [];
392 |     }
393 | }
394 | 
395 | export async function downloadIcon(icon, options = {}) {
396 |     const {
397 |         outputDir = 'src/icons', withTs = false, withJs = true, skipTsConfigCheck = false
398 |     } = options;
399 | 
400 |     try {
401 |         // Validate tsconfig.json before downloading (only for single downloads)
402 |         if (!skipTsConfigCheck && !options._batchMode) {
403 |             await validateTsConfig(outputDir);
404 |         }
405 | 
406 |         // Replace spaces with slashes in the name
407 |         // Fetch and validate icon
408 |         const response = await axios.get(`https://api.iconify.design/${icon}.svg`);
409 |         if (response.status !== 200) {
410 |             console.log(`Failed to download icon ${icon}`);
411 |             return [];
412 |         }
413 | 
414 |         // Process icon data
415 |         const iconData = await processIconData(response.data);
416 |         const renderData = iconToSVG(iconData, {
417 |             height: 'auto', width: 'auto'
418 |         });
419 | 
420 |         // Prepare output with security validation
421 |         const safeOutputDir = sanitizeOutputDir(outputDir);
422 |         await mkdirp(safeOutputDir);
423 |         const names = icon.split('/');
424 |         const collectionName = names[0];
425 |         const iconName = names[1];
426 |         if (!iconName) {
427 |             throw new Error('Invalid icon name');
428 |         }
429 |         const componentName = `${capitalizeFirstLetter(collectionName)}${capitalizeFirstLetter(iconName.replace(/ /g, '-'))}`;
430 | 
431 |         // Generate component content based on type
432 |         const content = generateComponent(renderData.body, iconData.height, iconData.width, componentName, withTs);
433 | 
434 |         // Write file to sanitized path
435 |         const outputPath = path.join(safeOutputDir, `${componentName}.svelte`);
436 |         await fs.writeFile(outputPath, content, 'utf8');
437 | 
438 |         return [outputPath];
439 |     } catch (error) {
440 |         console.error(`Failed to download icon ${icon}:\n ${error.message}`);
441 |         return [];
442 |     }
443 | }


--------------------------------------------------------------------------------