tosijs-ui 1.5.8 → 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

@@ -7,26 +7,6 @@
   <tosi-icon title="tosi-platform" icon="tosiPlatform" style="--tosi-icon-size: 128px"></tosi-icon>
 </div>
 
-A library that provides `ElementCreator` functions that produce SVG icons. It leverages `tosijs`'s
-`svgElements` proxy and is intended to address all the key use-cases for SVG icons in web
-applications along with being very easy to extend and maintain.
-
-> ### Supported Use Cases
-> - inline SVGs that can be styled by CSS (for buttons, etc.)
-> - allows both stroked and filled icons (unlike font-based systems)
-> - support for color icons (without requiring multiple glyphs perfectly aligned)
-> - icons can be rendered  as data urls, e.g. to insert into CSS… (the little `owl` logo rendered under blockquotes is an example)
-> - icon composition: stack, transform, and style icons via naming conventions (e.g. `lock50s75o$shield`)
-> - extensible rules system for custom prefixes and overlays (e.g. `unLock`, `checkFile`)
-> - icon redirects eliminate redundant SVG data (e.g. `chevronDown` → `chevronRight90r`)
-
-### Nice Features
-> - no build process magic needed (your icons are "just javascript", no special CSS files needed, no magic glyph mappings). Adding new, or overriding existing, icons is trivial.
-> - icons are just regular SVG, not a specialized subset.
-> - highly optimized and compressible (the code is comparable in size to what you get with a compressed font built from the same icons, except icon fonts don't support strokes, gradients, etc.)
-
-## icons
-
 `icons` is a proxy that generates an `ElementCreator` for a given icon on demand,
 e.g. `icons.chevronDown()` produces an `<svg>` element containing a downward-pointing chevron
 icon with the class `icon-chevron-down`.
@@ -351,7 +331,7 @@ that, for example, treat all colored icons inside buttons the same way.
 <tosi-icon icon="lock50s75o_10y$shield_brandColorS" size=128></tosi-icon>
 <tosi-icon icon="unLock_brandColorS" size=128></tosi-icon>
 <tosi-icon icon="checkFile" size=128></tosi-icon>
-<tosi-icon icon="spin120Loader40s_30x$cloud" size=128></tosi-icon>
+<tosi-icon icon="spin120Loader40s_30x_brandColorS$cloud" size=128></tosi-icon>
 
 ### Why?
 
@@ -371,6 +351,12 @@ variations on every icon?
 <tosi-icon icon="pin0f_brandColorS" size=64></tosi-icon>
 <tosi-icon icon="unPin_brandColorS" size=64></tosi-icon>
 
+And now we can just create icon languages…
+
+<tosi-icon icon="checkUsers" size=64></tosi-icon>
+<tosi-icon icon="searchMap" size=64></tosi-icon>
+<tosi-icon icon="cancelHeart" size=64></tosi-icon>
+
 ### Icon modifier suffixes
 
 The suffix system is inspired by tosijs's CSS variable math, where
@@ -460,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
@@ -473,35 +486,6 @@ with `svg2DataUrl`.
 If you ask for an icon that isn't defined, the `icons` proxy will print a warning to console
 and render a `square` (in fact, `icons.square()`) as a fallback.
 
-## Why?
-
-My evolution has been:
-
-1. Using Icomoon.io, which I still think is a solid choice for managing custom icon fonts
-2. Processing Icomoon selection.json files into icon-data and then generating SVGs dynamically
-   from the data
-3. Ingesting SVGs directly, with a little cleanup
-
-The goal is always to have a single source of truth for icons, no magic or convoluted tooling, and
-be able to quickly and easily add and replace icons, distribute them with components, and
-have no mess or fuss.
-
-1. Works well, but…
-   - color icons are flaky,
-   - doesn't play well with others,
-   - can't really distribute the icons with your components.
-   - difficult to use icons in CSS `content`
-   - impossible to use icons in CSS backgrounds
-2. This is `icons.ts` until just now! Solves all the above, but…
-   - no fancy SVG effects, like gradients (goodness knows I experimented with converting CSS gradients to SVG gradients) and, most
-   - **strokes** need to be converted to outlines
-   - outlined strokes can't be styled the way strokes can
-   - blocks use of popular icon libraries
-3. This is how everyone else works, except…
-   - no build magic needed: `defineIcons({ myIcon: '<svg....>', ... })`
-   - if you want build magic, `icons.js` has no dependencies, finds icons and creates an `icon-data.ts` file.
-   - smaller icon files, even though I'm now including more icons (including *all the current* feathericons)
-
 ## Icon Sources
 
 Many of these icons are sourced from [Feather Icons](https://github.com/feathericons/feather), but
@@ -514,6 +498,12 @@ The remaining icons I have created myself using the excellent but sometimes flaw
 [Amadine](https://apps.apple.com/us/app/amadine-vector-design-art/id1339198386?mt=12)
 and before that [Graphic](https://apps.apple.com/us/app/graphic/id404705039?mt=12).
 
+### Building icon data
+
+Use [make-icon-data](/?make-icon-data.js) to generate icon data from SVG files.
+It supports directional folder conventions to auto-generate rotated and flipped
+variants, eliminating redundant SVGs.
+
 ### Feather Icons Copyright Notice
 
 The MIT License (MIT)
@@ -573,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+)/,
@@ -582,40 +572,38 @@ export const iconRules = [
             const dps = match[1].replace('_', '-');
             const duration = 360 / Math.abs(parseFloat(dps));
             const direction = dps.startsWith('-') ? 'reverse' : 'normal';
-            // Strip suffixes — apply them to the wrapper, not the inner icon
-            const parsed = parseStyleSuffixes(baseName);
-            const iconName = parsed ? parsed.baseName : baseName;
-            const icon = resolveIcon(iconName, []);
+            // Resolve baseName with suffixes intact — they apply to the icon
+            const icon = resolveIcon(baseName, []);
             const el = icon;
             if (el.animate) {
-                el.animate([{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }], {
+                const base = el.style.transform || '';
+                el.animate([
+                    { transform: `${base} rotate(0deg)` },
+                    { transform: `${base} rotate(360deg)` },
+                ], {
                     duration: duration * 1000,
                     iterations: Infinity,
                     direction,
                 });
             }
-            const wrapper = wrapIcon(baseName, parts, icon);
-            if (parsed) {
-                Object.assign(wrapper.style, parsed.style);
-            }
-            return wrapper;
+            return wrapIcon(baseName, parts, icon);
         },
     },
     {
         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) {
@@ -699,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)
@@ -728,8 +716,17 @@ function parseStyleSuffixes(name) {
     if (!baseName)
         return null;
     const data = iconData;
-    if (!data[baseName])
-        return null;
+    // Accept if baseName is in iconData, or matches a composition rule prefix
+    if (!data[baseName]) {
+        const matchesRule = iconRules.some((rule) => {
+            if (rule.prefix instanceof RegExp) {
+                return rule.prefix.test(baseName);
+            }
+            return baseName.startsWith(rule.prefix) && baseName.length > rule.prefix.length;
+        });
+        if (!matchesRule)
+            return null;
+    }
     const style = {};
     const suffixes = match[0].match(/_?\d+[osxyr]|[01]f|_[a-zA-Z0-9]+[FS]|\d+W/g);
     if (!suffixes)
@@ -787,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;