coles-solid-library 0.4.1 → 0.4.2

package/dist/index.esm.js

@@ -2874,6 +2874,7 @@ const icons = import.meta.glob('/node_modules/@material-symbols/svg-400/**/*.svg
   import: 'default'
 });
 const Icon = props => {
+  const [rawSvg, setRawSvg] = createSignal("");
   const [svg, setSvg] = createSignal("");
   const sizeMap = {
     small: 16,
@@ -2889,14 +2890,33 @@ const Icon = props => {
     }
     return 24;
   });
-  const color = props.color ?? "currentColor";
+  const color = createMemo(() => props.color ?? "currentColor");
   const variant = props.variant ?? "outlined";
   const key = `/node_modules/@material-symbols/svg-400/${variant}/${props.name}.svg`;
   if (!icons[key]) throw new Error(`Icon not found: ${key}`);
   icons[key]().then(raw => {
-    setSvg(raw.replace(/fill=".*?"/g, 'fill="currentColor"').replace(/width=".*?"/g, `width="${untrack(size)}"`).replace(/height=".*?"/g, `height="${untrack(size)}"`));
+    setRawSvg(raw);
   }).catch(console.error);
   const [iconRef, setIconRef] = createSignal();
+  createEffect(() => {
+    const markup = rawSvg();
+    if (!markup) return;
+    const nextColor = color();
+    const nextSize = size();
+    let nextMarkup = markup.replace(/width=".*?"/g, `width="${nextSize}"`).replace(/height=".*?"/g, `height="${nextSize}"`);
+    if (/fill="/.test(nextMarkup)) {
+      nextMarkup = nextMarkup.replace(/fill=".*?"/g, `fill="${nextColor}"`);
+    } else {
+      nextMarkup = nextMarkup.replace(/<svg([^>]*)>/, (match, attrs) => {
+        if (/fill=/.test(attrs)) {
+          return `<svg${attrs}>`;
+        }
+        const spacer = attrs && attrs.endsWith(" ") ? "" : attrs ? " " : " ";
+        return `<svg${attrs}${spacer}fill="${nextColor}">`;
+      });
+    }
+    setSvg(nextMarkup);
+  });
   return (() => {
     var _el$ = _tmpl$$8();
     use(ref => {
@@ -2905,23 +2925,27 @@ const Icon = props => {
       props?.ref?.(ref);
     }, _el$);
     _el$.style.setProperty("display", "inline-block");
-    color != null ? _el$.style.setProperty("color", color) : _el$.style.removeProperty("color");
-    color != null ? _el$.style.setProperty("fill", color) : _el$.style.removeProperty("fill");
     createRenderEffect(_p$ => {
       var _v$ = styles$5.icon,
         _v$2 = `${size()}px`,
         _v$3 = `${size()}px`,
-        _v$4 = svg();
+        _v$4 = color(),
+        _v$5 = color(),
+        _v$6 = svg();
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("width", _v$2) : _el$.style.removeProperty("width"));
       _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("height", _v$3) : _el$.style.removeProperty("height"));
-      _v$4 !== _p$.o && (_el$.innerHTML = _p$.o = _v$4);
+      _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$.style.setProperty("color", _v$4) : _el$.style.removeProperty("color"));
+      _v$5 !== _p$.i && ((_p$.i = _v$5) != null ? _el$.style.setProperty("fill", _v$5) : _el$.style.removeProperty("fill"));
+      _v$6 !== _p$.n && (_el$.innerHTML = _p$.n = _v$6);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
-      o: undefined
+      o: undefined,
+      i: undefined,
+      n: undefined
     });
     return _el$;
   })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coles-solid-library",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "A SolidJS mostly UI library",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",