svger-cli 2.0.7 → 3.0.0

package/examples/jest.config.example.js

@@ -0,0 +1,158 @@
+/**
+ * Jest Configuration Example with SVGER-CLI
+ *
+ * This example shows how to use SVGER-CLI with Jest for testing
+ * components that use SVG imports.
+ */
+
+/**
+ * Method 1: Using the preset (Recommended)
+ */
+module.exports = {
+  preset: 'svger-cli/jest',
+
+  testEnvironment: 'jsdom',
+
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+
+  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+};
+
+/**
+ * Method 2: Manual configuration
+ */
+const manualConfig = {
+  testEnvironment: 'jsdom',
+
+  transform: {
+    // Transform SVG files to components
+    '\\.svg$': 'svger-cli/jest-transformer',
+
+    // Transform JS/TS files
+    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
+  },
+
+  transformIgnorePatterns: ['node_modules/(?!(svger-cli)/)'],
+
+  moduleNameMapper: {
+    '\\.svg$': 'svger-cli/jest-transformer',
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+};
+
+// module.exports = manualConfig;
+
+/**
+ * Method 3: Custom transformer with options
+ */
+const { createJestTransformer } = require('svger-cli/jest-preset');
+
+const customConfig = {
+  testEnvironment: 'jsdom',
+
+  transform: {
+    '\\.svg$': [
+      'svger-cli/jest-transformer',
+      {
+        framework: 'react',
+        typescript: true,
+        mock: false, // Set to true for simple mocks
+      },
+    ],
+  },
+};
+
+// module.exports = customConfig;
+
+/**
+ * Usage in tests:
+ *
+ * // MyComponent.test.tsx
+ * import React from 'react';
+ * import { render, screen } from '@testing-library/react';
+ * import { StarIcon } from '@/components/icons';
+ * import Logo from './logo.svg';
+ *
+ * describe('Icon Components', () => {
+ *   it('renders StarIcon correctly', () => {
+ *     render(<StarIcon width={24} height={24} fill="gold" />);
+ *     const svg = screen.getByRole('img', { hidden: true });
+ *     expect(svg).toBeInTheDocument();
+ *     expect(svg).toHaveAttribute('width', '24');
+ *     expect(svg).toHaveAttribute('fill', 'gold');
+ *   });
+ *
+ *   it('renders Logo correctly', () => {
+ *     render(<Logo width={50} height={50} />);
+ *     const svg = screen.getByRole('img', { hidden: true });
+ *     expect(svg).toBeInTheDocument();
+ *   });
+ * });
+ */
+
+/**
+ * jest.setup.js example:
+ *
+ * import '@testing-library/jest-dom';
+ *
+ * // Mock IntersectionObserver if needed
+ * global.IntersectionObserver = class IntersectionObserver {
+ *   constructor() {}
+ *   disconnect() {}
+ *   observe() {}
+ *   takeRecords() { return []; }
+ *   unobserve() {}
+ * };
+ */
+
+/**
+ * TypeScript configuration (tsconfig.json):
+ *
+ * {
+ *   "compilerOptions": {
+ *     "types": ["jest", "@testing-library/jest-dom"],
+ *     "esModuleInterop": true
+ *   }
+ * }
+ */
+
+/**
+ * Using mock mode for faster tests:
+ *
+ * When you don't need to test SVG internals, use mock mode
+ * for faster test execution:
+ */
+const mockConfig = {
+  testEnvironment: 'jsdom',
+
+  transform: {
+    '\\.svg$': [
+      'svger-cli/jest-transformer',
+      {
+        mock: true, // Creates simple React component mocks
+      },
+    ],
+  },
+};
+
+// module.exports = mockConfig;
+
+/**
+ * Testing with Vitest:
+ *
+ * // vitest.config.ts
+ * import { defineConfig } from 'vitest/config';
+ * import { svgerVitePlugin } from 'svger-cli/vite';
+ *
+ * export default defineConfig({
+ *   plugins: [svgerVitePlugin()],
+ *   test: {
+ *     environment: 'jsdom',
+ *     setupFiles: './vitest.setup.ts',
+ *   },
+ * });
+ */

package/examples/next.config.example.js

@@ -0,0 +1,133 @@
+/**
+ * Next.js Configuration Example with SVGER-CLI
+ *
+ * This example shows how to use SVGER-CLI with Next.js for automatic
+ * SVG to component conversion with SSR support.
+ */
+
+const { withSvger } = require('svger-cli/nextjs');
+
+/**
+ * Method 1: Using withSvger wrapper (Recommended)
+ */
+module.exports = withSvger({
+  // SVGER-CLI configuration
+  svger: {
+    source: './public/icons', // Source directory with SVG files
+    output: './components/icons', // Output directory for components
+    framework: 'react', // Always 'react' for Next.js
+    typescript: true, // Generate TypeScript files
+    hmr: true, // Enable Hot Module Replacement
+    ssr: true, // Enable Server-Side Rendering support
+    generateIndex: true, // Generate index.ts with all exports
+  },
+
+  // Standard Next.js configuration
+  reactStrictMode: true,
+  swcMinify: true,
+
+  images: {
+    domains: ['example.com'],
+  },
+
+  // Optional: Custom webpack configuration
+  // webpack: (config, options) => {
+  //   // Your custom webpack config here
+  //   return config;
+  // },
+});
+
+/**
+ * Method 2: Manual webpack integration
+ */
+const { SvgerNextJsPlugin } = require('svger-cli/nextjs');
+
+const manualConfig = {
+  reactStrictMode: true,
+
+  webpack(config, options) {
+    // Add SVGER plugin
+    config.plugins.push(
+      new SvgerNextJsPlugin({
+        source: './public/icons',
+        output: './components/icons',
+        framework: 'react',
+        typescript: true,
+      })
+    );
+
+    return config;
+  },
+};
+
+// module.exports = manualConfig;
+
+/**
+ * Method 3: Using configureSvgImports helper
+ */
+const { configureSvgImports } = require('svger-cli/nextjs');
+
+const helperConfig = {
+  reactStrictMode: true,
+
+  webpack(config, options) {
+    // Configure SVG imports
+    configureSvgImports(config, {
+      framework: 'react',
+      typescript: true,
+    });
+
+    return config;
+  },
+};
+
+// module.exports = helperConfig;
+
+/**
+ * Usage in your Next.js pages/components:
+ *
+ * // pages/index.tsx
+ * import { StarIcon, MenuIcon, LogoIcon } from '@/components/icons';
+ * import type { NextPage } from 'next';
+ *
+ * const Home: NextPage = () => {
+ *   return (
+ *     <div>
+ *       <LogoIcon width={100} height={100} />
+ *       <StarIcon fill="gold" className="star" />
+ *       <MenuIcon />
+ *     </div>
+ *   );
+ * };
+ *
+ * export default Home;
+ */
+
+/**
+ * App Router (Next.js 13+):
+ *
+ * // app/page.tsx
+ * import { StarIcon } from '@/components/icons';
+ *
+ * export default function Page() {
+ *   return (
+ *     <main>
+ *       <StarIcon width={24} height={24} />
+ *     </main>
+ *   );
+ * }
+ *
+ * // The icons work seamlessly with Server Components!
+ */
+
+/**
+ * TypeScript paths configuration (tsconfig.json):
+ *
+ * {
+ *   "compilerOptions": {
+ *     "paths": {
+ *       "@/components/*": ["./components/*"]
+ *     }
+ *   }
+ * }
+ */

package/examples/rollup.config.example.js

@@ -0,0 +1,129 @@
+/**
+ * Rollup Configuration Example with SVGER-CLI
+ *
+ * This example shows how to use SVGER-CLI with Rollup for automatic
+ * SVG to component conversion with tree-shaking support.
+ */
+
+import { svgerRollupPlugin } from 'svger-cli/rollup';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import babel from '@rollup/plugin-babel';
+import terser from '@rollup/plugin-terser';
+
+export default {
+  input: 'src/index.js',
+
+  output: [
+    {
+      file: 'dist/bundle.js',
+      format: 'iife',
+      name: 'MyApp',
+      sourcemap: true,
+    },
+    {
+      file: 'dist/bundle.esm.js',
+      format: 'esm',
+      sourcemap: true,
+    },
+  ],
+
+  plugins: [
+    // SVGER-CLI Rollup Plugin - Convert SVGs to components
+    svgerRollupPlugin({
+      source: './src/icons', // Source directory with SVG files
+      output: './src/components/icons', // Output directory for components
+      framework: 'react', // Framework: react, vue, svelte, etc.
+      typescript: true, // Generate TypeScript files
+      generateIndex: true, // Generate index.ts with all exports
+      sourcemap: true, // Generate source maps
+
+      // Optional: Export type
+      exportType: 'default', // 'default' or 'named'
+
+      // Optional: SVGO optimization
+      svgo: true,
+    }),
+
+    // Resolve node modules
+    resolve({
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    }),
+
+    // Convert CommonJS modules to ES6
+    commonjs(),
+
+    // Transpile with Babel
+    babel({
+      babelHelpers: 'bundled',
+      exclude: 'node_modules/**',
+      presets: ['@babel/preset-env', '@babel/preset-react'],
+    }),
+
+    // Minify for production
+    process.env.NODE_ENV === 'production' && terser(),
+  ],
+
+  external: ['react', 'react-dom'],
+};
+
+/**
+ * Usage in your code:
+ *
+ * // Import from generated components
+ * import { StarIcon, MenuIcon } from './components/icons';
+ *
+ * // Or import SVG directly (transformed by plugin)
+ * import Logo from './assets/logo.svg';
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       <Logo width={50} height={50} />
+ *       <StarIcon fill="gold" />
+ *       <MenuIcon />
+ *     </div>
+ *   );
+ * }
+ */
+
+/**
+ * Library Build Configuration:
+ *
+ * For building a component library with icons:
+ */
+export const libraryConfig = {
+  input: 'src/index.js',
+
+  output: [
+    {
+      file: 'dist/index.js',
+      format: 'cjs',
+      exports: 'named',
+    },
+    {
+      file: 'dist/index.esm.js',
+      format: 'esm',
+    },
+  ],
+
+  plugins: [
+    svgerRollupPlugin({
+      source: './src/icons',
+      output: './src/components/icons',
+      framework: 'react',
+      typescript: true,
+      generateIndex: true,
+      exportType: 'named', // Better for libraries
+    }),
+
+    resolve(),
+    commonjs(),
+    babel({
+      babelHelpers: 'runtime',
+      exclude: 'node_modules/**',
+    }),
+  ],
+
+  external: ['react', 'react-dom', '@babel/runtime'],
+};

package/examples/vite.config.example.js

@@ -0,0 +1,98 @@
+/**
+ * Vite Configuration Example with SVGER-CLI
+ *
+ * This example shows how to use SVGER-CLI with Vite for automatic
+ * SVG to component conversion with HMR and virtual modules.
+ */
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { svgerVitePlugin } from 'svger-cli/vite';
+
+export default defineConfig({
+  plugins: [
+    react(),
+
+    // SVGER-CLI Vite Plugin
+    svgerVitePlugin({
+      source: './src/icons', // Source directory with SVG files
+      output: './src/components/icons', // Output directory for components
+      framework: 'react', // Framework: react, vue, svelte, etc.
+      typescript: true, // Generate TypeScript files
+      hmr: true, // Enable Hot Module Replacement
+      generateIndex: true, // Generate index.ts with all exports
+
+      // Optional: Use virtual modules (experimental)
+      virtual: false,
+
+      // Optional: Export type
+      exportType: 'default', // 'default' or 'named'
+
+      // Optional: SVGO optimization
+      svgo: false,
+    }),
+  ],
+
+  server: {
+    port: 3000,
+    open: true,
+  },
+
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+  },
+});
+
+/**
+ * Usage in your code (React example):
+ *
+ * // Import from generated components
+ * import { StarIcon, MenuIcon, HomeIcon } from './components/icons';
+ *
+ * // Or import SVG directly (transformed by plugin)
+ * import Logo from './assets/logo.svg';
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       <Logo width={50} height={50} fill="currentColor" />
+ *       <StarIcon width={24} height={24} fill="gold" />
+ *       <MenuIcon className="menu-icon" />
+ *       <HomeIcon />
+ *     </div>
+ *   );
+ * }
+ *
+ * // With virtual modules (if enabled)
+ * import StarIcon from 'virtual:svger/star-icon';
+ */
+
+/**
+ * Usage with Vue:
+ *
+ * // vite.config.js
+ * import vue from '@vitejs/plugin-vue';
+ * import { svgerVitePlugin } from 'svger-cli/vite';
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     vue(),
+ *     svgerVitePlugin({
+ *       framework: 'vue',
+ *       typescript: true,
+ *     }),
+ *   ],
+ * });
+ *
+ * // In your Vue component
+ * <template>
+ *   <div>
+ *     <StarIcon :width="24" :height="24" fill="gold" />
+ *   </div>
+ * </template>
+ *
+ * <script setup>
+ * import { StarIcon } from './components/icons';
+ * </script>
+ */

