@imtf/icons 0.0.3 → 0.0.4

package/lib/src/components/IconSVG.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactElement } from 'react';
+interface IconSVGProps {
+    color?: string;
+    size?: string | number;
+    src?: string;
+    children?: ReactElement;
+}
+declare const IconSVG: React.FC<IconSVGProps>;
+export default IconSVG;

package/lib/src/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as IconSVG } from './IconSVG.js';
+export * from './IconSVG.js';

package/lib/src/index.d.ts

@@ -1 +1,2 @@
 export * from './providers';
+export * from './components';

package/lib/src/index.js

@@ -1,4 +1,4 @@
-import require$$0, { createContext, useMemo } from 'react';
+import require$$0, { createContext, useMemo, useContext, useEffect } from 'react';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -2331,4 +2331,27 @@ var IconProvider = function (_a) {
     return (jsxRuntime.exports.jsx(IconContext.Provider, __assign({ value: __assign(__assign(__assign({}, defaultContext), props), defaultValue) }, { children: children }), void 0));
 };
 
-export { IconContext, IconProvider, defaultContext, withIconContext };
+var IconSVG = function (_a) {
+    var defaultColor = _a.color, size = _a.size, src = _a.src, children = _a.children, props = __rest(_a, ["color", "size", "src", "children"]);
+    var defaultContextValues = useContext(IconContext);
+    var defaultValues = __assign(__assign(__assign({}, defaultContextValues), { color: defaultColor || defaultContextValues.color, size: size || defaultContextValues.size }), props);
+    var color = useMemo(function () { return lodash_get(defaultValues.palette, defaultValues.color, defaultValues.color); }, [defaultValues.color, defaultValues.palette]);
+    useEffect(function () {
+        if (src && !children) {
+            var wrapper = document.getElementById('SVGWrapper');
+            wrapper.innerHTML = atob(src);
+            var svg = wrapper === null || wrapper === void 0 ? void 0 : wrapper.children;
+            var path = svg === null || svg === void 0 ? void 0 : svg[0].firstElementChild;
+            svg === null || svg === void 0 ? void 0 : svg[0].setAttribute('width', typeof defaultValues.size === 'number'
+                ? defaultValues.size + 'px'
+                : defaultValues.size);
+            svg === null || svg === void 0 ? void 0 : svg[0].setAttribute('height', typeof defaultValues.size === 'number'
+                ? defaultValues.size + 'px'
+                : defaultValues.size);
+            path === null || path === void 0 ? void 0 : path.setAttribute('fill', color);
+        }
+    }, [color, src, children, size]);
+    return children ? (require$$0.cloneElement(children, __assign({ fill: color, width: size, height: size }, props))) : src ? (jsxRuntime.exports.jsx("div", { id: "SVGWrapper" }, void 0)) : null;
+};
+
+export { IconContext, IconProvider, IconSVG, defaultContext, withIconContext };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@imtf/icons",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Library of icons (React components, font and svg)",
   "module": "./lib/index.js",
   "types": "./lib/index.d.ts",