@robosophy/ui-vue 1.0.17 → 1.1.0

package/README.md

@@ -145,7 +145,8 @@ createApp(App)
 
 ## Material Symbols
 
-`RsIcon` usa Material Symbols y debe combinarse con el plugin de Vite para generar fuentes locales optimizadas:
+`RsIcon` renderiza iconos SVG inline. Combinalo con el plugin de Vite que descarga solo los SVGs
+necesarios desde el repositorio oficial de Google y genera un sprite inyectado en el HTML:
 
 ```ts
 // vite.config.ts
@@ -163,9 +164,10 @@ export default defineConfig({
 
 El plugin escanea automaticamente usos de `<RsIcon name="..." />`, `rsPrimeIcon("...")` y
 objetos con `icon: "..."` en el codigo fuente. No hace falta declarar iconos a mano.
-En build emite fuentes locales subseteadas por familia, preload de esas fuentes y
-`font-display: block` para evitar que se vea brevemente el texto del ligature antes
-de que cargue el icono.
+En build descarga los SVGs del CDN de GitHub, los cachea localmente y genera un sprite SVG
+inline. No se cargan fuentes tipograficas.
+
+El sprite incluye variantes para fill (outlined/filled) y grade (-25, 0, 200).
 
 ### Iconos dinamicos (opcional)
 
@@ -181,29 +183,7 @@ robosophyMaterialSymbols({
 });
 ```
 
-### Directorio de salida
-
-Por defecto el plugin emite fuentes y CSS en `assets/`. Se puede cambiar con `outputDir`:
-
-```ts
-robosophyMaterialSymbols({
-  outputDir: "fonts",
-});
-```
-
-Esto produce `fonts/rs-material-symbols.css` y `fonts/rs-material-symbols-{family}-{hash}.woff2`
-en el build, y ajusta los hrefs del preload y del stylesheet en el HTML.
-
-### Estrategia de carga
-
-Se puede ajustar la estrategia de carga si una app lo necesita:
-
-```ts
-robosophyMaterialSymbols({
-  fontDisplay: "optional",
-  preload: false,
-});
-```
+### PrimeVue
 
 Para APIs de PrimeVue que reciben `icon` como string, usa el helper:
 
@@ -212,6 +192,16 @@ Para APIs de PrimeVue que reciben `icon` como string, usa el helper:
 <Button label="Configurar" :icon="rsPrimeIcon('settings', { family: 'rounded' })" />
 ```
 
+Para control total sobre props (fill, grade, etc.), usa el slot `#icon`:
+
+```vue
+<Button label="Favorito">
+  <template #icon>
+    <RsIcon name="favorite" fill color="danger" />
+  </template>
+</Button>
+```
+
 ## Component Structure
 
 Every public component must be self-contained:

package/ai-context.md

@@ -26,7 +26,7 @@ Use this package for shared Vue 3 UI components.
 - Use `@robosophy/tokens` CSS variables for colors, typography, strokes, and component surfaces.
 - Use PrimeVue only when it provides real behavior for that component; actions should use PrimeVue `Button` in PrimeVue apps.
 - `RsSidebar` and `RsAccountSelector` use native PrimeVue controls for interactive UI; PrimeVue apps should register the Robosophy PrimeVue preset and load `@robosophy/prime-theme/prime.css` so Button/Menu states receive Robosophy styling.
-- `RsIcon` needs `robosophyMaterialSymbols()` from `@robosophy/ui-vue/vite` in consuming Vite apps so builds ship local subset fonts. The plugin auto-detects icon usage from source — no manual declaration needed for static patterns. Use `rsPrimeIcon()` for PrimeVue APIs that accept icon class strings. Add dynamic icons via `include`.
+- `RsIcon` needs `robosophyMaterialSymbols()` from `@robosophy/ui-vue/vite` in consuming Vite apps so builds generate an SVG sprite with only the needed icons. The plugin auto-detects icon usage from source — no manual declaration needed for static patterns. Use `rsPrimeIcon()` for PrimeVue APIs that accept icon class strings. Add dynamic icons via `include`. For full control over icon props, use the `#icon` slot instead of `rsPrimeIcon()`.
 - Use `RsSidebar` for reusable module navigation. `item-click` stays in the consuming app; the optional `modules` dropdown can redirect with the provided `link` when `navigateOnModuleSelect` is `true`.
 - Keep props focused on stable component API. Use slots for flexible content.
 - Export every public component and public type from `src/index.ts`.

package/components.md

