@parcel/transformer-svg

What is @parcel/transformer-svg?

@parcel/transformer-svg is a plugin for Parcel, a web application bundler. This transformer allows you to import SVG files and use them in your JavaScript, CSS, or HTML files. It can optimize SVG files, inline them, or convert them to React components.

What are @parcel/transformer-svg's main functionalities?

Importing SVG as URL

This feature allows you to import an SVG file as a URL, which can then be used in your HTML or CSS.

import logoUrl from './logo.svg';
console.log(logoUrl);

Inlining SVG

This feature allows you to import an SVG file and inline its content directly into your HTML.

import logo from './logo.svg';
document.body.innerHTML = logo;

Converting SVG to React Component

This feature allows you to import an SVG file as a React component, which can then be used in your React application.

import { ReactComponent as Logo } from './logo.svg';
function App() {
  return <Logo />;
}

Other packages similar to @parcel/transformer-svg

svgr

SVGR is a tool that transforms SVGs into React components. It is highly customizable and can be used as a CLI tool, webpack loader, or Node.js library. Compared to @parcel/transformer-svg, SVGR is more focused on React and offers more customization options for the transformation process.

svg-url-loader

svg-url-loader is a webpack loader that loads SVG files as URLs. It can also optimize SVG files using SVGO. Compared to @parcel/transformer-svg, svg-url-loader is more focused on URL loading and optimization, and it is specifically designed for use with webpack.

react-svg-loader

react-svg-loader is a webpack loader that transforms SVGs into React components. It also optimizes SVG files using SVGO. Compared to @parcel/transformer-svg, react-svg-loader is specifically designed for React and webpack, offering a similar feature set but with a focus on React component transformation.

README

The README file is missing