@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

Changelog

[2.13.0] - 2024-11-12

Added

• Core

  • Expose watcher ignore and watcher backend options – Details
  • Improve large watcher events payload experience – Details
  • Add support for globs in package.json#source – Details
  • Add config key invalidation – Details

• Bundler

  • Add library bundler – Details

• Dev Server

  • Support .proxyrc.ts – Details

• Resolver

  • 12x faster resolver cache – Details
  • Correctly handle empty resolver diagnostics array – Details

Fixed

• Core

  • Remove abortcontroller-polyfill – Details
  • Fix missing content key in symbol propagation when asset is removed – Details
  • Update minimum supported node version to 16 – Details
  • Ensure the snapshot directory matches the watch dir – Details
  • Add parcel version to PluginOptions – Details
  • Fix possible race condition in the caching of request graph – Details
  • Ensure empty extended config throws a diagnostic – Details
  • Ensure Asset public ids are assigned deterministically – Details
  • Directories ignored by watcher should be relative to the watch directory – Details
  • Fix request tracker incremental cache write for new nodes – Details
  • Improve request graph cache reading – Details
  • Exit process with error code when reporters fail – Details
  • Write tmp files to the OS tmp directory - Details
  • Fix small HMR issues – Details
  • Fix crash in EntryRequest with multiple globs in the source field – Details
  • Revert split manifest runtime bundles – Details
  • Revert chunked cache blobs for improved stability – Details
  • Update dependencies – Details

• Bundler

  • Fix assets outside project root with Manual Shared Bundles – Details

• JavaScript

  • Avoid non-identifier export names in non-entry library bundles – Details
  • Relax react-refresh version range – Details
  • Also emit swc recoverable errors – Details
  • Bump swc – Details, Details, Details, Details
  • Bump swc and browserslist-rs – Details
  • Replace std::sync locks with parking_lot locks for better stability – Details
  • Ensure const modules in async bundles are wrapped – Details
  • Fix dev packager global reference – Details
  • Fix import usage tracking for destructure defaulting – Details
  • Update Node.js globals replacer to use SWC VisitMut – Details
  • Update process.env replacer to use SWC VisitMut – Details
  • Update Node.js __filename and __dirname replace to use SWC VisitMut – Details
  • Fix parcelRequire being added to multi-target libraries – Details
  • Handle TypeScript expressions in macro evaluator – Details

• Resolver

  • Fix NUL byte crash in resolver – Details
  • Change default resolver error message for custom specifiers – Details

• TypeScript

  • Handle dynamic import type references in TS types transformer – Details
  • Correctly handle qualified names in TS types import() – Details

• SASS

  • Migrate to new sass API – Details

• SVG

  • Load svgo version from project – Details
  • Update svgr and use project svgo version – Details

• Image

  • Bump oxipng – Details

• Vue

  • Upgrade consolidate to v1 – Details

• Web Extensions

  • Allow both service_worker and scripts in MV3 Web Extensions – Details