tosijs-ui 1.16.21 → 1.16.23

package/dist/icons.js

@@ -1,3 +1,4 @@
+/*{ "parent": "Components" }*/
 /*#
 # icons
 
@@ -8,8 +9,8 @@
 </div>
 
 `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`.
+e.g. `icons.chevronDown()` produces an `<svg>` element (class `tosi-icon`) containing a
+downward-pointing chevron.
 
 Most of the built-in icons come from [Feather](https://feathericons.com). If you want more
 icons in the same style, [lucide](https://lucide.dev) is a fork and expansion of Feather and a
@@ -200,12 +201,12 @@ test('filter input and prefix select exist', () => {
 })
 ```
 
-These icons are completely unstyled and can be colored using the css `fill` property. This will
-probably be broken out as a standalone library to allow the use of whatever icons you like
-(its source data is currently generated from an [icomoon](https://icomoon.com/app)
-`selection.json` file, but could just as easily be generated from a directory full of SVGs).
+Icons take their colour from the text around them (`currentColor`). Override fill and stroke
+with `--tosi-icon-fill` and `--tosi-icon-stroke`, or per icon with the `F` and `S` suffixes
+(see [Icon modifier suffixes](#icon-modifier-suffixes)). The icon data is generated from a
+directory of SVGs (see [Building icon data](#building-icon-data)).
 
-### Need More Icons?
+## Need More Icons?
 
 [lucide](https://lucide.dev) is a fork and expansion of feather that maintains the style and
 adds a lot more options. Obviously it's completely compatible with this icon system and generously licensed. A
@@ -441,6 +442,24 @@ The overlay rules are just string rewrites — for example, `unFoo`
 becomes `slash25o$foo75s75o`. **Overlay icons should have a square
 viewBox** for best results on non-square base icons.
 
+#### Explicit rules: `rule:icon`
+
+`checkSquare` is ambiguous: it is a registered icon, and it also reads as
+the `check` rule over `square`. A registered icon wins, so it draws the
+icon. Put a `:` at the boundary to ask for the rule: `check:square`,
+`un:lock`, `spin90:loader`. The explicit form applies the rule (unless
+you `defineIcons` that exact name, which warns), needs no capital letter
+after the prefix, and takes suffixes and stacking
+as usual (`spin90:loader40s`, `un:lock$shield`). A `:` is not valid in a
+JavaScript identifier, so write `icons['check:square']()`, or
+`<tosi-icon icon="check:square">`.
+
+```html
+<tosi-icon icon="checkSquare" size="48"></tosi-icon>
+<tosi-icon icon="check:square" size="48"></tosi-icon>
+<tosi-icon icon="un:lock" size="48"></tosi-icon>
+```
+
 ### Custom rules
 
 `iconRules` is a mutable array. Each rule has a `prefix` (string or
@@ -571,7 +590,7 @@ copies or substantial portions of the Software.
 import { elements, svgElements, Color, vars, varDefault, withAttributes, } from 'tosijs';
 import iconData from './icon-data.js';
 import { splitSuffixes, suffixNumber } from './icon-suffixes.js';
-import { iconRules, spinRule, matchRule, canResolve } from './icon-rules.js';
+import { iconRules, spinRule, matchRule, canResolve, suffixedIcon, } from './icon-rules.js';
 export { iconRules } from './icon-rules.js';
 export const defineIcons = (newIcons) => {
     const data = iconData;
@@ -592,6 +611,7 @@ export const defineIcons = (newIcons) => {
             if (matched == null || !canResolve(matched.baseName))
                 return false;
             return (typeof rule.prefix !== 'string' ||
+                name.includes(':') ||
                 /[A-Z]/.test(name[rule.prefix.length]));
         });
         if (readsAsRule) {
@@ -901,14 +921,10 @@ export function resolveIcon(prop, parts) {
         });
         return wrapIcon(prop, parts, base, ...overlays);
     }
-    /*
-    Style suffixes on a registered icon win over a composition rule (#3295): `checkCircle90r`
-    is `checkCircle` turned, not the `check` rule over `circle90r`. A rule still applies
-    when its suffixes are on an icon that only the rule makes (`spin90Loader50o`).
-    */
+    // Suffixes on a registered icon win over a rule (suffixedIcon, #3295). A rule still
+    // applies when its suffixes are on an icon only the rule makes (`spin90Loader50o`).
     const parsed = parseStyleSuffixes(prop);
-    const native = parsed != null && iconData[parsed.baseName];
-    if (!native) {
+    if (!suffixedIcon(prop)) {
         const composed = composeIcon(prop, parts);
         if (composed)
             return composed;