coles-solid-library 0.4.1 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +23 -5
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -2863,7 +2863,7 @@ const Container = props => {
|
|
|
2863
2863
|
})();
|
|
2864
2864
|
};
|
|
2865
2865
|
|
|
2866
|
-
var css_248z$6 = ".icon-module_icon__K4BP- {\n outline: none !important;\n border: none !important;\n}\n.icon-module_icon__K4BP- svg {\n
|
|
2866
|
+
var css_248z$6 = ".icon-module_icon__K4BP- {\n outline: none !important;\n border: none !important;\n}\n.icon-module_icon__K4BP- svg {\n color: var(--header-on-background-color, #fff) !important;\n}\n.icon-module_icon__K4BP-:focus {\n outline: none !important;\n border: none !important;\n}\n.icon-module_icon__K4BP-:active {\n outline: none !important;\n border: none !important;\n}";
|
|
2867
2867
|
var styles$5 = {"icon":"icon-module_icon__K4BP-"};
|
|
2868
2868
|
styleInject(css_248z$6);
|
|
2869
2869
|
|
|
@@ -2874,6 +2874,7 @@ const icons = import.meta.glob('/node_modules/@material-symbols/svg-400/**/*.svg
|
|
|
2874
2874
|
import: 'default'
|
|
2875
2875
|
});
|
|
2876
2876
|
const Icon = props => {
|
|
2877
|
+
const [rawSvg, setRawSvg] = createSignal("");
|
|
2877
2878
|
const [svg, setSvg] = createSignal("");
|
|
2878
2879
|
const sizeMap = {
|
|
2879
2880
|
small: 16,
|
|
@@ -2889,14 +2890,33 @@ const Icon = props => {
|
|
|
2889
2890
|
}
|
|
2890
2891
|
return 24;
|
|
2891
2892
|
});
|
|
2892
|
-
const color = props.color ?? "currentColor";
|
|
2893
|
+
const color = createMemo(() => props.color ?? "currentColor");
|
|
2893
2894
|
const variant = props.variant ?? "outlined";
|
|
2894
2895
|
const key = `/node_modules/@material-symbols/svg-400/${variant}/${props.name}.svg`;
|
|
2895
2896
|
if (!icons[key]) throw new Error(`Icon not found: ${key}`);
|
|
2896
2897
|
icons[key]().then(raw => {
|
|
2897
|
-
|
|
2898
|
+
setRawSvg(raw);
|
|
2898
2899
|
}).catch(console.error);
|
|
2899
2900
|
const [iconRef, setIconRef] = createSignal();
|
|
2901
|
+
createEffect(() => {
|
|
2902
|
+
const markup = rawSvg();
|
|
2903
|
+
if (!markup) return;
|
|
2904
|
+
const nextColor = color();
|
|
2905
|
+
const nextSize = size();
|
|
2906
|
+
let nextMarkup = markup.replace(/width=".*?"/g, `width="${nextSize}"`).replace(/height=".*?"/g, `height="${nextSize}"`);
|
|
2907
|
+
if (/fill="/.test(nextMarkup)) {
|
|
2908
|
+
nextMarkup = nextMarkup.replace(/fill=".*?"/g, `fill="${nextColor}"`);
|
|
2909
|
+
} else {
|
|
2910
|
+
nextMarkup = nextMarkup.replace(/<svg([^>]*)>/, (match, attrs) => {
|
|
2911
|
+
if (/fill=/.test(attrs)) {
|
|
2912
|
+
return `<svg${attrs}>`;
|
|
2913
|
+
}
|
|
2914
|
+
const spacer = attrs && attrs.endsWith(" ") ? "" : attrs ? " " : " ";
|
|
2915
|
+
return `<svg${attrs}${spacer}fill="${nextColor}">`;
|
|
2916
|
+
});
|
|
2917
|
+
}
|
|
2918
|
+
setSvg(nextMarkup);
|
|
2919
|
+
});
|
|
2900
2920
|
return (() => {
|
|
2901
2921
|
var _el$ = _tmpl$$8();
|
|
2902
2922
|
use(ref => {
|
|
@@ -2905,8 +2925,6 @@ const Icon = props => {
|
|
|
2905
2925
|
props?.ref?.(ref);
|
|
2906
2926
|
}, _el$);
|
|
2907
2927
|
_el$.style.setProperty("display", "inline-block");
|
|
2908
|
-
color != null ? _el$.style.setProperty("color", color) : _el$.style.removeProperty("color");
|
|
2909
|
-
color != null ? _el$.style.setProperty("fill", color) : _el$.style.removeProperty("fill");
|
|
2910
2928
|
createRenderEffect(_p$ => {
|
|
2911
2929
|
var _v$ = styles$5.icon,
|
|
2912
2930
|
_v$2 = `${size()}px`,
|