Feature: bundle KibaIcon icons at build time

.storybook/main.ts

@@ -1,6 +1,10 @@
+import { fileURLToPath } from 'node:url';
+
 import type { StorybookConfig } from '@storybook/react-vite';
 import remarkGfm from 'remark-gfm';
 
+import { kibaIconsPlugin } from '../src/vitePlugin/index.ts';
+
 const config: StorybookConfig = {
   framework: '@storybook/react-vite',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -23,6 +27,11 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
+  // NOTE(krishan711): the stories use the source files, so the icons are registered with the source registry
+  viteFinal: (viteConfig) => ({
+    ...viteConfig,
+    plugins: [...(viteConfig.plugins || []), kibaIconsPlugin({ registrationModule: fileURLToPath(new URL('../src/particles/kibaIcon/component.tsx', import.meta.url)) })],
+  }),
 };
 
 export default config;

CHANGELOG.md

@@ -8,9 +8,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 ## [Unreleased]
 
 ### Added
+- [MINOR] Added `@kibalabs/ui-react/vite-plugin` with `kibaIconsPlugin` to bundle the icons used with `KibaIcon` at build time, icon packages (`ionicons`, `@material-design-icons/svg`, `bootstrap-icons`, `feather-icons`, `remixicon`) are optional peer dependencies
+- [MINOR] Added `kibaFontsPlugin` to `@kibalabs/ui-react/vite-plugin` to self-host the Google Fonts an app imports, downloading them at build time and preloading the main file of each family
+- [MINOR] Added `registerKibaIcons` to register svgs that `KibaIcon` renders without fetching
+- [MINOR] Added icon id props for the icons components show by default, so apps can use any icon set: `previousIconId`/`nextIconId` on `Carousel`, `expandIconId`/`collapseIconId` on `CollapsibleBox` and `TitledCollapsibleBox`, `selectedIconId` on `SelectableView`, `closeIconId` on `MessageDialog` and `iconId` on `Dropzone`
 - [MAJOR] Added `@kibalabs/ui-react/toast` (all of `@kibalabs/ui-react-toast`) and `@kibalabs/ui-react/dropzone` (all of `@kibalabs/ui-react-dropzone`) with their styles, `react-hot-toast` and `react-dropzone` are optional peer dependencies
 
 ### Changed
+- [MINOR] Changed `KibaIcon` to fetch each icon once per page (shared between instances), retry once and ignore responses for a previous `iconId`
+- [MINOR] Changed `AppDownloadButton` to use bundled badges (loaded lazily) instead of `assets-cdn.kiba.dev`
+- [PATCH] Changed `Carousel` to use ionicons chevrons
 - [MAJOR] Use `@kibalabs/core/react` instead of `@kibalabs/core-react`, `react-router` is now a peer dependency
 - [MINOR] Correction for using `childSizeResponsive.base` size in `EqualGrid`
 - [MINOR] Fix `Box` and `Stack` to not inherit sizing props from parent when not intended

README.md

@@ -46,6 +46,36 @@ Use `@kibalabs/ui-react/styles.css` instead if you don't use scss.
 
 Toast and dropzone styles only hold their own rules, so use them on top of the main styles.
 
+## Icons
+
+`KibaIcon` shows icons by id (`ion-home`, `mui-home`, `bs-house`, `feather-home`, `remix-home-line`). To bundle the ones you use at build time, install the icon packages you need (optional peer dependencies: `ionicons`, `@material-design-icons/svg`, `bootstrap-icons`, `feather-icons`, `remixicon`) and add the vite plugin:
+
+```js
+// config.build.js
+import { kibaIconsPlugin } from '@kibalabs/ui-react/vite-plugin';
+
+export default (config) => {
+  const newConfig = config;
+  newConfig.viteConfigModifier = (viteConfig) => {
+    viteConfig.plugins.push(kibaIconsPlugin());
+    return viteConfig;
+  };
+  return newConfig;
+};
+```
+
+It scans `src` (and ui-react) for quoted icon ids and registers their svgs before your app starts. Anything it can't see (e.g. `` `ion-${name}` ``) is fetched from `assets-cdn.kiba.dev` at runtime as before.
+
+## Fonts
+
+Keep loading Google Fonts the usual way (`@import url('https://fonts.googleapis.com/css2?family=...&display=swap');` in your css/scss, or a `<link>` in `index.html`) and add `kibaFontsPlugin()` (from the same `@kibalabs/ui-react/vite-plugin`) to self-host them:
+
+```js
+viteConfig.plugins.push(kibaFontsPlugin());
+```
+
+At build time it downloads the stylesheet and its font files, emits them as hashed assets, replaces the `@import` with the `@font-face` rules and preloads the latin, normal style file of each family the page's css uses. Downloads are cached in `node_modules/.cache/kiba-fonts`. If they fail (e.g. offline) the `@import` is left as it is with a warning. In dev the fonts still load from Google.
+
 ## Theming
 
 - **Variables:** everything is themed with CSS variables named `--kiba-{category}-{name}` (e.g. `--kiba-color-brand-primary`, `--kiba-padding`). Each color also gets `-light10/25`, `-dark10/25` and `-clear25/50/75` variants.

config.build.js

@@ -4,6 +4,8 @@ export default (config) => {
     index: './src/index.ts',
     'toast/index': './src/toast/index.ts',
     'dropzone/index': './src/dropzone/index.ts',
+    // NOTE(krishan711): runs in node (inside vite) so it must not share code with the browser entries
+    'vitePlugin/index': './src/vitePlugin/index.ts',
   };
   return newConfig;
 };