@@ -49,7 +49,7 @@ Apps without PrimeVue should import:
 import "@robosophy/tokens/tokens.css";
 ```
 
-Enable Material Symbols subsetting in Vite apps:
+RsIcon uses SVG icons inline. Enable the Vite plugin to auto-detect icons and generate an SVG sprite:
 
 ```ts
 import { robosophyMaterialSymbols } from "@robosophy/ui-vue/vite";
@@ -60,27 +60,14 @@ export default defineConfig({
 ```
 
 El plugin escanea automaticamente `<RsIcon name="..." />`, `rsPrimeIcon("...")` y
-`icon: "..."` en el codigo fuente. No hace falta declarar iconos a mano. Para iconos
-dinamicos que el scanner no pueda detectar, agregalos en `include`.
-
-### Directorio de salida
-
-Por defecto las fuentes y el CSS se emiten en `assets/`. Se puede cambiar con `outputDir`:
-
-```ts
-robosophyMaterialSymbols({
-  outputDir: "fonts",
-});
-```
-
-Esto produce `fonts/rs-material-symbols.css` y `fonts/rs-material-symbols-{family}-{hash}.woff2`
-en el build, y ajusta los hrefs del preload y del stylesheet en el HTML.
+`icon: "..."` en el codigo fuente. Descarga los SVGs del repositorio oficial de Google
+durante el build, los cachea localmente y genera un sprite SVG inline. Sin fuentes
+tipograficas.
 
 ## RsIcon
 
-Use for Material Symbols. The Vite plugin generates local subset fonts for only the detected
-icons, preloads those fonts in build HTML, and defaults to `font-display: block` to avoid
-ligature text flashing before the icon font is ready.
+Use for Material Symbols. The Vite plugin generates an SVG sprite with only the detected
+icons and inlines it in the HTML. No fonts are loaded.
 
 ```vue
 <template>
@@ -91,8 +78,17 @@ ligature text flashing before the icon font is ready.
 ```
 
 For dynamic icon names that the scanner cannot see, add them to
-`robosophyMaterialSymbols({ include: [...] })`. Use `preload: false` or
-`fontDisplay: "optional"` only when an app has a specific loading-policy reason.
+`robosophyMaterialSymbols({ include: [...] })`.
+
+For full control over icon props (fill, grade, etc.), use the slot approach:
+
+```vue
+<Button label="Favorito">
+  <template #icon>
+    <RsIcon name="favorite" fill color="danger" />
+  </template>
+</Button>
+```
 
 ## RsSidebar
 

package/dist/components/RsAccountSelector/RsAccountSelector.vue.d.ts

@@ -42,6 +42,7 @@ declare const __VLS_base: import("vue").DefineComponent<RsAccountSelectorProps,
     onOpen?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
+    width: string;
     accounts: RsAccountSelectorAccount[];
     actions: RsAccountSelectorAction[];
     footerActions: RsAccountSelectorAction[];
@@ -51,7 +52,6 @@ declare const __VLS_base: import("vue").DefineComponent<RsAccountSelectorProps,
     activeText: string;
     selectText: string;
     triggerAriaLabel: string;
-    width: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/RsIcon/RsIcon.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RsIcon.vue.d.ts","sourceRoot":"","sources":["../../../src/components/RsIcon/RsIcon.vue"],"names":[],"mappings":"AA6DA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAiFlD,QAAA,MAAM,YAAY;;;;;;;;6EAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"RsIcon.vue.d.ts","sourceRoot":"","sources":["../../../src/components/RsIcon/RsIcon.vue"],"names":[],"mappings":"AA2FA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAmHlD,QAAA,MAAM,YAAY;;;;;;;;6EAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/index.css

@@ -1,163 +1,73 @@
 .rs-icon {
-  --rs-icon-color: currentColor;
-  --rs-icon-fill: 0;
-  --rs-icon-grade: 0;
-  --rs-icon-optical-size: 24;
-  --rs-icon-size: 24px;
-  --rs-icon-weight: 400;
-
   align-items: center;
-  color: var(--rs-icon-color);
+  color: var(--rs-icon-color, currentColor);
   display: inline-flex;
   flex: 0 0 auto;
-  font-family: "Material Symbols Outlined Variable";
-  font-size: var(--rs-icon-size);
-  font-style: normal;
-  font-feature-settings: "liga";
-  font-variation-settings:
-    "FILL" var(--rs-icon-fill),
-    "wght" var(--rs-icon-weight),
-    "GRAD" var(--rs-icon-grade),
-    "opsz" var(--rs-icon-optical-size);
-  font-weight: 400;
-  -webkit-font-feature-settings: "liga";
+  flex-shrink: 0;
+  height: var(--rs-icon-size, 24px);
   justify-content: center;
-  direction: ltr;
-  letter-spacing: normal;
-  line-height: 1;
-  text-transform: none;
   user-select: none;
-  white-space: nowrap;
-  word-wrap: normal;
+  width: var(--rs-icon-size, 24px);
 }
 
-.rs-icon--sm {
-  --rs-icon-optical-size: 20;
-  --rs-icon-size: 18px;
-}
-
-.rs-icon--md {
-  --rs-icon-optical-size: 24;
-  --rs-icon-size: 24px;
-}
-
-.rs-icon--lg {
-  --rs-icon-optical-size: 40;
-  --rs-icon-size: 32px;
+.rs-icon--interactive {
+  cursor: pointer;
 }
 
 .rs-icon--primary {
-  --rs-icon-color: var(--rs-color-icon-primary, #48a0d4);
+  color: var(--rs-color-icon-primary, #48a0d4);
 }
 
 .rs-icon--secondary {
-  --rs-icon-color: var(--rs-color-icon-secondary, #000000);
+  color: var(--rs-color-icon-secondary, #000000);
 }
 
 .rs-icon--success {
-  --rs-icon-color: var(--rs-color-icon-success, #4EAE01);
+  color: var(--rs-color-icon-success, #4EAE01);
 }
 
 .rs-icon--warning {
-  --rs-icon-color: var(--rs-color-icon-warning, #FF9001);
+  color: var(--rs-color-icon-warning, #FF9001);
 }
 
 .rs-icon--danger {
-  --rs-icon-color: var(--rs-color-icon-danger, #d80115);
+  color: var(--rs-color-icon-danger, #d80115);
 }
 
 .rs-icon--inherit {
-  --rs-icon-color: currentColor;
-}
-
-.rs-icon--rounded {
-  font-family: "Material Symbols Rounded Variable";
-}
-
-.rs-icon--sharp {
-  font-family: "Material Symbols Sharp Variable";
-}
-
-.rs-icon--interactive {
-  cursor: pointer;
-}
-
-.rs-icon--prime::before {
-  content: var(--rs-icon-content);
+  color: currentColor;
 }
 .rs-icon {
-  --rs-icon-color: currentColor;
-  --rs-icon-fill: 0;
-  --rs-icon-grade: 0;
-  --rs-icon-optical-size: 24;
-  --rs-icon-size: 24px;
-  --rs-icon-weight: 400;
-
   align-items: center;
-  color: var(--rs-icon-color);
+  color: var(--rs-icon-color, currentColor);
   display: inline-flex;
   flex: 0 0 auto;
-  font-family: "Material Symbols Outlined Variable";
-  font-size: var(--rs-icon-size);
-  font-style: normal;
-  font-feature-settings: "liga";
-  font-variation-settings:
-    "FILL" var(--rs-icon-fill),
-    "wght" var(--rs-icon-weight),
-    "GRAD" var(--rs-icon-grade),
-    "opsz" var(--rs-icon-optical-size);
-  font-weight: 400;
-  -webkit-font-feature-settings: "liga";
+  flex-shrink: 0;
+  height: var(--rs-icon-size, 24px);
   justify-content: center;
-  direction: ltr;
-  letter-spacing: normal;
-  line-height: 1;
-  text-transform: none;
   user-select: none;
-  white-space: nowrap;
-  word-wrap: normal;
-}
-.rs-icon--sm {
-  --rs-icon-optical-size: 20;
-  --rs-icon-size: 18px;
-}
-.rs-icon--md {
-  --rs-icon-optical-size: 24;
-  --rs-icon-size: 24px;
+  width: var(--rs-icon-size, 24px);
 }
-.rs-icon--lg {
-  --rs-icon-optical-size: 40;
-  --rs-icon-size: 32px;
+.rs-icon--interactive {
+  cursor: pointer;
 }
 .rs-icon--primary {
-  --rs-icon-color: var(--rs-color-icon-primary, #48a0d4);
+  color: var(--rs-color-icon-primary, #48a0d4);
 }
 .rs-icon--secondary {
-  --rs-icon-color: var(--rs-color-icon-secondary, #000000);
+  color: var(--rs-color-icon-secondary, #000000);
 }
 .rs-icon--success {
-  --rs-icon-color: var(--rs-color-icon-success, #4EAE01);
+  color: var(--rs-color-icon-success, #4EAE01);
 }
 .rs-icon--warning {
-  --rs-icon-color: var(--rs-color-icon-warning, #FF9001);
+  color: var(--rs-color-icon-warning, #FF9001);
 }
 .rs-icon--danger {
-  --rs-icon-color: var(--rs-color-icon-danger, #d80115);
+  color: var(--rs-color-icon-danger, #d80115);
 }
 .rs-icon--inherit {
-  --rs-icon-color: currentColor;
-}
-.rs-icon--rounded {
-  font-family: "Material Symbols Rounded Variable";
-}
-.rs-icon--sharp {
-  font-family: "Material Symbols Sharp Variable";
-}
-.rs-icon--interactive {
-  cursor: pointer;
-}
-.rs-icon--prime::before {
-  content: var(--rs-icon-content);
+  color: currentColor;
 }
 .rs-account-selector-host {
   --rs-account-selector-width: 270px;

package/dist/index.js

@@ -1,9 +1,10 @@
 // AUTO-GENERATED FILE. DO NOT EDIT MANUALLY.
 import "./index.css";
-import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, toDisplayString, ref, onMounted, onBeforeUnmount, watch, nextTick, createVNode, unref, withModifiers, withCtx, renderSlot, createElementVNode, createBlock, Teleport, createCommentVNode, Fragment, renderList, mergeProps, createTextVNode } from "vue";
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, ref, onMounted, onBeforeUnmount, watch, nextTick, createVNode, unref, withModifiers, withCtx, renderSlot, toDisplayString, createBlock, Teleport, createCommentVNode, Fragment, renderList, mergeProps, createTextVNode } from "vue";
 import Button from "primevue/button";
 import Menu from "primevue/menu";
-const _hoisted_1$2 = ["aria-hidden", "aria-label", "role"];
+const _hoisted_1$2 = ["aria-hidden", "aria-label", "role", "width", "height"];
+const _hoisted_2$2 = ["href"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{
     name: "RsIcon"
@@ -22,7 +23,30 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     ariaLabel: {}
   },
   setup(__props) {
+    const GRADE_VALUES = [200, 0, -25];
     const props = __props;
+    function clampGrade(grade) {
+      return GRADE_VALUES.reduce(
+        (nearest, g) => Math.abs(g - grade) < Math.abs(nearest - grade) ? g : nearest
+      );
+    }
+    const symbolHref = computed(() => {
+      const family = props.family;
+      const name = props.name;
+      let gradeSuffix = "";
+      const clamped = clampGrade(props.grade);
+      if (clamped !== 0) {
+        gradeSuffix = clamped > 0 ? `-grad${clamped}` : `-gradN${Math.abs(clamped)}`;
+      }
+      const fillSuffix = props.fill ? "-fill" : "";
+      return `#rs-icon-${family}-${name}${gradeSuffix}${fillSuffix}`;
+    });
+    const iconSize = computed(() => {
+      if (typeof props.size === "number") return props.size;
+      if (props.size === "sm") return 18;
+      if (props.size === "lg") return 32;
+      return 24;
+    });
     const rootClass = computed(() => [
       "rs-icon",
       `rs-icon--${props.family}`,
@@ -35,22 +59,24 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     ]);
     const rootStyle = computed(() => ({
-      "--rs-icon-fill": props.fill ? 1 : 0,
-      "--rs-icon-grade": props.grade,
-      "--rs-icon-optical-size": props.opticalSize,
-      "--rs-icon-size": typeof props.size === "number" ? `${props.size}px` : void 0,
-      "--rs-icon-weight": props.weight
+      "--rs-icon-color": void 0,
+      "--rs-icon-size": `${iconSize.value}px`
     }));
     const ariaHidden = computed(() => props.ariaLabel ? void 0 : "true");
     const role = computed(() => props.ariaLabel ? "img" : void 0);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
+      return openBlock(), createElementBlock("svg", {
         "aria-hidden": ariaHidden.value,
         "aria-label": __props.ariaLabel,
         class: normalizeClass(rootClass.value),
         role: role.value,
-        style: normalizeStyle(rootStyle.value)
-      }, toDisplayString(__props.name), 15, _hoisted_1$2);
+        style: normalizeStyle(rootStyle.value),
+        width: iconSize.value,
+        height: iconSize.value,
+        fill: "currentColor"
+      }, [
+        createElementVNode("use", { href: symbolHref.value }, null, 8, _hoisted_2$2)
+      ], 14, _hoisted_1$2);
     };
   }
 });