tosijs-ui 1.5.9 → 1.5.10

package/dist/icons.d.ts

@@ -8,8 +8,6 @@ export interface IconRule {
     prefix: string | RegExp;
     apply: (baseName: string, match: RegExpMatchArray | string, parts: ElementPart[]) => Element | string | null;
 }
-/** Returns icon name safe for suffix concatenation (appends _ if name ends in digit) */
-export declare const safeIconSuffix: (name: string) => string;
 export declare const iconRules: IconRule[];
 export declare const icons: SVGIconMap;
 export declare class SvgIcon extends WebComponent {

package/dist/icons.js

@@ -446,6 +446,33 @@ through the full pipeline), an **Element** (used directly), or **null**
       },
     })
 
+### Building an icon vocabulary
+
+You don't need to spell out the DSL every time. The real power is in
+defining named patterns that become your application's icon language.
+For example, a `remove` prefix that overlays a trash icon:
+
+    iconRules.push({
+      prefix: 'remove',
+      apply: (baseName) =>
+        `trash75o_actionColorS$${baseName}50o`,
+    })
+
+Now `removeUser`, `removeFile`, `removeProject` all just work — and
+they're consistent. If you redesign the trash icon or change
+`--action-color`, every "remove" icon updates automatically.
+
+You can also use `defineIcons` for one-off named compositions:
+
+    defineIcons({
+      cloudSync: 'spin120Loader40s_30x$cloud',
+      secureShield: 'lock50s75o_10y$shield',
+      newFile: 'plus75o60s25x25y$file',
+    })
+
+Then just use `icons.cloudSync()` or `<tosi-icon icon="cloudSync">` —
+the composition is invisible to consumers of the icon.
+
 ### Composites and `svg2DataUrl`
 
 Composed icons (stacked, overlay rules) are wrapped in a `<span>`, not
@@ -536,8 +563,8 @@ export const svg2DataUrl = (icon, fill, stroke, strokeWidth) => {
     const text = encodeURIComponent(svg.outerHTML);
     return `url(data:image/svg+xml;charset=UTF-8,${text})`;
 };
-/** Returns icon name safe for suffix concatenation (appends _ if name ends in digit) */
-export const safeIconSuffix = (name) => /\d$/.test(name) ? name + '_' : name;
+// Appends _ to names ending in digits to prevent suffix ambiguity
+const safeIconSuffix = (name) => /\d$/.test(name) ? name + '_' : name;
 export const iconRules = [
     {
         prefix: /^spin(_?\d+)/,
@@ -564,19 +591,19 @@ export const iconRules = [
     },
     {
         prefix: 'un',
-        apply: (baseName) => `slash25o$${safeIconSuffix(baseName)}75s75o`,
+        apply: (baseName) => `slash25o$${baseName}75s75o`,
     },
     {
         prefix: 'check',
-        apply: (baseName) => `check75o_00aa00S$${safeIconSuffix(baseName)}75s50o`,
+        apply: (baseName) => `check75o_00aa00S$${baseName}75s50o`,
     },
     {
         prefix: 'cancel',
-        apply: (baseName) => `x75o_cc0000S$${safeIconSuffix(baseName)}75s50o`,
+        apply: (baseName) => `x75o_cc0000S$${baseName}75s50o`,
     },
     {
         prefix: 'search',
-        apply: (baseName) => `search80s30x30y$${safeIconSuffix(baseName)}50o`,
+        apply: (baseName) => `search80s30x30y$${baseName}50o`,
     },
 ];
 function makeIcon(spec, parts) {
@@ -660,7 +687,7 @@ function composeIcon(prop, parts) {
         // Only apply if baseName can actually resolve to an icon
         if (!canResolve(baseName))
             continue;
-        const result = rule.apply(baseName, match, parts);
+        const result = rule.apply(safeIconSuffix(baseName), match, parts);
         if (typeof result === 'string')
             return resolveIcon(result, parts);
         if (result)
@@ -757,6 +784,8 @@ function parseStyleSuffixes(name) {
     return { baseName, style };
 }
 function resolveIcon(prop, parts) {
+    if (prop.endsWith('_'))
+        prop = prop.slice(0, -1);
     const data = iconData;
     // Direct match or redirect chain
     let name = prop;