@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:

1# Using npx
2npx @kode-frontend/svg-transformer -i ./icons -o ./output -p react
3
4# Using pnpm exec
5pnpm exec @kode-frontend/svg-transformer -i ./icons -o ./output -p react
6
7# Using yarn dlx
8yarn dlx @kode-frontend/svg-transformer -i ./icons -o ./output -p react

🌍 Global Installation

Install globally to use the CLI anywhere:

1# npm
2npm install -g @kode-frontend/svg-transformer
3
4# pnpm
5pnpm add -g @kode-frontend/svg-transformer
6
7# yarn
8yarn global add @kode-frontend/svg-transformer

Run it globally:

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

📦 Local Installation

Install as a development dependency in your project:

1# npm
2npm install --save-dev @kode-frontend/svg-transformer
3
4# yarn
5yarn add --dev @kode-frontend/svg-transformer
6
7# pnpm
8pnpm add -D @kode-frontend/svg-transformer

Run the CLI via npm scripts or a direct command:

1# npm script
2npm run @kode-frontend/svg-transformer -- -i ./icons -o ./output -p react
3
4# yarn
5yarn @kode-frontend/svg-transformer -i ./icons -o ./output -p react
6
7# pnpm
8pnpm @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:

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