@kode-frontend/svg-transformer 🚀

Easily convert SVGs into optimized React or React Native components with this CLI.

🌟 Why Use This?

With @kode-frontend/svg-transformer, you can:

• Automatically optimize icons for enhanced performance.
• Create components effortlessly for React or React Native.

🛠 Usage

Whether you want a quick one-off run or plan to integrate it into your project, @kode-frontend/svg-transformer has you covered.

📋 Without Installation

Run the CLI directly without installing it globally:

# Using npx
npx @kode-frontend/svg-transformer -i ./icons -o ./output -p react

# Using pnpm exec
pnpm exec @kode-frontend/svg-transformer -i ./icons -o ./output -p react

# Using yarn dlx
yarn dlx @kode-frontend/svg-transformer -i ./icons -o ./output -p react

🌍 Global Installation

Install globally to use the CLI anywhere:

# npm
npm install -g @kode-frontend/svg-transformer

# pnpm
pnpm add -g @kode-frontend/svg-transformer

# yarn
yarn global add @kode-frontend/svg-transformer

Run it globally:

@kode-frontend/svg-transformer -i ./icons -o ./output -p react

📦 Local Installation

Install as a development dependency in your project:

# npm
npm install --save-dev @kode-frontend/svg-transformer

# yarn
yarn add --dev @kode-frontend/svg-transformer

# pnpm
pnpm add -D @kode-frontend/svg-transformer

Run the CLI via npm scripts or a direct command:

# npm script
npm run @kode-frontend/svg-transformer -- -i ./icons -o ./output -p react

# yarn
yarn @kode-frontend/svg-transformer -i ./icons -o ./output -p react

# pnpm
pnpm @kode-frontend/svg-transformer -i ./icons -o ./output -p react

⚙️ Options

| Option | Description | Default | | ------------- | ----------------------------------------------------- | -------- | | --input | Input folder containing SVG files | ./icons | | --output | Output folder to save React components | ./output | | --platform | Target platform: react or react-native | react | | --interactive | Run in interactive mode to configure options manually | false |

🖐 Interactive Mode

Use interactive mode for guided configuration:

npx @kode-frontend/svg-transformer --interactive