feat: optmize svg and fix the icons inherit colors other colors

README.md

@@ -9,4 +9,3 @@
 
   <img src="https://raw.githubusercontent.com/MKAbuMattar/react-fluentui-emoji/main/assets/banner.webp" alt="@MKAbuMattar/react-fluentui-emoji Banner"/>
 </div>
-

package.json

@@ -42,6 +42,7 @@
     "fluentui-emoji:jsx": "NODE_OPTIONS=--max-old-space-size=8192 tsx script/jsx.script.ts",
     "fluentui-emoji:lib": "npm run fluentui-emoji:clean:lib && NODE_OPTIONS=--max-old-space-size=8192 babel build --out-dir lib --copy-files",
     "fluentui-emoji:pkg": "npm run fluentui-emoji:clean:pkg && tsx script/copy-lib.script.ts",
+    "build": "npm run fluentui-emoji:clone && npm run fluentui-emoji:svg && npm run svg:optmize && npm run fluentui-emoji:jsx && npm run fluentui-emoji:lib && npm run fluentui-emoji:pkg",
     "lint": "biome check ./script",
     "lint:fix": "biome check ./script --fix",
     "fmt": "biome format ./script",
@@ -59,15 +60,17 @@
     "@types/node": "22.5.0",
     "@types/react": "18.3.4",
     "@types/react-dom": "18.3.0",
+    "@types/uuid": "10.0.0",
     "babel-preset-minify": "0.5.2",
     "fs-extra": "11.2.0",
-    "jsdom": "24.1.1",
+    "jsdom": "25.0.0",
     "react": "18.3.1",
     "recursive-directory": "1.2.3",
     "rimraf": "6.0.1",
     "svg-to-jsx": "1.0.4",
     "svgo": "3.3.2",
-    "tsx": "4.17.0",
-    "typescript": "5.5.4"
+    "tsx": "4.18.0",
+    "typescript": "5.5.4",  
+    "uuid": "10.0.0"
   }
 }

packages/react-fluentui-emoji/README.md

@@ -9,4 +9,3 @@
 
   <img src="https://raw.githubusercontent.com/MKAbuMattar/react-fluentui-emoji/main/assets/banner.webp" alt="@MKAbuMattar/react-fluentui-emoji Banner"/>
 </div>
-

packages/react-fluentui-emoji/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fluentui-emoji",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React Fluentui Emoji an npm package contains a number of well-known, cordial, and contemporary emoji, build into @microsoft/fluentui-emoji.",
   "keywords": [
     "fluentui",
@@ -30,8 +30,7 @@
     "react": "*"
   },
   "dependencies": {},
-  "devDependencies": {
-  },
+  "devDependencies": {},
   "sideEffects": false,
   "exports": {
     ".": {
@@ -71,10 +70,7 @@
     },
     "./package.json": "./package.json"
   },
-  "files": [
-    "/lib",
-    "/index.d.ts"
-  ],
+  "files": ["/lib", "/index.d.ts"],
   "support": {
     "backing": {
       "npm-funding": true

svgo.config.cjs

@@ -0,0 +1,27 @@
+  const {v4: uuid} = require('uuid');
+
+  /** @type {import('svgo').Config} */
+  const svgoConfig = {
+    plugins: [
+      {
+        name: 'preset-default',
+        params: {
+          overrides: {
+            removeViewBox: false,
+          },
+        },
+      },
+      'convertStyleToAttrs',
+      'cleanupIds',
+      {
+        name: 'prefixIds',
+        params: {
+          delim: '',
+          prefix: () => `svg-${uuid()}-`,
+        },
+      },
+      'removeDimensions',
+    ],
+  };
+
+  module.exports = svgoConfig;

tsconfig.json

@@ -9,10 +9,10 @@
     // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
     /* Language and Environment */
-    "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     "lib": [
       "ES2021.String"
-    ], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
@@ -24,17 +24,17 @@
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
     /* Modules */
-    "module": "commonjs", /* Specify what module code is generated. */
+    "module": "commonjs" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
-    "resolveJsonModule": true, /* Enable importing .json files. */
+    "resolveJsonModule": true /* Enable importing .json files. */,
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
     /* JavaScript Support */
     // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
@@ -67,11 +67,11 @@
     /* Interop Constraints */
     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
     /* Type Checking */
-    "strict": true, /* Enable all strict type-checking options. */
+    "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
@@ -94,4 +94,4 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */
   }
-}
+}