@xy-planning-network/trees 0.13.7 → 0.13.8-dev-1

package/README.md

@@ -122,6 +122,51 @@ module.exports = {
 }
 ```
 
+### Icons - Heroicons v2
+
+This project ships with [Heroicons v2](https://heroicons.com/). This version of Heroicons packages the icons into 4 different import paths for optimized icon sizing. In order to keep the DX simpler we've chosen to consolidate these import paths into 2 paths that are consistent with the v1 paths. To accomplish this, you'll need to add a `heroicons.d.ts` file and add path aliases in `tsconfig.json` and vite.config.mts`.
+
+Using the full import paths like `import { XIcon } from @heroicons/vue/16/solid;` continues to be available as needed.
+
+```ts
+// src/heroicons.d.ts
+
+declare module "@heroicons/vue/outline" {
+  export * from "@heroicons/vue/24/outline"
+}
+
+declare module "@heroicons/vue/solid" {
+  export * from "@heroicons/vue/24/solid"
+}
+```
+
+```ts
+// tsconfig.json
+
+...
+"paths": {
+  ...
+  "@heroicons/vue/outline": ["node_modules/@heroicons/vue/24/outline"],
+  "@heroicons/vue/solid": ["node_modules/@heroicons/vue/24/solid"]
+},
+...
+```
+
+```ts
+// vite.config.mts
+
+...
+resolve: {
+  alias: {
+    ...
+    // Intercept v1-style imports and route them to the v2 24px files.
+    "@heroicons/vue/outline": "@heroicons/vue/24/outline",
+    "@heroicons/vue/solid": "@heroicons/vue/24/solid",
+  },
+},
+...
+```
+
 ### JavaScript - Only What You Need
 
 This is the best option when tree shaking and final bundle size is important to you.