tosijs-ui 1.5.8 → 1.5.9

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
@@ -473,35 +459,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 +471,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)
@@ -582,23 +545,21 @@ 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);
         },
     },
     {
@@ -728,8 +689,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)