The Complete Production SOP: How to Deploy and Run SVGR Automated SVG to React Component Converter in Autonomous AI Agents
Step-by-step SOP to install and run the SVGR SVG to React Component skill in Codex, Claude Code, and Cursor. Converts vectors into accessible TypeScript components.
Technical Overview & Architectural Context
When autonomous agents are instructed to convert raw SVG assets into React components without a rigid SOP, they frequently introduce production-breaking regressions. Unconstrained LLMs often inline raw SVG payloads directly into JSX without cleaning presentation attributes, leave hardcoded width, height, and fill hex codes intact, and neglect accessibility requirements like `<title>` tags and ARIA labels. Furthermore, manual JSX conversions by agents frequently lead to invalid DOM properties, mismatched casing (e.g., `clip-path` instead of `clipPath`), and unoptimized bundle sizes. The `svgr-svg-to-react-component` skill enforces deterministic compilation boundaries using standard `@svgr/cli` and `@svgr/core` configurations. By codifying transformations via a declarative `.svgrrc.json` manifest—enforcing `icon: true`, dynamic `currentColor` replacement, TypeScript typings (`SVGProps<SVGSVGElement>`), and automated barrel file generation—the skill guarantees that vector assets are converted consistently, performantly, and without hallucinated JSX syntax.
Prerequisites & Environment Requirements
Verified Search Intents & Long-Tail Queries Solved
This operational tutorial is engineered to provide deterministic solutions for these developer search queries:
Step-by-Step Execution Playbook
Local Environment Setup & SKILL.md Mounting
Mount the skill manifest into your agent's global or workspace-level configuration directory.
Autonomous runtimes such as Claude Code, Codex, and Cursor inspect system-level rules in `~/.agents/skills/` or local workspace directories (`.agents/skills/`). Mounting `SKILL.md` exposes deterministic triggers to the runtime's intent matching engine, preventing ad-hoc manual SVG conversions.
mkdir -p .agents/skills/svgr-svg-to-react-component && cat << 'EOF' > .agents/skills/svgr-svg-to-react-component/SKILL.md
---
name: "svgr-svg-to-react-component"
description: "Transform raw SVG vector files into accessible, type-safe React/Next.js components."
metadata:
author: "Greg Bergé"
version: "1.0.0"
runtime_compatibility:
- "codex"
- "claude-code"
- "cursor"
- "windsurf"
triggers:
- "convert svg to react component svgr"
- "replace fill with currentcolor svgr"
- "generate typescript icon components"
permissions:
fs_read: true
fs_write: "workspace"
shell_exec: true
net_access: false
---
# SVGR Automated SVG to React Component Converter
Converts SVG files into production React components using @svgr/cli: stripping hardcoded dimensions, replacing fill with currentColor, and generating TypeScript types.
## SOP Rules
1. Ensure @svgr/cli is available or executed via npx.
2. Configure .svgrrc.json at the workspace root before generation.
3. Execute npx @svgr/cli with target directory flags.
4. Produce barrel export (index.ts) and verify build passing.
EOF---
name: "svgr-svg-to-react-component"
description: "Transform raw SVG vector files into accessible, type-safe React/Next.js components."
metadata:
author: "Greg Bergé"
version: "1.0.0"
runtime_compatibility:
- "codex"
- "claude-code"
- "cursor"
- "windsurf"
triggers:
- "convert svg to react component svgr"
- "replace fill with currentcolor svgr"
- "generate typescript icon components"
permissions:
fs_read: true
fs_write: "workspace"
shell_exec: true
net_access: false
---Place `.svgrrc.json` in the root repository so the agent does not inject excessive inline CLI parameters, keeping the context window uncluttered.
Ensure `shell_exec: true` is authorized within workspace boundaries if your agent execution runner isolates CLI subshells.
Deterministic SVGR Configuration Injection
Provision a structured configuration file to dictate type generation, attribute replacement, and accessibility defaults.
To prevent the LLM from generating manual JSX for each individual icon, the agent creates a standardized `.svgrrc.json`. This forces SVGR to handle SVG minification, dimension scaling via relative viewport units (`1em`), replacement of static fills (`#000`, `#000000`, `black`) with CSS `currentColor`, and emission of React accessibility attributes.
cat << 'EOF' > .svgrrc.json
{
"icon": true,
"typescript": true,
"dimensions": false,
"titleProp": true,
"memo": true,
"replaceAttrValues": {
"#000": "currentColor",
"#000000": "currentColor",
"black": "currentColor"
},
"prettier": true,
"svgoConfig": {
"plugins": [
{
"name": "preset-default",
"params": {
"overrides": {
"removeViewBox": false
}
}
}
]
}
}
EOF{
"icon": true,
"typescript": true,
"dimensions": false,
"titleProp": true,
"memo": true,
"replaceAttrValues": {
"#000": "currentColor",
"#000000": "currentColor",
"black": "currentColor"
}
}Setting `dimensions: false` alongside `icon: true` automatically removes static `width` and `height` properties in favor of inherited size from parent text or utility classes (like Tailwind's `w-5 h-5`).
Never allow SVGO to remove the `viewBox` attribute (`removeViewBox: false`); stripping it breaks dynamic icon scaling across responsive layouts.
Trigger Execution & Batch Compilation
Invoke the agent using exact intent trigger phrases to initiate automated batch transpilation.
Instruct the agent using the trigger phrases specified in `SKILL.md`. The agent reads incoming raw SVGs from the asset directory, executes `@svgr/cli`, outputs clean TSX files to the destination icon directory, and generates a barrel index file for streamlined imports.
npx @svgr/cli --out-dir src/components/icons --ext tsx --index-template src/components/icons/index-template.js src/assets/svg# Batch transpilation via @svgr/cli
npx @svgr/cli \
--out-dir src/components/icons \
--ext tsx \
src/assets/svgUse an explicit directory-to-directory path pattern. Avoid having the agent process files one-by-one, which consumes unnecessary agent context tokens.
Ensure source filenames are valid identifiers (kebab-case or camelCase). Filenames containing spaces will cause SVGR export naming errors.
Verification, Linting & Output Quality Gate
Validate emitted TypeScript interfaces, component exports, and build compliance.
The skill mandates a deterministic quality gate before completing the task. The agent executes `tsc --noEmit` and the project linter to confirm that generated TSX components satisfy React 18/19 typing definitions and lack unescaped JSX characters.
npx tsc --noEmit && npm run lintimport type { SVGProps } from "react";
import { memo } from "react";
interface IconProps extends SVGProps<SVGSVGElement> {
title?: string;
titleId?: string;
}
const SvgCheckCircle = ({ title, titleId, ...props }: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
aria-hidden={title ? undefined : "true"}
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
);
const MemoCheckCircle = memo(SvgCheckCircle);
export default MemoCheckCircle;Verify that `titleProp: true` generates conditionally accessible SVGs with `aria-hidden="true"` fallback when no title is passed.
If using Next.js Turbopack or App Router, verify that SVGR components do not inadvertently import client hooks unless explicitly wrapped in 'use client'.
Real-World Scenario: Batch Migrating Figma SVG Exports to Next.js TypeScript Icon Set
“Convert svg to react component svgr: Batch process all newly exported raw SVG icons in src/assets/svg/ into production-grade TypeScript components in src/components/icons/. Ensure you replace fill with currentcolor svgr, enable title prop for accessibility, and generate typescript icon components with an index.ts barrel export.”
Runtime Troubleshooting & Failure Modes
Root Cause: The agent attempted to execute SVGR in an environment where `@svgr/cli` is neither locally installed nor resolvable via global package caches.
npm install -D @svgr/cli @svgr/core || pnpm add -D @svgr/cli @svgr/coreRoot Cause: SVGR generated a component expecting custom accessibility properties (`title`, `titleId`) without extending standard React SVG prop declarations in TypeScript.
cat << 'EOF' > src/types/svgr.d.ts
import 'react';
declare module 'react' {
interface SVGProps<T> {
title?: string;
titleId?: string;
}
}
EOFFrequently Asked Questions (SVGR Automated SVG to React Component Converter SOP)
Q:Can I use SVGR Automated SVG to React Component Converter across Codex, Claude Code, and Cursor simultaneously?
Yes. The skill conforms to the universal SKILL.md specification supported across all modern agent runtimes. Simply mount it in your workspace `.agents/skills` or your global agent configuration directory.
Q:How does SVGR Automated SVG to React Component Converter prevent context window overflow during long agent sessions?
Instead of asking the LLM to output thousands of lines of raw JSX directly into chat memory, this skill delegates compilation to `@svgr/cli` via a single deterministic shell execution, preserving vital context window tokens.
Q:Does this skill require escalated root or container permissions?
No. It is audited with a security score of 98/100 and runs safely within workspace-scoped sandboxes with read access to source SVGs and write access to your component directory.
Ready to equip your autonomous agent with SVGR Automated SVG to React Component Converter?
Copy the complete audited SKILL.md specification or download the 1-click zip bundle directly from our verified registry.