chore: build fixes

iconBase.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+
+import { IconContext, DefaultContext } from "./iconContext";
+
+export interface IconTree {
+  tag: string;
+  attr: { [key: string]: string };
+  child: IconTree[];
+}
+
+function Tree2Element(tree: IconTree[]): React.ReactElement[] {
+  return (
+    tree &&
+    tree.map((node, i) =>
+      React.createElement(
+        node.tag,
+        { key: i, ...node.attr },
+        Tree2Element(node.child)
+      )
+    )
+  );
+}
+export function GenIcon(data: IconTree) {
+  // eslint-disable-next-line react/display-name
+  return (props: IconBaseProps) => (
+    <IconBase attr={{ ...data.attr }} {...props}>
+      {Tree2Element(data.child)}
+    </IconBase>
+  );
+}
+
+export interface IconBaseProps extends React.SVGAttributes<SVGElement> {
+  children?: React.ReactNode;
+  size?: string | number;
+  color?: string;
+  title?: string;
+}
+
+export type IconType = (props: IconBaseProps) => JSX.Element;
+export function IconBase(
+  props: IconBaseProps & { attr?: Record<string, string> }
+): JSX.Element {
+  const elem = (conf: IconContext) => {
+    const { attr, title, ...svgProps } = props;
+
+    let className;
+    if (conf.className) className = conf.className;
+    if (props.className)
+      className = (className ? className + " " : "") + props.className;
+
+    return (
+      <svg
+        stroke="currentColor"
+        fill="currentColor"
+        strokeWidth="0"
+        {...conf.attr}
+        {...attr}
+        {...svgProps}
+        className={className}
+        style={{
+          color: props.color || conf.color,
+          ...conf.style,
+          ...props.style,
+        }}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        {title && <title>{title}</title>}
+        {props.children}
+      </svg>
+    );
+  };
+
+  return IconContext !== undefined ? (
+    <IconContext.Consumer>
+      {(conf: IconContext) => elem(conf)}
+    </IconContext.Consumer>
+  ) : (
+    elem(DefaultContext)
+  );
+}

make.sh

@@ -8,6 +8,7 @@ base=$(pwd)
 reactIconsAll=$base/react-icons/packages/_react-icons_all
 reactIcons=$base/react-icons/packages/react-icons
 cp manifest.ts $reactIcons/src/icons/index.ts
+cp iconBase.tsx  $reactIcons/src/iconBase.tsx .
 
 cd $reactIconsAll
 git checkout package.json
@@ -26,13 +27,14 @@ echo "module.exports.IconMap = {" >> $js
 
 for img in $(ls  *.svg); do
   name=${img%.*}
-  class=$(node -e  "import camelcase from  'camelcase'; console.log(camelcase('$name', {pascalCase: true}))"  --input-type module)
+  class=$(node -e  "import camelcase from  'camelcase'; console.log(camelcase('$name', {pascalCase: true}).replace('K8s', 'K8S'))"  --input-type module)
   echo '  "'$name'"': $class , >> $mjs
    echo '  "'$name'"': module.exports.$class , >> $js
 done
 
 echo "}" >> $mjs
 echo "}" >> $js
+echo "export declare const IconMap: Record<string,IconType>;" >> $reactIconsAll/mi/index.d.ts
 
 cd $reactIconsAll
 cat <<< $(jq '.name = "@flanksource/icons"' package.json ) > package.json

manifest.ts

@@ -12,6 +12,7 @@ export const icons: IconDefinition[] = [
       {
         files: path.resolve(__dirname, "../../../../../svg/*.svg"),
         formatter: (name) => `${name}`.replace(/_/g, "").replace(/&/g, "And"),
+        multiColor: true,
       },
     ],
     source: {

svgo.config.mjs

@@ -11,6 +11,7 @@ export default {
     'removeMetadata',
     'removeDesc',
     'removeUselessDefs',
+    'prefixIds',
     'removeEditorsNSData',
     'removeEmptyAttrs',
     'removeHiddenElems',
@@ -45,7 +46,6 @@ export default {
     },
     'removeUselessStrokeAndFill',
     'removeUnusedNS',
-    'cleanupIds',
     'cleanupNumericValues',
     'cleanupListOfValues',
     'moveGroupAttrsToElems',