extract_svg

Instructions

Implementation Reference

• src/index.ts:80-97 (registration)

  Registration of the 'extract_svg' tool with its name, description, and inputSchema (requiring sourcePath and targetDir)

  {
    name: 'extract_svg',
    description: 'Extract SVG components from React/TypeScript/JavaScript files into individual .svg files. This tool will preserve the SVG structure and attributes while removing React-specific code. By default, the source file will be replaced with "MIGRATED TO <target absolute path>" and a warning message after successful extraction, making it easy to track where the SVGs were moved to. This behaviour can be disabled by setting the DISABLE_SOURCE_REPLACEMENT environment variable to \'true\'. The warning message can be customized by setting the WARNING_MESSAGE environment variable.',
    inputSchema: {
      type: 'object',
      properties: {
        sourcePath: {
          type: 'string',
          description: 'Path to the source file containing SVG components',
        },
        targetDir: {
          type: 'string',
          description: 'Directory where the SVG files should be written',
        },
      },
      required: ['sourcePath', 'targetDir'],
    },
  },

• src/index.ts:145-177 (handler)

  Handler for the 'extract_svg' tool: reads the source file, calls extractSvgs() to parse the AST, writes each SVG to a .svg file in targetDir, and optionally replaces the source file with a migration message

  } else if (request.params.name === 'extract_svg') {
    const { targetDir } = request.params.arguments as { targetDir: string };
    const svgs = await this.extractSvgs(sourceCode);
  
    // Create target directory if it doesn't exist
    await fs.mkdir(targetDir, { recursive: true });
  
    // Write each SVG to a separate file
    for (const svg of svgs) {
      const filePath = path.join(targetDir, `${svg.name}.svg`);
      await fs.writeFile(filePath, svg.content, 'utf-8');
    }
  
    // Replace source file content with migration message if not disabled
    if (!DISABLE_SOURCE_REPLACEMENT) {
      const absoluteTargetDir = path.resolve(targetDir);
      await fs.writeFile(
        sourcePath,
        `MIGRATED TO ${absoluteTargetDir}${WARNING_MESSAGE}`,
        'utf-8'
      );
    }
  
    return {
      content: [
        {
          type: 'text',
          text: `Successfully extracted ${svgs.length} SVG components to ${path.resolve(targetDir)}${
            !DISABLE_SOURCE_REPLACEMENT ? `. Source file replaced with "MIGRATED TO ${path.resolve(targetDir)}"` : ''
          }`,
        },
      ],
    };

• src/index.ts:264-295 (helper)

  extractSvgs() helper: parses source code with @babel/parser (TypeScript + JSX), traverses the AST to find arrow function variables returning JSX, and collects SVGs with their names and content

  private async extractSvgs(sourceCode: string): Promise<SvgExtraction[]> {
    const ast = parser.parse(sourceCode, {
      sourceType: 'module',
      plugins: ['typescript', 'jsx'],
    });
  
    const svgs: SvgExtraction[] = [];
  
    traverse(ast, {
      VariableDeclaration(path: NodePath<t.VariableDeclaration>) {
        const declaration = path.node.declarations[0];
        if (t.isVariableDeclarator(declaration) &&
            t.isIdentifier(declaration.id) &&
            t.isArrowFunctionExpression(declaration.init)) {
  
          // Look for JSX in the arrow function body
          const body = declaration.init.body;
          if (t.isJSXElement(body)) {
            const svgContent = this.extractSvgContent(body);
            if (svgContent) {
              svgs.push({
                name: declaration.id.name,
                content: svgContent
              });
            }
          }
        }
      }
    });
  
    return svgs;
  }

• src/index.ts:211-262 (helper)

  extractSvgContent() helper: converts a JSXElement (if it's an <svg> element) into an SVG string by extracting attributes and child elements, removing React-specific JSX wrappers

  private extractSvgContent(jsxElement: t.JSXElement): string | null {
    // Check if this is an SVG element
    if (t.isJSXIdentifier(jsxElement.openingElement.name) &&
        jsxElement.openingElement.name.name.toLowerCase() === 'svg') {
  
      // Convert JSX attributes to string
      const attributes = jsxElement.openingElement.attributes
        .map(attr => {
          if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
            const name = attr.name.name;
            if (t.isStringLiteral(attr.value)) {
              return `${name}="${attr.value.value}"`;
            } else if (t.isJSXExpressionContainer(attr.value) &&
                      t.isStringLiteral(attr.value.expression)) {
              return `${name}="${attr.value.expression.value}"`;
            }
          }
          return '';
        })
        .filter(Boolean)
        .join(' ');
  
      // Convert children to string
      const children = jsxElement.children
        .map(child => {
          if (t.isJSXElement(child)) {
            const elementName = (child.openingElement.name as t.JSXIdentifier).name;
            const childAttributes = child.openingElement.attributes
              .map(attr => {
                if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
                  const name = attr.name.name;
                  if (t.isStringLiteral(attr.value)) {
                    return `${name}="${attr.value.value}"`;
                  }
                }
                return '';
              })
              .filter(Boolean)
              .join(' ');
  
            return `<${elementName} ${childAttributes}>${child.children
              .map(c => t.isJSXText(c) ? c.value : '')
              .join('')}</${elementName}>`;
          }
          return '';
        })
        .join('\n    ');
  
      return `<svg ${attributes}>\n    ${children}\n</svg>`;
    }
    return null;
  }

• src/index.ts:83-96 (schema)

  Input schema for the 'extract_svg' tool defining the expected arguments: sourcePath (string) and targetDir (string), both required

  inputSchema: {
    type: 'object',
    properties: {
      sourcePath: {
        type: 'string',
        description: 'Path to the source file containing SVG components',
      },
      targetDir: {
        type: 'string',
        description: 'Directory where the SVG files should be written',
      },
    },
    required: ['sourcePath', 'targetDir'],
  },