n8n-nodes-svgr

This is an n8n community node that transforms SVG code into React components.

n8n is a fair-code licensed workflow automation platform.

✅ n8n Cloud Compatible

This node has no external dependencies and is fully compatible with both:

• ✅ n8n Cloud
• ✅ Self-hosted n8n instances

Features

• Transform SVG code into React components
• Basic Options: icon, dimensions, svgo, prettier, removeViewBox, addFillCurrentColor
• Code Generation: typescript, jsxRuntime (classic/automatic), exportType (default/named)
• Component Wrapping: ref (forwardRef), memo (React.memo)
• Props Control: expandProps, svgProps, replaceAttrValues
• Accessibility: titleProp, descProp (aria-labelledby, aria-describedby)
• React Native: native mode with react-native-svg support

Documentation

• Options Guide (English)
• 옵션 가이드 (한국어)
• SVGO Options (English)
• SVGO 옵션 (한국어)

Installation

n8n Cloud

1. Go to Settings > Community Nodes
2. Click Install
3. Enter n8n-nodes-svgr
4. Click Install

Self-Hosted n8n

Install via npm in your n8n installation directory:

npm install n8n-nodes-svgr

Or install through the n8n UI:

1. Go to Settings > Community Nodes
2. Click Install
3. Enter n8n-nodes-svgr
4. Click Install

From Source

1. Clone this repository
2. Install dependencies:

   pnpm install
   

3. Build the node:

   pnpm run build
   

4. Link to your n8n installation or copy dist/ to your n8n's node_modules/n8n-nodes-svgr/

Usage

1. Add the SVGR node to your workflow
2. Enter your SVG code in the SVG Code field
3. Set the Component Name (default: SvgComponent)
4. Configure options as needed (see Options Guide for details)
5. Execute the node to get the transformed React component

Quick Options Reference

Option	Default	Description
icon	true	Remove width/height for scalable icons
typescript	false	Generate TypeScript code
jsxRuntime	classic	JSX runtime (classic or automatic)
ref	false	Wrap with forwardRef
memo	false	Wrap with React.memo
native	false	Generate React Native SVG code
exportType	default	Export type (default or named)

Example

Input (SVG Code):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
</svg>

Output (reactCode):

import * as React from 'react';
const SvgComponent = (props) => (
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
		<path d="M12 2 2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z" />
	</svg>
);
export default SvgComponent;

Development

Setup

pnpm install

Development Mode

Start n8n with hot reload:

pnpm run dev

Build

pnpm run build

This compiles the TypeScript code to JavaScript. The node uses a custom SVG→JSX transformer with no external dependencies.

Lint

pnpm run lint
pnpm run lint:fix

Testing

Run unit tests:

pnpm test

Run tests in watch mode:

pnpm test:watch

Run tests with coverage:

pnpm test -- --coverage

Test your node in n8n:

pnpm run dev

Then test your node in n8n workflows at http://localhost:5678

Compatibility

n8n Version	Compatibility
1.0+	✅ Compatible
n8n Cloud	✅ Compatible

No external dependencies required! This node uses a custom SVG→JSX transformer built specifically for n8n, making it fully compatible with n8n Cloud.

Technical Details

This node uses a custom-built SVG→JSX transformer that:

• Converts HTML attributes to React JSX syntax (e.g., class → className, stroke-width → strokeWidth)
• Handles style attributes by converting them to React style objects
• Supports icon mode (removes dimensions for scalable icons)
• Generates TypeScript-compatible code when enabled
• Formats output with basic prettification
• Includes built-in SVGO optimization (27 plugins for SVG cleanup)

The transformer is built without external dependencies, making it fully compatible with n8n Cloud restrictions.

Resources

• n8n Community Nodes Documentation
• n8n Node Development Guide

Version History

0.1.0

• Initial release
• Transform SVG to React components
• Configurable options (Icon, TypeScript, Prettier, Dimensions)
• Self-hosted n8n support

License

MIT

Author

SeonHyungjo

• Email: seonhyung.jo@gmail.com
• GitHub: @SeonHyungjo

Contributing

Issues and pull requests are welcome! Please feel free to contribute.

Support

If you encounter any issues or have questions:

1. Check the Issues page
2. Create a new issue if your problem isn't already listed
3. Visit the n8n Community Forum