Skip to main content
Glama
pchalupa

SVGR MCP Server

by pchalupa
OverviewSchemaRelated ServersScoreDiscussions
JavaScript
Local

convert_svg_to_react

Convert SVG strings or files into React components using SVGR, with settings for TypeScript, React Native, optimization, and formatting.

Instructions

Convert SVG content or file to React component using SVGR

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
svgYesSVG content as string or file path to SVG file
componentNameNoName for the React component (default: MyComponent)
optionsNoSVGR configuration options

Implementation Reference

  • src/svgr.ts:3-32 (handler)
    The core handler function that converts SVG to React component using SVGR's transform function. Takes svg string, optional componentName, and SVGR options (Config). Manages plugin ordering (svgo, prettier) and calls @svgr/core transform.
    export async function convertSvgToReact({
  svg,
  componentName = "MyComponent",
  options = {},
}: {
  svg: string;
  componentName?: string;
  options: Config;
}): Promise<string> {
  const plugins = ["@svgr/plugin-jsx"];

  if (options.svgo !== false) {
    plugins.unshift("@svgr/plugin-svgo");
  }

  if (options.prettier !== false) {
    plugins.push("@svgr/plugin-prettier");
  }

  return await transform(
    svg,
    {
      plugins: plugins,
      ...options,
    },
    {
      componentName,
    },
  );
}
  • src/index.ts:14-116 (registration)
    Registration of the 'convert_svg_to_react' tool on the MCP server with its full input schema (zod) and the async handler callback that invokes convertSvgToReact and formats the response.
    server.registerTool(
  "convert_svg_to_react",
  {
    description: "Convert SVG content or file to React component using SVGR",
    inputSchema: z.object({
      svg: z
        .string()
        .describe("SVG content as string or file path to SVG file"),
      componentName: z
        .string()
        .optional()
        .describe("Name for the React component (default: MyComponent)"),
      options: z
        .object({
          icon: z
            .union([z.boolean(), z.string(), z.number()])
            .optional()
            .describe("Replace SVG width and height with a custom value"),
          native: z
            .boolean()
            .optional()
            .describe("Modify all SVG nodes for React Native"),
          typescript: z
            .boolean()
            .optional()
            .describe("Generate TypeScript component"),
          dimensions: z
            .boolean()
            .optional()
            .describe("Keep width and height attributes from the root SVG tag"),
          expandProps: z
            .union([z.enum(["start", "end"]), z.boolean()])
            .optional()
            .describe("Forward properties to the SVG tag"),
          prettier: z
            .boolean()
            .optional()
            .describe("Format output with Prettier"),
          prettierConfig: z
            .record(z.string(), z.unknown())
            .optional()
            .describe("Specify Prettier config"),
          svgo: z
            .boolean()
            .optional()
            .describe("Use SVGO to optimize SVG code"),
          ref: z.boolean().optional().describe("Add ref support to component"),
          memo: z
            .boolean()
            .optional()
            .describe("Wrap component with React.memo"),
          replaceAttrValues: z
            .record(z.string(), z.string())
            .optional()
            .describe("Replace an attribute value by another"),
          svgProps: z
            .record(z.string(), z.string())
            .optional()
            .describe("Add props to the root SVG tag"),
          titleProp: z.boolean().optional().describe("Add title prop support"),
          descProp: z
            .boolean()
            .optional()
            .describe("Add description prop support"),
          jsxRuntime: z
            .enum(["classic", "automatic", "classic-preact"])
            .optional()
            .describe("Specify a JSX runtime to use"),
          exportType: z
            .enum(["named", "default"])
            .optional()
            .describe("Specify export type (named or default)"),
        })
        .default({})
        .describe("SVGR configuration options"),
    }),
  },
  async (args) => {
    try {
      const jsCode = await convertSvgToReact(args);

      return {
        content: [
          {
            type: "text",
            text: jsCode,
          },
        ],
      };
    } catch (error) {
      return {
        content: [
          {
            type: "text",
            text: `Error converting SVG: ${
              error instanceof Error ? error.message : error
            }`,
          },
        ],
      };
    }
  },
);
  • src/index.ts:18-89 (schema)
    Zod input schema for convert_svg_to_react defining parameters: svg (required string), componentName (optional), and options (object with icon, native, typescript, dimensions, expandProps, prettier, prettierConfig, svgo, ref, memo, replaceAttrValues, svgProps, titleProp, descProp, jsxRuntime, exportType).
    inputSchema: z.object({
  svg: z
    .string()
    .describe("SVG content as string or file path to SVG file"),
  componentName: z
    .string()
    .optional()
    .describe("Name for the React component (default: MyComponent)"),
  options: z
    .object({
      icon: z
        .union([z.boolean(), z.string(), z.number()])
        .optional()
        .describe("Replace SVG width and height with a custom value"),
      native: z
        .boolean()
        .optional()
        .describe("Modify all SVG nodes for React Native"),
      typescript: z
        .boolean()
        .optional()
        .describe("Generate TypeScript component"),
      dimensions: z
        .boolean()
        .optional()
        .describe("Keep width and height attributes from the root SVG tag"),
      expandProps: z
        .union([z.enum(["start", "end"]), z.boolean()])
        .optional()
        .describe("Forward properties to the SVG tag"),
      prettier: z
        .boolean()
        .optional()
        .describe("Format output with Prettier"),
      prettierConfig: z
        .record(z.string(), z.unknown())
        .optional()
        .describe("Specify Prettier config"),
      svgo: z
        .boolean()
        .optional()
        .describe("Use SVGO to optimize SVG code"),
      ref: z.boolean().optional().describe("Add ref support to component"),
      memo: z
        .boolean()
        .optional()
        .describe("Wrap component with React.memo"),
      replaceAttrValues: z
        .record(z.string(), z.string())
        .optional()
        .describe("Replace an attribute value by another"),
      svgProps: z
        .record(z.string(), z.string())
        .optional()
        .describe("Add props to the root SVG tag"),
      titleProp: z.boolean().optional().describe("Add title prop support"),
      descProp: z
        .boolean()
        .optional()
        .describe("Add description prop support"),
      jsxRuntime: z
        .enum(["classic", "automatic", "classic-preact"])
        .optional()
        .describe("Specify a JSX runtime to use"),
      exportType: z
        .enum(["named", "default"])
        .optional()
        .describe("Specify export type (named or default)"),
    })
    .default({})
    .describe("SVGR configuration options"),
}),
  • src/svgr.ts:1-32 (helper)
    Imports the transform function from @svgr/core and the Config type, which are the core dependencies used by the handler.
    import { type Config, transform } from "@svgr/core";

