0.0.1 • Published 11 months ago

@kode-frontend/svg-transformer v0.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months ago

@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

OptionDescriptionDefault
--inputInput folder containing SVG files./icons
--outputOutput folder to save React components./output
--platformTarget platform: react or react-nativereact
--interactiveRun in interactive mode to configure options manuallyfalse

🖐 Interactive Mode

Use interactive mode for guided configuration:

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