Optical Center
Playground

    Install

    One package, several entry points. Install once, then wire the plugin that matches the build tool your stack already uses.

    Quick path: init

    One command detects your framework and package manager, installs the dependency, and patches the right config file. Run it bare for an interactive picker, or pin everything with flags: 

    npx optical-center init                          # interactive
npx optical-center init --integration vite --yes # non-interactive

    Everything below is what init automates — read on if you prefer to wire things by hand, or if init handed you a manual snippet. Full flag reference on the CLI page.

    Package

    Pick a package manager:

    npm bash 
    npm install optical-center
    pnpm bash 
    pnpm add optical-center
    yarn bash 
    yarn add optical-center
    bun bash 
    bun add optical-center

    Subpath imports

    Each adapter ships behind its own subpath. The root export stays browser-safe — pulling in the Node-only rasterizer requires the explicit /node import.

    Subpath What it gives you
    optical-center Browser-safe core: getOpticalCenter, transformViewBox, applyTransformToSvg, types.
    optical-center/node Node-only helpers: rasterizeSvg (resvg), transformViewBoxFromSvg, sanitizeSvg.
    optical-center/cli The optical-center binary: init, transform, info, analyze, clear-cache, version — plus an interactive wizard when run bare.
    optical-center/babel Babel plugin. Handles optical-center="auto" on JSX wrappers and inline <svg>.
    optical-center/vite Vite plugin. Runs the Babel pass on JSX/TSX and the HTML rewrite on index.html.
    optical-center/astro Astro integration. Wraps the Vite plugin and adds a post-build sweep over emitted HTML.
    optical-center/postcss PostCSS plugin. Reads optical-center: auto on CSS rules and emits centering + translate.
    optical-center/tailwind Tailwind plugin. Registers the .optical-center utility class.

    Wire it up

    Pick the section that matches your build tool. Every framework works the same way under the hood — the wiring is just how each tool likes its plugins registered.

    Vite

    The Vite plugin owns JSX/TSX modules and the index.html hook. Run it alongside the React (or whatever) plugin:

    vite.config.ts ts 
    import { defineConfig } from 'vite';
import opticalCenter from 'optical-center/vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [opticalCenter(), react()],
});

    For the CSS surface, add the PostCSS plugin too — Vite picks up postcss.config.js automatically:

    postcss.config.js js 
    import opticalCenter from 'optical-center/postcss';

export default {
  plugins: [opticalCenter()],
};

    Astro

    The Astro integration wraps the Vite plugin and adds a post-build sweep over emitted *.html files (Astro renders its own pages through a path Vite's transformIndexHtml does not see). Single line in astro.config:

    astro.config.mjs js 
    import { defineConfig } from 'astro/config';
import opticalCenter from 'optical-center/astro';

export default defineConfig({
  integrations: [opticalCenter()],
});

    PostCSS (standalone)

    Use this when there's no Vite/Astro in the stack — webpack, parcel, postcss-cli, or any other host that runs PostCSS.

    postcss.config.js js 
    import opticalCenter from 'optical-center/postcss';

export default {
  plugins: [
    opticalCenter({
      // Resolve url('@icons/play.svg') against an absolute path.
      aliases: { '@icons': '/path/to/icons' },
    }),
  ],
};

    The PostCSS plugin also handles the JSX-scan path on its own — it walks the project's .jsx/.tsx files at build time so a CSS class on a wrapper can still find the icon inside (see the CSS class pattern).

    Tailwind

    The Tailwind plugin registers a single utility, .optical-center, that emits optical-center: auto. The PostCSS plugin then expands it into the centering block. Make sure optical-center/postcss runs after Tailwind in your PostCSS chain — Tailwind ships the directive, our PostCSS plugin resolves it.

    tailwind.config.js js 
    import opticalCenter from 'optical-center/tailwind';

export default {
  plugins: [opticalCenter],
};

    Next

    Once a plugin is wired, jump to the pattern that matches how you want to author your icons: