fix: use color attribute instead of fill

oktaysenkan · Oct 7, 2024 · d27a5e5 · d27a5e5
1 parent cff5104
commit d27a5e5
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 22 deletions.
diff --git a/apps/react-native-app/App.tsx b/apps/react-native-app/App.tsx
@@ -1,15 +1,22 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { Button, StyleSheet, View } from "react-native";
 import { Monicon } from "@monicon/native";
 
 export default function App() {
+  const [size, setSize] = React.useState(32);
   return (
     <View style={styles.container}>
-      <Monicon name="mdi:home" />
+      <Button title="Press me" onPress={(s) => setSize((s) => s + 2)} />
+      <Monicon name="mdi:home" color="red" size={size} />
       <Monicon name="feather:activity" />
       <Monicon name="logos:active-campaign" size={30} />
       <Monicon name="logos:apache-superset-icon" />
       <Monicon name="invalid:icon" />
+      <Monicon
+        size={24}
+        name="icon-park-outline:arrow-circle-right"
+        color="red"
+      />
     </View>
   );
 }

diff --git a/apps/react-native-app/babel.config.js b/apps/react-native-app/babel.config.js
@@ -2,6 +2,8 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ["babel-preset-expo"],
-    plugins: [["@monicon/babel-plugin"]],
+    plugins: [
+      ["@monicon/babel-plugin", { outputFileName: "react-native-app" }],
+    ],
   };
 };
diff --git a/apps/react-native-app/metro.config.js b/apps/react-native-app/metro.config.js
@@ -18,6 +18,7 @@ const configWithMonicon = withMonicon(config, {
     "feather:alert-circle",
     "logos:active-campaign",
     "logos:apache-superset-icon",
+    "icon-park-outline:arrow-circle-right",
   ],
   outputFileName: "react-native-app",
 });

diff --git a/apps/react-native-app/package.json b/apps/react-native-app/package.json
@@ -11,10 +11,10 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@monicon/babel-plugin": "*",
     "@monicon/metro": "*",
     "@monicon/native": "*",
     "@monicon/webpack": "*",
-    "@monicon/babel-plugin": "*",
     "expo": "^49.0.21",
     "expo-status-bar": "~1.7.0",
     "react": "^18.2.0",

diff --git a/apps/react-native-app/webpack.config.js b/apps/react-native-app/webpack.config.js
@@ -14,6 +14,7 @@ module.exports = async function (env, argv) {
         "feather:alert-circle",
         "logos:active-campaign",
         "logos:apache-superset-icon",
+        "icon-park-outline:arrow-circle-right",
       ],
       outputFileName: "react-native-app",
     })

diff --git a/packages/icon-loader/src/index.ts b/packages/icon-loader/src/index.ts
@@ -38,12 +38,12 @@ export const getIconDetails = (
 
   const parsed = parseSync(icon.svg);
 
-  let innerHtml = parsed.children.map((child) => stringify(child)).join("");
-
   if (props.color) {
-    innerHtml = innerHtml.replace(/fill="([^"]+)"/, `fill="${props.color}"`);
+    parsed.attributes.color = props.color;
   }
 
+  let innerHtml = parsed.children.map((child) => stringify(child)).join("");
+
   const ratio = icon.width / icon.height;
 
   const height = props.size ? props.size : icon.height;
@@ -58,13 +58,7 @@ export const getIconDetails = (
 
   parsed.attributes = attributes;
 
-  icon.svg = icon.svg
-    .replace(/width="([^"]+)"/, `width="${width}"`)
-    .replace(/height="([^"]+)"/, `height="${height}"`);
-
-  if (props.color) {
-    icon.svg = icon.svg.replace(/fill="([^"]+)"/, `fill="${props.color}"`);
-  }
+  icon.svg = stringify(parsed);
 
   return {
     innerHtml,

diff --git a/packages/native/package.json b/packages/native/package.json
@@ -33,9 +33,9 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "html-react-parser": "^5.1.16",
     "@monicon/core": "*",
-    "@monicon/icon-loader": "*"
+    "@monicon/icon-loader": "*",
+    "html-react-parser": "^5.1.16"
   },
   "peerDependencies": {
     "react": ">=18.2.0",

diff --git a/packages/native/src/Monicon.tsx b/packages/native/src/Monicon.tsx
@@ -6,7 +6,7 @@ import {
 import { Icon } from "@monicon/core";
 import type { XmlProps } from "react-native-svg";
 
-export interface MoniconProps extends LoaderProps, XmlProps {
+export interface MoniconProps extends LoaderProps, Omit<XmlProps, "xml"> {
   name: LoaderProps["name"];
   color?: LoaderProps["color"];
   webProps?: React.SVGProps<SVGSVGElement>;
@@ -78,26 +78,26 @@ const getComponent = async (
   return webIcon(details, props);
 };
 
-export const Monicon = ({ name, xml, color, size, ...props }: MoniconProps) => {
+export const Monicon = React.memo((props: MoniconProps) => {
   const [Component, setComponent] = React.useState<React.ReactNode | null>(
     null
   );
 
-  const renderIcon = async () => {
+  const renderIcon = React.useCallback(async () => {
     const icons = await importIcons();
 
-    const details = getIconDetails({ name, color, size }, icons ?? {});
+    const details = getIconDetails(props, icons ?? {});
 
     const component = await getComponent(details, props);
 
     setComponent(component);
-  };
+  }, [props]);
 
   React.useEffect(() => {
     renderIcon();
   }, [props]);
 
   return Component;
-};
+});
 
 export default Monicon;