open-icon-svg

open-icon-svg is the source-of-truth package in this repo. It ships the raw SVG files together with generated names, category maps, aliases, and file/import helpers.

Install

npm install open-icon-svg

Use it when

• you need canonical icon names in TypeScript
• you want to browse icons by category
• you need to normalize loose user input into a valid icon name
• you want direct package file paths for rendering or build tooling

What it exports

• OPEN_ICON_NAMES for the full typed list
• OPEN_ICON_CATEGORIES for the category list
• OPEN_ICON_CATEGORY_TO_NAMES for grouped browsing
• OPEN_ICON_KEY_TO_NAME for constant-like lookups
• resolveOpenIconName, getOpenIconFilePath, and getOpenIconImportPath for runtime resolution

Example

import {
  OPEN_ICON_KEY_TO_NAME,
  getOpenIconImportPath,
  resolveOpenIconName,
} from 'open-icon-svg';

const iconName = OPEN_ICON_KEY_TO_NAME.UI_SEARCH_M;
const input = resolveOpenIconName('icon_search-m.svg');
const importPath = getOpenIconImportPath(iconName);

Pair it with

• vite-plugin-open-icon for Vite apps that import SVG modules
• open-icon-transform for custom pipelines outside Vite

open-icon-transform

open-icon-transform is the pipeline layer. It accepts raw SVG content and applies the same cleanup and interpolation steps used by the loader integrations.

Install

npm install open-icon-transform

Use it when

• you need SVG transformation in scripts or CLIs
• you want to run the Open Icon pipeline outside Vite
• you need direct access to replace/remove rules and interpolation settings

What it handles

• color simplification
• opacity flattening
• data cleanup and replacement
• tag and attribute removal
• {{...}} interpolation using defaults and custom config data

Example

import { transformOpenIconSvg } from 'open-icon-transform';

const output = transformOpenIconSvg(
  '<svg><path style="fill:red;"/></svg>',
  '/icons/icon_demo.svg',
  {
    replaceData: [['fill:red;', 'fill: {{brand.primary}};']],
    configData: { brand: { primary: '#123456' } },
    simplifyColors: false,
    removeData: [],
  }
);

Pair it with

• open-icon-svg for typed names and file lookup metadata
• your own scripts, CLIs, or build steps when Vite is not involved

vite-plugin-open-icon

vite-plugin-open-icon connects the transformation pipeline to Vite. It transforms .svg modules when the configured query is present and returns a JavaScript module with the transformed SVG string.

Install

npm install vite-plugin-open-icon

Use it when

• your app already uses Vite
• you want transformed SVG output at module load time
• you want to keep custom transform settings in Vite config instead of bespoke scripts

Example

import { defineConfig } from 'vite';
import { openIconSvgLoaderPlugin } from 'vite-plugin-open-icon';

export default defineConfig({
  plugins: [
    openIconSvgLoaderPlugin({
      query: 'open-icon',
    }),
  ],
});

import searchIcon from 'open-icon-svg/icons/ui/icon_search-m.svg?open-icon';

Pair it with

• open-icon-svg when you want typed icon selection plus package-based SVG imports
• open-icon-transform when you also need to reuse the same transform logic in non-Vite contexts