npm package:str-s•v0.1.0

3kb - SVG to React and Tailwind.

STR is the smallest and fastest SVG to React + Tailwind converter, purpose-built for icons and simple graphics. Converts in 0.024 milliseconds with zero runtime dependencies and a 3.1 kB gzipped bundle.

9,600+ ops/sec~88x faster than SVGR0 dependencies3.1 kB gzip

Read documentation

$pnpm add @everywhereayush/str-s

Created by @everywhereayush

See the transformation

Paste raw icon SVGs from Figma, Lucide, Feather, or Tabler. Receive clean React components with auto-mapped Tailwind utility classes and forwarded props.

import * as React from "react";

export const UsersIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg
    className="icon icon-tabler icons-tabler-outline icon-tabler-users w-6 h-6 fill-none stroke-current stroke-2"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    strokeLinecap="round"
    strokeLinejoin="round"
    {...props}
  >
    <path className="fill-none stroke-none" d="M0 0h24v24H0z" />
    <path d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
    <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
    <path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
  </svg>
);

Transformed in 0.024 ms (instant)w-6 h-6 • stroke-current • stroke-2

Verified performance benchmarks

Benchmarked against SVGR, svg-to-jsx, and svg-to-react-cli across identical real-world icon fixtures using tinybench on Node v24. Warmup iterations excluded.

Tool	Throughput	Latency / icon	Deps	Bundle (gzip)
str-s (STR)fastest	9,654 ops/s	0.024 ms	0 (zero)	3.1 kB
@svgr/core	110 ops/s	2.09 ms	58+ (Babel + AST)	~1.2 MB
svg-to-jsx	1,116 ops/s	0.24 ms	3	~15 kB
svg-to-react-cli	544 ops/s	0.41 ms	4+ (jsdom + htmltojsx)	>5 MB

Source: packages/core/bench/run-bench.js using tinybench on Node v24 across 5 standard icon fixtures.

Four surfaces, one shared core

Every wrapper is a thin layer importing the same zero-dependency str-s package. Conversion logic is never duplicated.

VS Code & Cursor ExtensionOpenVSX + Marketplace

Intercepts SVG paste in .tsx and .jsx files with automatic conversion. Single undo step for commands, Paste As widget (Ctrl+.) for raw SVG, and native settings.

ext install everywhereayush.str-vscode

Raycast ExtensionmacOS global command

Converts SVG from clipboard or frontmost window selection back into the clipboard with toast confirmation and native preferences.

Raycast Store: Convert SVG from Clipboard

Model Context Protocol (MCP) ServerAI agents

Exposes convert_svg_to_react as a native MCP tool for Claude Code, Cursor Agent, and Windsurf.

npx -y str-s-mcp

Core Librarystr-s (npm)

Dual CJS/ESM exports with zero runtime dependencies. Sub-millisecond synchronous conversion for Vite, Next.js, and scripts.

pnpm add @everywhereayush/str-s

Quickstart

Get started using STR in your code or add the MCP server configuration to your AI agent.

Install npm package:

pnpm add @everywhereayush/str-s

MCP Server Configuration (Claude Desktop / Cursor):

{
  "mcpServers": {
    "str": {
      "command": "npx",
      "args": ["-y", "str-s-mcp"]
    }
  }
}