DEV Community: navid rezadoost

Building custom socks5 for VsCode and other development tools

navid rezadoost — Wed, 19 Nov 2025 12:02:05 +0000

Only VSCode Uses the VPN — The Rest of Your Computer Stays Chill

How I stopped turning my whole laptop into a VPN zombie just to install a single extension

If you're reading this, you probably know the pain.

You're in a country (or a corporate network) where half the internet is blocked.

GitHub? Blocked.

VSCode Marketplace? Nope.

NPM/PyPI? Good luck.

So you fire up your VPN… and suddenly:

Your colleagues can't reach localhost:3000 anymore
Your Android emulator thinks you're in the US
Your banking app freaks out
Your 300 Mbps connection turns into a potato

Been there. Done that. Hated it.

So I built something better: a tiny set of scripts that puts only VSCode (and whatever else you want) behind the VPN, while everything else keeps your real IP and full local network access.

Meet → [https://github.com/navidrezadoost/dev-socks-isolation)

The dream setup

Browser → real IP ✓
Discord → real IP ✓
Local dev server → accessible to teammates ✓
Docker → real IP ✓
Banking app → doesn't hate you ✓
VSCode → happily downloading extensions through VPN ✓
Git clone → works ✓
NPM install → no more "network timeout" ✓

How does it actually work?

On Linux (the hero platform):

We create a completely separate network namespace, spin up OpenVPN + a SOCKS5 proxy (Dante) inside it, then punch a tiny hole so your host can talk to that proxy.

Result? True isolation. Zero leaks. Your host doesn't even know a VPN exists.

On Windows: Same thing, but inside WSL2 (yes, it works perfectly).

On macOS: We do the best we can with routing + SOCKS (no real namespaces, sorry Apple).

30-second test drive (Linux)

git clone https://github.com/navidrezadoost/dev-socks-isolation.git
cd vscode-socks5-vpn-namespace/linux/Ubuntu    # or your distro
./connect.sh

It will:

Detect your interface & IP automatically
Ask for your .ovpn file (absolute path!)
Offer to install missing packages
Connect the VPN in an isolated namespace
Start a SOCKS5 proxy
Forward it to your host
Optionally launch VSCode with the proxy

When it's done you get something like:

Proxy address: socks5://10.200.200.2:1081
Your public IP through proxy: 185.102.34.567  ← VPN IP
Your real public IP: 89.42.123.456           ← unchanged

Just launch VSCode like this forever:

code --proxy-server="socks5://10.200.200.2:1081"

Or make it permanent with a tiny desktop shortcut/alias.
Want git and terminal tools too?

git config --global http.proxy socks5://10.200.200.2:1081
curl --socks5-hostname 10.200.200.2:1081 https://ipinfo.io

Real-life use cases (why people actually love this)

Iran, Turkey, Russia, corporate offices → Access dev resources without breaking local stuff
Pentesters on Kali/Parrot → Keep your recon traffic on one VPN and your IDE on another
Privacy nerds → Only route work traffic through VPN, keep personal stuff direct
Multiple VPNs at once → Run three namespaces with three different providers. No conflicts.

Current status

Linux: Rock solid on 15+ distros (Ubuntu, Arch, Fedora, Kali, etc.)
Windows (via WSL2): Full isolation, works great
macOS: Works, but limited (no real namespaces)

All the ugly distro-specific package names and quirks are handled for you.
Try it, seriously
If you've ever screamed at your computer because you just wanted to install one VSCode extension without disconnecting from your local dev server… this is for you.
→ https://github.com/navidrezadoost/dev-socks-isolation/tree/main
Star it if it saves your sanity. PRs welcome (especially more distro support!).
And yes — this whole thing was built because I got tired of choosing between "can code" and "can demo my code to colleagues" every single day.
You're welcome
P.S. To everyone still copy-pasting export http_proxy=socks5://127.0.0.1:1080 into every terminal tab in 2025… come to the light

This version is perfect for dev.to (casual, relatable, meme-friendly) and also works great on Medium. It focuses on the problem, the emotions, and the "aha!" moment — exactly what readers love.
Go post it and watch the stars roll in

The Last SVG Tool You’ll Ever Need: A Zero-Dependency Alternative to SVGR

navid rezadoost — Sun, 09 Nov 2025 09:44:11 +0000

The SVG Mess We All Live In

Let’s be honest: handling SVGs in modern web development is a fragmented mess. If you're on a React project, you npm install @svgr/webpack. The moment you switch to a Vue project, you're wrestling with vite-svg-loader. Working on a Svelte app? Time to find another package.

Each tool comes with its own API, its own configuration, and—worst of all—its own mountain of transitive dependencies. A simple npm install @svgr/cli can dump over 15 packages and 18MB into your node_modules.

This isn't just about disk space. It's about:

Slower CI/CD pipelines
A larger security attack surface
Inconsistent workflows across your projects

We've normalized this "one tool per framework" approach, but it's an anti-pattern. It’s time for a better solution.

Introducing `svger-cli`: The Unified, Zero-Dependency SVG Engine

I'd like to introduce svger-cli, an open-source tool built to solve this exact problem.

The core philosophy is simple but powerful: do everything with native Node.js APIs and have zero dependencies.

That's right. Zero.

This allows svger-cli to be a single, blazing-fast binary that handles every major framework you can throw at it. It's not just a replacement for one tool; it's a replacement for all of them.

One Command, Any Framework

With svger-cli, you no longer need to remember different package names or configs. You just tell it what you want.

# Generate React components (the default)
svger-cli build ./my-svgs ./components

# Switch to Vue with Composition API
svger-cli build ./my-svgs ./components --framework vue --composition

# Or maybe Angular standalone components?
svger-cli build ./my-svgs ./components --framework angular --standalone

# How about Svelte?
svger-cli build ./my-svgs ./components --framework svelte

It generates high-quality, idiomatic components for React, Vue, Angular, Svelte, Solid, Preact, Lit, and even Vanilla JS/TS.

What the Output Looks Like
The generated code is clean, typed, and follows framework best practices.

React (.tsx)

import React from "react";
import type { SVGProps } from "react";

export interface HomeIconProps extends SVGProps<SVGSVGElement> {
  size?: number | string;
}

const HomeIcon = React.forwardRef<SVGSVGElement, HomeIconProps>(
  ({ size, className, style, ...props }, ref) => {
    const dimensions = size ? { width: size, height: size } : {
      width: props.width || 24,
      height: props.height || 24
    };

    return (
      <svg
        ref={ref}
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        width={dimensions.width}
        height={dimensions.height}
        fill={props.fill || "currentColor"}
        className={className}
        style={style}
        {...props}
      >
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
      </svg>
    );
  }
);

HomeIcon.displayName = "HomeIcon";
export default HomeIcon;

Vue 3 with Composition API (.vue)

<template>
  <svg
    :class="className"
    :style="style"
    :width="width || 24"
    :height="height || 24"
    :fill="fill || 'currentColor'"
    :stroke="stroke"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    v-bind="$attrs"
  >
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </svg>
</template>

<script setup lang="ts">
interface Props {
  className?: string;
  style?: string | Record<string, any>;
  width?: string | number;
  height?: string | number;
  fill?: string;
  stroke?: string;
}

withDefaults(defineProps<Props>(), {
  className: '',
  fill: 'currentColor',
  width: 24,
  height: 24
});
</script>

Svelte (.svelte)

<script lang="ts">
  export let className: string = '';
  export let style: string = '';
  export let width: string | number = 24;
  export let height: string | number = 24;
  export let fill: string = 'currentColor';
  export let stroke: string = '';
</script>

<svg
  class={className}
  {style}
  {width}
  {height}
  {fill}
  {stroke}
  viewBox="0 0 24 24"
  xmlns="http://www.w3.org/2000/svg"
  {...$$restProps}
>
  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</svg>

Angular Standalone (.component.ts)

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-home-icon',
  standalone: true,
  template: `
    <svg
      [attr.class]="className"
      [attr.width]="width"
      [attr.height]="height"
      [attr.fill]="fill"
      [attr.stroke]="stroke"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
    </svg>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomeIconComponent {
  @Input() className: string = '';
  @Input() width: string | number = 24;
  @Input() height: string | number = 24;
  @Input() fill: string = 'currentColor';
  @Input() stroke: string = '';
}

More Than Just a Converter: Pro-Level Features
Because svger-cli is built from the ground up, it includes features that address real-world development pains.

1. Auto-Generated Index Files
It creates and maintains an index.ts file in your output directory, so you can do this without any extra effort:

// No more manual exports!
import { HomeIcon, UserIcon, SettingsIcon, SearchIcon } from './components';

2. File Protection System
Protect critical assets like your company logo from being accidentally overwritten during a build:

svger-cli lock ./assets/logo.svg
svger-cli unlock ./assets/logo.svg

3. Optimized Watch Mode
A native file watcher (fs.watch) instantly recompiles components on change, with minimal overhead:

svger-cli build ./svgs ./components --watch

4. Enterprise-Grade Configuration
Manage complex workflows with a configuration file:

{
  "framework": "vue",
  "typescript": true,
  "frameworkOptions": {
    "composition": true,
    "scriptSetup": true
  },
  "batchSize": 50,
  "parallelProcessing": true
}

**The Performance Numbers Don't Lie
**Here's a comprehensive look at how svger-cli stacks up against the competition. The zero-dependency architecture makes a massive difference.

Real-World Benchmarks
Testing with 100 SVG files (average 2KB each) on a standard development machine:

svger-cli: 1.2 seconds (zero dependencies, native processing)

SVGR: 7.8 seconds (heavy dependency tree, multiple transforms)

vite-svg-loader: 4.3 seconds (build-time processing overhead)

Manual process: 15+ minutes (copy-paste, manual optimization)

Give It a Try in 60 Seconds
Stop bloating your projects and start simplifying your cross-framework workflows. svger-cli is open-source and ready to use.

Install it globally:

npm install -g svger-cli

Or use it directly with npx:

npx svger-cli build ./svgs ./components --framework vue

Run it on your SVG folder:

svger-cli build ./path/to/svgs ./output/components --framework react --typescript

That's it. You now have a folder of clean, performant, framework-ready components with full TypeScript support and auto-generated exports.

Perfect For These Scenarios
Design Systems that need to support multiple frameworks

Monorepos with mixed frontend technologies

Micro-frontend architectures

Agency work with diverse client tech stacks

Open-source libraries that want framework-agnostic assets

Performance-critical applications where bundle size matters

Join the Community
The project is actively maintained and growing. We welcome contributions, bug reports, and feature requests.

Check out the project on GitHub to see all the features, detailed documentation, and supported frameworks.

➡️ Get Started with SVGER-CLI on GitHub

Conclusion
In a world of framework fragmentation and dependency bloat, svger-cli offers a refreshing alternative: one tool, zero dependencies, and support for every major UI framework. It's not just about converting SVGs—it's about providing a professional, enterprise-grade workflow that scales with your needs.

Whether you're building a design system, managing a monorepo, or just tired of juggling different SVG tools, give svger-cli a try. Your node_modules folder will thank you.

Happy coding! 🚀