export async function convertSvgToReact({
  svg,
  componentName = "MyComponent",
  options = {},
}: {
  svg: string;
  componentName?: string;
  options: Config;
}): Promise<string> {
  const plugins = ["@svgr/plugin-jsx"];

  if (options.svgo !== false) {
    plugins.unshift("@svgr/plugin-svgo");
  }

  if (options.prettier !== false) {
    plugins.push("@svgr/plugin-prettier");
  }

  return await transform(
    svg,
    {
      plugins: plugins,
      ...options,
    },
    {
      componentName,
    },
  );
}

Tool Definition Quality

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description bears full responsibility for disclosing behavioral traits. It only states the conversion action but omits critical details such as whether the output is a string or file, error handling for invalid SVG, or any side effects. The agent cannot anticipate the tool's behavior beyond the basic conversion.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, front-loaded sentence of 10 words. Every word is necessary and the key verb 'Convert' appears first. There is no redundancy or filler.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (3 parameters, a nested options object with 17 sub-properties), the description is too minimal. It does not explain what SVGR does, what the output looks like, or how the options affect the conversion. The agent lacks sufficient context to effectively use the tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema provides descriptions for all parameters (100% coverage), so the baseline is 3. The description adds minimal additional meaning beyond the schema—e.g., 'SVG content as string or file path' is already in the schema. No extra semantic value is provided.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: converting SVG content or file to a React component using SVGR. It uses a specific verb ('Convert') and identifies the resource and target, leaving no ambiguity.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description does not provide any guidance on when to use this tool versus alternatives (though no siblings exist). There is no mention of prerequisites, context, or when not to use it, leaving the agent to infer from the name alone.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/pchalupa/svgr-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server