fix(react): resolve kebab-case html attributes warning

.changeset/nine-lions-eat.md

@@ -0,0 +1,20 @@
+---
+"@monicon/icon-loader": patch
+"@monicon/react": patch
+"@monicon/core": patch
+"@monicon/esbuild": patch
+"@monicon/loader": patch
+"@monicon/metro": patch
+"@monicon/native": patch
+"@monicon/nuxt": patch
+"@monicon/qwik": patch
+"@monicon/rollup": patch
+"@monicon/rspack": patch
+"@monicon/svelte": patch
+"@monicon/typescript-config": patch
+"@monicon/vite": patch
+"@monicon/vue": patch
+"@monicon/webpack": patch
+---
+
+fix(react): resolve kebab-case html attributes warning

packages/icon-loader/package.json

@@ -23,11 +23,13 @@
   },
   "devDependencies": {
     "@monicon/typescript-config": "*",
-    "@monicon/core": "*",
+    "@types/lodash": "^4.17.14",
     "tsup": "^8.0.1",
+    "type-fest": "^4.32.0",
     "typescript": "^5.3.3"
   },
   "dependencies": {
+    "lodash": "^4.17.21",
     "svgson": "^5.3.1"
   }
 }

packages/icon-loader/src/index.ts

@@ -1,5 +1,8 @@
 import { Icon } from "@monicon/core";
 import { parseSync, stringify } from "svgson";
+import _ from "lodash";
+import type { CamelCasedPropertiesDeep } from "type-fest";
+
 // @ts-ignore
 import icons from "@monicon/runtime";
 
@@ -98,3 +101,15 @@ export const getIconDetails = (props: MoniconProps) => {
     svg,
   } satisfies IconDetails;
 };
+
+export const camelCasedProps = <T extends object>(props: T) => {
+  const camelCasedProps = {} as CamelCasedPropertiesDeep<T>;
+
+  Object.entries(props).forEach(([key, value]) => {
+    const propName = _.camelCase(key) as keyof CamelCasedPropertiesDeep<T>;
+
+    camelCasedProps[propName] = value as any;
+  });
+
+  return camelCasedProps;
+};

packages/react/src/Monicon.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { getIconDetails, MoniconProps } from "@monicon/icon-loader";
+import {
+  getIconDetails,
+  MoniconProps,
+  camelCasedProps,
+} from "@monicon/icon-loader";
 
 export const Monicon = (props: MoniconProps) => {
   const details = React.useMemo(
@@ -13,9 +17,14 @@ export const Monicon = (props: MoniconProps) => {
     [props.name, props.size, props.color, props.strokeWidth]
   );
 
+  const attributes = React.useMemo(
+    () => camelCasedProps(details.attributes),
+    [details.attributes]
+  );
+
   return (
     <svg
-      {...details.attributes}
+      {...attributes}
       dangerouslySetInnerHTML={{ __html: details.innerHtml }}
     />
   );

yarn.lock

@@ -6887,6 +6887,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/lodash@^4.17.14":
+  version "4.17.14"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.14.tgz#bafc053533f4cdc5fcc9635af46a963c1f3deaff"
+  integrity sha512-jsxagdikDiDBeIRaPYtArcT8my4tN1og7MtMRquFT3XNA6axxyHDRUemqDz/taRDdOUn0GnGHRCuff4q48sW9A==
+
 "@types/mdast@^3.0.0":
   version "3.0.15"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.15.tgz#49c524a263f30ffa28b71ae282f813ed000ab9f5"
@@ -21022,11 +21027,6 @@ quick-lru@^5.1.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
-radash@^12.1.0:
-  version "12.1.0"
-  resolved "https://registry.npmjs.org/radash/-/radash-12.1.0.tgz"
-  integrity sha512-b0Zcf09AhqKS83btmUeYBS8tFK7XL2e3RvLmZcm0sTdF1/UUlHSsjXdCcWNxe7yfmAlPve5ym0DmKGtTzP6kVQ==
-
 radashi@^12.2.3:
   version "12.2.3"
   resolved "https://registry.yarnpkg.com/radashi/-/radashi-12.2.3.tgz#0af46bd25d9e2fd35e2923364494cdfb49776b44"
@@ -24236,6 +24236,11 @@ type-fest@^3.0.0, type-fest@^3.8.0:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-3.13.1.tgz#bb744c1f0678bea7543a2d1ec24e83e68e8c8706"
   integrity sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==
 
+type-fest@^4.32.0:
+  version "4.32.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-4.32.0.tgz#55bacdd6f2cf1392b7e9cde894e9b1d726807e97"
+  integrity sha512-rfgpoi08xagF3JSdtJlCwMq9DGNDE0IMh3Mkpc1wUypg9vPi786AiqeBBKcqvIkq42azsBM85N490fyZjeUftw==
+
 type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz"