@i316/heroicons-vue 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,64 @@
+This package contains two kinds of material, under different licenses.
+
+1. ICON DESIGNS
+
+The icon artwork (the svg/ files, and the shape data inside every generated
+component) is Heroicons by Tailwind Labs,
+https://github.com/tailwindlabs/heroicons, licensed under MIT.
+
+Changes made for i316:
+  - 24px outline and solid sets only, recolored to currentColor and reformatted
+  - converted into React, React Native, Vue, Angular and web-component formats
+
+The upstream license/notice follows verbatim.
+
+------------------------------------------------------------------------
+MIT License
+
+Copyright (c) Tailwind Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+------------------------------------------------------------------------
+
+2. i316 CODE
+
+Everything else (component runtime, generated module code, web component,
+Babel plugin) is licensed under the MIT License:
+
+MIT License
+
+Copyright (c) 2026 rahil316
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,93 @@
-# Temporary Holding Version
+# @i316/heroicons-vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+i316: Heroicons icons as Vue 3 components. 324 icons in 2 styles: `outline` (default), `solid`.
+
+Other i316 Heroicons packages: `@i316/heroicons-react` (React web), `@i316/heroicons-react-native` (React Native), `@i316/heroicons-angular` (Angular) and `@i316/heroicons-web` (plain HTML web component and raw SVGs).
+
+```sh
+npm install @i316/heroicons-vue
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+// One style: every icon is exported as both `Bell` and `BellIcon`.
+import { ChevronDown, BellIcon } from '@i316/heroicons-vue/outline';
+// Any style from the root: <Name><Style>Icon, or <Name>Icon to switch style at runtime.
+import { BellSolidIcon, HomeIcon } from '@i316/heroicons-vue';
+</script>
+
+<template>
+  <ChevronDown :size="20" color="#e11d48" />
+  <BellSolidIcon class="text-slate-500" title="Notifications" />
+  <HomeIcon :variant="isActive ? 'solid' : 'outline'" />
+</template>
+```
+
+Works with server-side rendering (Nuxt, `@vue/server-renderer`). `class`, `style`, listeners and other attributes fall through to the root `<svg>`.
+
+### Defaults for a subtree
+
+```vue
+<script setup lang="ts">
+import { HeroIconProvider } from '@i316/heroicons-vue';
+</script>
+
+<template>
+  <HeroIconProvider :size="20" :stroke-width="2" class-name="shrink-0">
+    <RouterView />
+  </HeroIconProvider>
+</template>
+```
+
+Props on an icon override the provider. Nested providers override their parent's values.
+
+### Icons chosen at runtime
+
+```vue
+<script setup lang="ts">
+import { DynamicIcon } from '@i316/heroicons-vue/dynamic';
+</script>
+
+<template>
+  <DynamicIcon :name="item.icon" variant="solid">
+    <template #fallback><Spinner /></template>
+  </DynamicIcon>
+</template>
+```
+
+Each icon is loaded as its own chunk the first time it renders. This is opt-in: only apps that import `/dynamic` pay for its map of every icon name.
+
+## Tree-shaking
+
+Every icon is its own module and the package is `sideEffects`-free, so Vite, webpack and Nuxt production builds ship only the icons you import. For unbundled toolchains (Jest, webpack in development), add the bundled Babel plugin, which rewrites barrel imports into per-icon imports:
+
+```js
+// babel.config.js
+module.exports = { plugins: ['@i316/heroicons-vue/babel'] };
+```
+
+## Props
+
+| Prop | Default | |
+|---|---|---|
+| `size` | `24` | width and height |
+| `color` | `currentColor` | icon color |
+| `strokeWidth` | `1.5` | `outline` only; ignored by the other styles |
+| `title` | none | accessible name (see below) |
+| `variant` | `outline` | `<Name>Icon` and `DynamicIcon` only: which style to render |
+
+**Accessibility:** icons are decorative by default (`aria-hidden="true"`). Pass `title` to make one meaningful: it renders a `<title>` with `role="img"`. Passing your own `aria-label` or `role` also removes `aria-hidden`.
+
+**Styling:** every icon has the classes `hero-icon hero-icon-<name>` (e.g. `hero-icon-chevron-down`).
+
+**Editor previews:** hovering an imported icon in VS Code shows a picture of it.
+
+ESM only, with TypeScript declarations. Peer dependency: `vue >= 3.2`.
+
+## License
+
+Icons: Heroicons by Tailwind Labs (https://github.com/tailwindlabs/heroicons), licensed under [MIT](https://github.com/tailwindlabs/heroicons/blob/master/LICENSE). i316 modified them: 24px outline and solid sets only, recolored to currentColor and reformatted; converted into React, React Native, Vue, Angular and web-component formats.
+
+i316 code (components, runtime, tooling): MIT, © 2026 rahil316. See `LICENSE` for both licenses in full.

package/_runtime/babel-map.json

@@ -0,0 +1 @@
+{"package":"@i316/heroicons-vue","provider":"HeroIconProvider","styles":[{"slug":"outline","pascal":"Outline"},{"slug":"solid","pascal":"Solid"}],"icons":{"AcademicCap":["academic-cap",3],"AdjustmentsHorizontal":["adjustments-horizontal",3],"AdjustmentsVertical":["adjustments-vertical",3],"ArchiveBox":["archive-box",3],"ArchiveBoxArrowDown":["archive-box-arrow-down",3],"ArchiveBoxXMark":["archive-box-x-mark",3],"ArrowDown":["arrow-down",3],"ArrowDownCircle":["arrow-down-circle",3],"ArrowDownLeft":["arrow-down-left",3],"ArrowDownOnSquare":["arrow-down-on-square",3],"ArrowDownOnSquareStack":["arrow-down-on-square-stack",3],"ArrowDownRight":["arrow-down-right",3],"ArrowDownTray":["arrow-down-tray",3],"ArrowLeft":["arrow-left",3],"ArrowLeftCircle":["arrow-left-circle",3],"ArrowLeftEndOnRectangle":["arrow-left-end-on-rectangle",3],"ArrowLeftOnRectangle":["arrow-left-on-rectangle",3],"ArrowLeftStartOnRectangle":["arrow-left-start-on-rectangle",3],"ArrowLongDown":["arrow-long-down",3],"ArrowLongLeft":["arrow-long-left",3],"ArrowLongRight":["arrow-long-right",3],"ArrowLongUp":["arrow-long-up",3],"ArrowPath":["arrow-path",3],"ArrowPathRoundedSquare":["arrow-path-rounded-square",3],"ArrowRight":["arrow-right",3],"ArrowRightCircle":["arrow-right-circle",3],"ArrowRightEndOnRectangle":["arrow-right-end-on-rectangle",3],"ArrowRightOnRectangle":["arrow-right-on-rectangle",3],"ArrowRightStartOnRectangle":["arrow-right-start-on-rectangle",3],"ArrowSmallDown":["arrow-small-down",3],"ArrowSmallLeft":["arrow-small-left",3],"ArrowSmallRight":["arrow-small-right",3],"ArrowSmallUp":["arrow-small-up",3],"ArrowTopRightOnSquare":["arrow-top-right-on-square",3],"ArrowTrendingDown":["arrow-trending-down",3],"ArrowTrendingUp":["arrow-trending-up",3],"ArrowTurnDownLeft":["arrow-turn-down-left",3],"ArrowTurnDownRight":["arrow-turn-down-right",3],"ArrowTurnLeftDown":["arrow-turn-left-down",3],"ArrowTurnLeftUp":["arrow-turn-left-up",3],"ArrowTurnRightDown":["arrow-turn-right-down",3],"ArrowTurnRightUp":["arrow-turn-right-up",3],"ArrowTurnUpLeft":["arrow-turn-up-left",3],"ArrowTurnUpRight":["arrow-turn-up-right",3],"ArrowUp":["arrow-up",3],"ArrowUpCircle":["arrow-up-circle",3],"ArrowUpLeft":["arrow-up-left",3],"ArrowUpOnSquare":["arrow-up-on-square",3],"ArrowUpOnSquareStack":["arrow-up-on-square-stack",3],"ArrowUpRight":["arrow-up-right",3],"ArrowUpTray":["arrow-up-tray",3],"ArrowUturnDown":["arrow-uturn-down",3],"ArrowUturnLeft":["arrow-uturn-left",3],"ArrowUturnRight":["arrow-uturn-right",3],"ArrowUturnUp":["arrow-uturn-up",3],"ArrowsPointingIn":["arrows-pointing-in",3],"ArrowsPointingOut":["arrows-pointing-out",3],"ArrowsRightLeft":["arrows-right-left",3],"ArrowsUpDown":["arrows-up-down",3],"AtSymbol":["at-symbol",3],"Backspace":["backspace",3],"Backward":["backward",3],"Banknotes":["banknotes",3],"Bars2":["bars-2",3],"Bars3":["bars-3",3],"Bars3BottomLeft":["bars-3-bottom-left",3],"Bars3BottomRight":["bars-3-bottom-right",3],"Bars3CenterLeft":["bars-3-center-left",3],"Bars4":["bars-4",3],"BarsArrowDown":["bars-arrow-down",3],"BarsArrowUp":["bars-arrow-up",3],"Battery0":["battery-0",3],"Battery100":["battery-100",3],"Battery50":["battery-50",3],"Beaker":["beaker",3],"Bell":["bell",3],"BellAlert":["bell-alert",3],"BellSlash":["bell-slash",3],"BellSnooze":["bell-snooze",3],"Bold":["bold",3],"Bolt":["bolt",3],"BoltSlash":["bolt-slash",3],"BookOpen":["book-open",3],"Bookmark":["bookmark",3],"BookmarkSlash":["bookmark-slash",3],"BookmarkSquare":["bookmark-square",3],"Briefcase":["briefcase",3],"BugAnt":["bug-ant",3],"BuildingLibrary":["building-library",3],"BuildingOffice":["building-office",3],"BuildingOffice2":["building-office-2",3],"BuildingStorefront":["building-storefront",3],"Cake":["cake",3],"Calculator":["calculator",3],"Calendar":["calendar",3],"CalendarDateRange":["calendar-date-range",3],"CalendarDays":["calendar-days",3],"Camera":["camera",3],"ChartBar":["chart-bar",3],"ChartBarSquare":["chart-bar-square",3],"ChartPie":["chart-pie",3],"ChatBubbleBottomCenter":["chat-bubble-bottom-center",3],"ChatBubbleBottomCenterText":["chat-bubble-bottom-center-text",3],"ChatBubbleLeft":["chat-bubble-left",3],"ChatBubbleLeftEllipsis":["chat-bubble-left-ellipsis",3],"ChatBubbleLeftRight":["chat-bubble-left-right",3],"ChatBubbleOvalLeft":["chat-bubble-oval-left",3],"ChatBubbleOvalLeftEllipsis":["chat-bubble-oval-left-ellipsis",3],"Check":["check",3],"CheckBadge":["check-badge",3],"CheckCircle":["check-circle",3],"ChevronDoubleDown":["chevron-double-down",3],"ChevronDoubleLeft":["chevron-double-left",3],"ChevronDoubleRight":["chevron-double-right",3],"ChevronDoubleUp":["chevron-double-up",3],"ChevronDown":["chevron-down",3],"ChevronLeft":["chevron-left",3],"ChevronRight":["chevron-right",3],"ChevronUp":["chevron-up",3],"ChevronUpDown":["chevron-up-down",3],"CircleStack":["circle-stack",3],"Clipboard":["clipboard",3],"ClipboardDocument":["clipboard-document",3],"ClipboardDocumentCheck":["clipboard-document-check",3],"ClipboardDocumentList":["clipboard-document-list",3],"Clock":["clock",3],"Cloud":["cloud",3],"CloudArrowDown":["cloud-arrow-down",3],"CloudArrowUp":["cloud-arrow-up",3],"CodeBracket":["code-bracket",3],"CodeBracketSquare":["code-bracket-square",3],"Cog":["cog",3],"Cog6Tooth":["cog-6-tooth",3],"Cog8Tooth":["cog-8-tooth",3],"CommandLine":["command-line",3],"ComputerDesktop":["computer-desktop",3],"CpuChip":["cpu-chip",3],"CreditCard":["credit-card",3],"Cube":["cube",3],"CubeTransparent":["cube-transparent",3],"CurrencyBangladeshi":["currency-bangladeshi",3],"CurrencyDollar":["currency-dollar",3],"CurrencyEuro":["currency-euro",3],"CurrencyPound":["currency-pound",3],"CurrencyRupee":["currency-rupee",3],"CurrencyYen":["currency-yen",3],"CursorArrowRays":["cursor-arrow-rays",3],"CursorArrowRipple":["cursor-arrow-ripple",3],"DevicePhoneMobile":["device-phone-mobile",3],"DeviceTablet":["device-tablet",3],"Divide":["divide",3],"Document":["document",3],"DocumentArrowDown":["document-arrow-down",3],"DocumentArrowUp":["document-arrow-up",3],"DocumentChartBar":["document-chart-bar",3],"DocumentCheck":["document-check",3],"DocumentCurrencyBangladeshi":["document-currency-bangladeshi",3],"DocumentCurrencyDollar":["document-currency-dollar",3],"DocumentCurrencyEuro":["document-currency-euro",3],"DocumentCurrencyPound":["document-currency-pound",3],"DocumentCurrencyRupee":["document-currency-rupee",3],"DocumentCurrencyYen":["document-currency-yen",3],"DocumentDuplicate":["document-duplicate",3],"DocumentMagnifyingGlass":["document-magnifying-glass",3],"DocumentMinus":["document-minus",3],"DocumentPlus":["document-plus",3],"DocumentText":["document-text",3],"EllipsisHorizontal":["ellipsis-horizontal",3],"EllipsisHorizontalCircle":["ellipsis-horizontal-circle",3],"EllipsisVertical":["ellipsis-vertical",3],"Envelope":["envelope",3],"EnvelopeOpen":["envelope-open",3],"Equals":["equals",3],"ExclamationCircle":["exclamation-circle",3],"ExclamationTriangle":["exclamation-triangle",3],"Eye":["eye",3],"EyeDropper":["eye-dropper",3],"EyeSlash":["eye-slash",3],"FaceFrown":["face-frown",3],"FaceSmile":["face-smile",3],"Film":["film",3],"FingerPrint":["finger-print",3],"Fire":["fire",3],"Flag":["flag",3],"Folder":["folder",3],"FolderArrowDown":["folder-arrow-down",3],"FolderMinus":["folder-minus",3],"FolderOpen":["folder-open",3],"FolderPlus":["folder-plus",3],"Forward":["forward",3],"Funnel":["funnel",3],"Gif":["gif",3],"Gift":["gift",3],"GiftTop":["gift-top",3],"GlobeAlt":["globe-alt",3],"GlobeAmericas":["globe-americas",3],"GlobeAsiaAustralia":["globe-asia-australia",3],"GlobeEuropeAfrica":["globe-europe-africa",3],"H1":["h1",3],"H2":["h2",3],"H3":["h3",3],"HandRaised":["hand-raised",3],"HandThumbDown":["hand-thumb-down",3],"HandThumbUp":["hand-thumb-up",3],"Hashtag":["hashtag",3],"Heart":["heart",3],"Home":["home",3],"HomeModern":["home-modern",3],"Identification":["identification",3],"Inbox":["inbox",3],"InboxArrowDown":["inbox-arrow-down",3],"InboxStack":["inbox-stack",3],"InformationCircle":["information-circle",3],"Italic":["italic",3],"Key":["key",3],"Language":["language",3],"Lifebuoy":["lifebuoy",3],"LightBulb":["light-bulb",3],"Link":["link",3],"LinkSlash":["link-slash",3],"ListBullet":["list-bullet",3],"LockClosed":["lock-closed",3],"LockOpen":["lock-open",3],"MagnifyingGlass":["magnifying-glass",3],"MagnifyingGlassCircle":["magnifying-glass-circle",3],"MagnifyingGlassMinus":["magnifying-glass-minus",3],"MagnifyingGlassPlus":["magnifying-glass-plus",3],"Map":["map",3],"MapPin":["map-pin",3],"Megaphone":["megaphone",3],"Microphone":["microphone",3],"Minus":["minus",3],"MinusCircle":["minus-circle",3],"MinusSmall":["minus-small",3],"Moon":["moon",3],"MusicalNote":["musical-note",3],"Newspaper":["newspaper",3],"NoSymbol":["no-symbol",3],"NumberedList":["numbered-list",3],"PaintBrush":["paint-brush",3],"PaperAirplane":["paper-airplane",3],"PaperClip":["paper-clip",3],"Pause":["pause",3],"PauseCircle":["pause-circle",3],"Pencil":["pencil",3],"PencilSquare":["pencil-square",3],"PercentBadge":["percent-badge",3],"Phone":["phone",3],"PhoneArrowDownLeft":["phone-arrow-down-left",3],"PhoneArrowUpRight":["phone-arrow-up-right",3],"PhoneXMark":["phone-x-mark",3],"Photo":["photo",3],"Play":["play",3],"PlayCircle":["play-circle",3],"PlayPause":["play-pause",3],"Plus":["plus",3],"PlusCircle":["plus-circle",3],"PlusSmall":["plus-small",3],"Power":["power",3],"PresentationChartBar":["presentation-chart-bar",3],"PresentationChartLine":["presentation-chart-line",3],"Printer":["printer",3],"PuzzlePiece":["puzzle-piece",3],"QrCode":["qr-code",3],"QuestionMarkCircle":["question-mark-circle",3],"QueueList":["queue-list",3],"Radio":["radio",3],"ReceiptPercent":["receipt-percent",3],"ReceiptRefund":["receipt-refund",3],"RectangleGroup":["rectangle-group",3],"RectangleStack":["rectangle-stack",3],"RocketLaunch":["rocket-launch",3],"Rss":["rss",3],"Scale":["scale",3],"Scissors":["scissors",3],"Server":["server",3],"ServerStack":["server-stack",3],"Share":["share",3],"ShieldCheck":["shield-check",3],"ShieldExclamation":["shield-exclamation",3],"ShoppingBag":["shopping-bag",3],"ShoppingCart":["shopping-cart",3],"Signal":["signal",3],"SignalSlash":["signal-slash",3],"Slash":["slash",3],"Sparkles":["sparkles",3],"SpeakerWave":["speaker-wave",3],"SpeakerXMark":["speaker-x-mark",3],"Square2Stack":["square-2-stack",3],"Square3Stack3d":["square-3-stack-3d",3],"Squares2x2":["squares-2x2",3],"SquaresPlus":["squares-plus",3],"Star":["star",3],"Stop":["stop",3],"StopCircle":["stop-circle",3],"Strikethrough":["strikethrough",3],"Sun":["sun",3],"Swatch":["swatch",3],"TableCells":["table-cells",3],"Tag":["tag",3],"Ticket":["ticket",3],"Trash":["trash",3],"Trophy":["trophy",3],"Truck":["truck",3],"Tv":["tv",3],"Underline":["underline",3],"User":["user",3],"UserCircle":["user-circle",3],"UserGroup":["user-group",3],"UserMinus":["user-minus",3],"UserPlus":["user-plus",3],"Users":["users",3],"Variable":["variable",3],"VideoCamera":["video-camera",3],"VideoCameraSlash":["video-camera-slash",3],"ViewColumns":["view-columns",3],"ViewfinderCircle":["viewfinder-circle",3],"Wallet":["wallet",3],"Wifi":["wifi",3],"Window":["window",3],"Wrench":["wrench",3],"WrenchScrewdriver":["wrench-screwdriver",3],"XCircle":["x-circle",3],"XMark":["x-mark",3]}}

package/_runtime/babel-plugin.cjs

@@ -0,0 +1,99 @@
+"use strict";
+// Babel plugin shipped inside every i316 React / React Native package
+// (copied as _runtime/babel-plugin.cjs, exported as `<package>/babel`).
+// Rewrites named imports from the package's barrels into per-icon deep
+// imports, so toolchains that don't tree-shake -- Metro, Jest, webpack in
+// development -- only load the icons a file actually uses:
+//
+//   import { Bell, HomeIcon } from '<pkg>/linear'
+//   -> import Bell from '<pkg>/linear/bell'; import HomeIcon from '<pkg>/linear/home';
+//
+// Anything it can't map (type-only imports, namespace/default imports, unknown
+// names) stays on the original import declaration, untouched.
+//
+// CommonJS on purpose: Metro loads Babel plugins synchronously, which rules
+// out ESM plugins.
+
+// { package, provider, styles: [{ slug, pascal }], icons: { Component: [file, styleMask] } }
+const map = require("./babel-map.json");
+
+function iconFor(component, styleIndex) {
+  const entry = map.icons[component];
+  return entry && entry[1] & (1 << styleIndex) ? entry[0] : null;
+}
+
+/** Import from a style barrel, e.g. '<pkg>/linear': exports `Bell` and `BellIcon`. */
+function resolveStyleImport(styleIndex, name) {
+  const slug = map.styles[styleIndex].slug;
+  for (const component of [name, name.endsWith("Icon") ? name.slice(0, -4) : null]) {
+    const file = component && iconFor(component, styleIndex);
+    if (file) return { source: `${map.package}/${slug}/${file}` };
+  }
+  return null;
+}
+
+/** Import from the package root: `<Name>Icon` (style switch), `<Name><Style>Icon`, or the provider. */
+function resolveRootImport(name) {
+  if (name === map.provider) return { source: `${map.package}/provider`, named: name };
+  if (!name.endsWith("Icon")) return null;
+  const base = name.slice(0, -4);
+  const candidates = [];
+  if (map.icons[base]) candidates.push({ source: `${map.package}/variants/${map.icons[base][0]}` });
+  map.styles.forEach(({ slug, pascal }, styleIndex) => {
+    if (!base.endsWith(pascal)) return;
+    const file = iconFor(base.slice(0, -pascal.length), styleIndex);
+    if (file) candidates.push({ source: `${map.package}/${slug}/${file}` });
+  });
+  // The generator guarantees root export names are unique, so >1 means a stale map: leave it alone.
+  return candidates.length === 1 ? candidates[0] : null;
+}
+
+module.exports = function i316Imports({ types: t }) {
+  return {
+    name: `${map.package}/babel`,
+    visitor: {
+      ImportDeclaration(path) {
+        const { node } = path;
+        if (node.importKind === "type") return;
+        const source = node.source.value;
+
+        let resolve;
+        if (source === map.package) {
+          resolve = resolveRootImport;
+        } else if (source.startsWith(`${map.package}/`)) {
+          const styleIndex = map.styles.findIndex((s) => s.slug === source.slice(map.package.length + 1));
+          if (styleIndex === -1) return;
+          resolve = (name) => resolveStyleImport(styleIndex, name);
+        } else {
+          return;
+        }
+
+        const kept = [];
+        const rewritten = [];
+        for (const specifier of node.specifiers) {
+          if (!t.isImportSpecifier(specifier) || specifier.importKind === "type") {
+            kept.push(specifier);
+            continue;
+          }
+          const imported = t.isIdentifier(specifier.imported) ? specifier.imported.name : specifier.imported.value;
+          const target = resolve(imported);
+          if (!target) {
+            kept.push(specifier);
+            continue;
+          }
+          const local = t.identifier(specifier.local.name);
+          const newSpecifier = target.named ? t.importSpecifier(local, t.identifier(target.named)) : t.importDefaultSpecifier(local);
+          rewritten.push(t.importDeclaration([newSpecifier], t.stringLiteral(target.source)));
+        }
+
+        if (rewritten.length === 0) return;
+        if (kept.length > 0) {
+          node.specifiers = kept;
+          path.insertAfter(rewritten);
+        } else {
+          path.replaceWithMultiple(rewritten);
+        }
+      },
+    },
+  };
+};

package/_runtime/vue.d.ts

@@ -0,0 +1,54 @@
+import type { DefineComponent } from 'vue';
+
+export interface IconProps {
+  /** Width and height. Default 24, or the nearest IconProvider's `size`. */
+  size?: number | string;
+  /** Replaces the icon's theme color. Default `currentColor`. */
+  color?: string;
+  /** Overrides the stroke width on stroke-based styles; ignored on fill-based styles. */
+  strokeWidth?: number | string;
+  /** Color of the translucent layer on duotone styles; ignored elsewhere. Defaults to `color`. */
+  secondaryColor?: string;
+  /** Opacity of the translucent layer on duotone styles; ignored elsewhere. */
+  secondaryOpacity?: number | string;
+  /** Accessible name. Renders a `<title>` and `role="img"`; without it (or an aria-label) the icon is `aria-hidden`. */
+  title?: string;
+}
+
+export type IconComponent = DefineComponent<IconProps>;
+
+export type VariantIconComponent<Variant extends string> = DefineComponent<IconProps & { /** Which style to render. */ variant?: Variant }>;
+
+export interface IconDefaults {
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number | string;
+  secondaryColor?: string;
+  secondaryOpacity?: number | string;
+  /** Added to every icon's class list. */
+  className?: string;
+}
+
+/** Sets default props for every icon below it. Nested providers override their parent's values. */
+export declare const IconProvider: DefineComponent<IconDefaults>;
+
+export type IconNode = [tag: string, attrs: Record<string, string>, children?: IconNode[]];
+
+export interface IconData {
+  displayName: string;
+  className: string;
+  stroke: boolean;
+  duotone: boolean;
+  attrs: Record<string, string>;
+  nodes: IconNode[];
+}
+
+export declare function createIcon(iconData: IconData): IconComponent;
+
+export declare function createVariantIcon<Variant extends string>(
+  displayName: string,
+  variants: Record<Variant, IconComponent>,
+  defaultVariant: Variant,
+): VariantIconComponent<Variant>;
+
+export declare function createDynamicIcon(importers: Record<string, () => Promise<{ default: IconComponent }>>): DefineComponent<{ name: string }>;

package/_runtime/vue.js

@@ -0,0 +1,145 @@
+// Shared Vue 3 runtime copied into every generated Vue icon package as
+// _runtime/vue.js. Same icon data as the other targets, except attribute names
+// stay exactly as in the source SVG (`stroke-width`, `viewBox`): Vue writes SVG
+// attributes literally, so React-style camelCase names would be ignored.
+import { computed, defineComponent, h, inject, provide, ref, watchEffect } from "vue";
+
+const DEFAULTS_KEY = Symbol("i316-defaults");
+
+const iconProps = {
+  size: [Number, String],
+  color: String,
+  strokeWidth: [Number, String],
+  secondaryColor: String,
+  secondaryOpacity: [Number, String],
+  title: String,
+};
+
+export const IconProvider = defineComponent({
+  name: "IconProvider",
+  props: { ...iconProps, className: String },
+  setup(props, { slots }) {
+    const parent = inject(DEFAULTS_KEY, null);
+    provide(
+      DEFAULTS_KEY,
+      computed(() => {
+        const merged = { ...(parent?.value ?? {}) };
+        for (const key in props) if (props[key] != null && key !== "title") merged[key] = props[key];
+        return merged;
+      }),
+    );
+    return () => slots.default?.();
+  },
+});
+
+function hasA11yAttr(attrs) {
+  for (const key in attrs) if (key.startsWith("aria-") || key === "role") return true;
+  return false;
+}
+
+// `inSecondary`: an ancestor is the translucent layer (e.g. <g opacity="0.5"> wrapping paths).
+function resolveAttrs(attrs, paint, inSecondary = false) {
+  const out = {};
+  const isSecondary = Boolean(paint.secondary) && (inSecondary || attrs.opacity != null);
+  for (const key in attrs) {
+    const value = attrs[key];
+    if ((key === "fill" || key === "stroke") && value === "currentColor") {
+      out[key] = isSecondary ? (paint.secondary.color ?? paint.color) : paint.color;
+    } else if (key === "stroke-width" && paint.strokeWidth != null) out[key] = paint.strokeWidth;
+    else if (key === "opacity" && isSecondary && paint.secondary.opacity != null) out[key] = paint.secondary.opacity;
+    else out[key] = value;
+  }
+  return out;
+}
+
+function renderNode([tag, attrs, children], paint, inSecondary = false) {
+  const secondaryHere = Boolean(paint.secondary) && (inSecondary || attrs.opacity != null);
+  const childNodes = children ? children.map((child) => renderNode(child, paint, secondaryHere)) : undefined;
+  return h(tag, resolveAttrs(attrs, paint, inSecondary), childNodes);
+}
+
+export function createIcon(iconData) {
+  return defineComponent({
+    name: iconData.displayName,
+    props: iconProps,
+    setup(props, { attrs, slots }) {
+      const defaults = inject(DEFAULTS_KEY, null);
+      return () => {
+        const d = defaults?.value ?? {};
+        const paint = {
+          color: props.color ?? d.color ?? "currentColor",
+          strokeWidth: iconData.stroke ? (props.strokeWidth ?? d.strokeWidth) : undefined,
+          secondary: iconData.duotone
+            ? { color: props.secondaryColor ?? d.secondaryColor, opacity: props.secondaryOpacity ?? d.secondaryOpacity }
+            : null,
+        };
+        const size = props.size ?? d.size ?? 24;
+        const slotContent = slots.default?.();
+        const labelled = props.title != null || slotContent != null || hasA11yAttr(attrs);
+        // Fallthrough attrs (class, style, listeners, aria-*) are merged onto the root by Vue.
+        return h(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: size,
+            height: size,
+            ...resolveAttrs(iconData.attrs, paint),
+            class: [iconData.className, d.className],
+            ...(labelled ? {} : { "aria-hidden": "true" }),
+            ...(props.title != null ? { role: "img" } : {}),
+          },
+          [props.title != null ? h("title", props.title) : null, ...iconData.nodes.map((node) => renderNode(node, paint)), slotContent],
+        );
+      };
+    },
+  });
+}
+
+export function createVariantIcon(displayName, variants, defaultVariant) {
+  return defineComponent({
+    name: displayName,
+    inheritAttrs: false,
+    props: { variant: { type: String, default: defaultVariant } },
+    setup(props, { attrs, slots }) {
+      return () => {
+        let Variant = variants[props.variant];
+        if (!Variant) {
+          console.error(`${displayName}: unknown variant "${props.variant}", rendering "${defaultVariant}"`);
+          Variant = variants[defaultVariant];
+        }
+        return h(Variant, attrs, slots);
+      };
+    },
+  });
+}
+
+/** By-name icon for data-driven UIs; each icon is a lazy import() chunk. Renders the `fallback` slot while loading. */
+export function createDynamicIcon(importers) {
+  const loaded = new Map();
+  return defineComponent({
+    name: "DynamicIcon",
+    inheritAttrs: false,
+    props: { name: { type: String, required: true } },
+    setup(props, { attrs, slots }) {
+      const version = ref(0);
+      watchEffect(() => {
+        const name = props.name;
+        if (loaded.has(name)) return;
+        const load = importers[name];
+        if (!load) {
+          console.error(`DynamicIcon: unknown icon "${name}"`);
+          return;
+        }
+        load().then((module) => {
+          loaded.set(name, module.default);
+          version.value += 1;
+        });
+      });
+      return () => {
+        void version.value;
+        const Icon = loaded.get(props.name);
+        return Icon ? h(Icon, attrs, slots) : (slots.fallback?.() ?? null);
+      };
+    },
+  });
+}