package/examples/webpack.config.example.js

@@ -0,0 +1,88 @@
+/**
+ * Webpack Configuration Example with SVGER-CLI
+ *
+ * This example shows how to use SVGER-CLI with Webpack for automatic
+ * SVG to component conversion with HMR support.
+ */
+
+const path = require('path');
+const { SvgerWebpackPlugin } = require('svger-cli/webpack');
+
+module.exports = {
+  mode: 'development',
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: 'babel-loader',
+      },
+      // SVGER-CLI Loader - Transform SVG imports inline
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'svger-cli/webpack-loader',
+            options: {
+              framework: 'react',
+              typescript: false, // Set to true if using TypeScript
+            },
+          },
+        ],
+      },
+    ],
+  },
+
+  plugins: [
+    // SVGER-CLI Plugin - Batch convert SVGs at build time
+    new SvgerWebpackPlugin({
+      source: './src/icons', // Source directory with SVG files
+      output: './src/components/icons', // Output directory for components
+      framework: 'react', // Framework: react, vue, angular, etc.
+      typescript: false, // Generate TypeScript files
+      hmr: true, // Enable Hot Module Replacement
+      generateIndex: true, // Generate index.js with all exports
+      watch: {
+        debounce: 300, // Debounce delay for file changes
+      },
+    }),
+  ],
+
+  devServer: {
+    port: 3000,
+    hot: true,
+    static: {
+      directory: path.join(__dirname, 'public'),
+    },
+  },
+
+  resolve: {
+    extensions: ['.js', '.jsx', '.json'],
+  },
+};
+
+/**
+ * Usage in your code:
+ *
+ * // Import from generated components
+ * import { StarIcon, MenuIcon } from './components/icons';
+ *
+ * // Or import SVG directly (transformed by loader)
+ * import Logo from './assets/logo.svg';
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       <Logo width={50} height={50} />
+ *       <StarIcon fill="gold" />
+ *       <MenuIcon />
+ *     </div>
+ *   );
+ * }
+ */