@svgr/hast-util-to-babel-ast

What is @svgr/hast-util-to-babel-ast?

@svgr/hast-util-to-babel-ast is a utility package that converts HAST (Hypertext Abstract Syntax Tree) to Babel AST (Abstract Syntax Tree). This is particularly useful in the context of transforming SVG files into React components, as it allows for the manipulation and transformation of SVG content using Babel's powerful tooling.

What are @svgr/hast-util-to-babel-ast's main functionalities?

Convert HAST to Babel AST

This feature allows you to convert a HAST node into a Babel AST node. The code sample demonstrates how to import the `toBabelAst` function, create a simple HAST node representing an SVG element, and convert it to a Babel AST node.

const { toBabelAst } = require('@svgr/hast-util-to-babel-ast');
const hastNode = { type: 'element', tagName: 'svg', properties: {}, children: [] };
const babelAst = toBabelAst(hastNode);
console.log(babelAst);

Other packages similar to @svgr/hast-util-to-babel-ast

hast-util-to-estree

hast-util-to-estree is a utility that converts HAST to ESTree, which is another form of Abstract Syntax Tree used primarily in the JavaScript ecosystem. While @svgr/hast-util-to-babel-ast focuses on Babel AST, hast-util-to-estree is more general-purpose and can be used in a wider range of JavaScript transformations.

rehype

rehype is a tool that transforms HTML with plugins. It can be used to parse HTML into HAST and then manipulate it. While it doesn't directly convert HAST to Babel AST, it can be used in conjunction with other tools to achieve similar results. rehype is more focused on HTML processing and manipulation.

README

@svgr/hast-util-to-babel-ast

Transforms HAST into Babel AST.

Install

npm install --save-dev @svgr/hast-util-to-babel-ast

Usage

import { parse } from 'svg-parser'
import hastToBabelAst from '@svgr/hast-util-to-babel-ast'

const hastTree = parse(`<svg></svg>`)

const babelTree = hastToBabelAst(hastTree)

License

MIT