feat: ui changes

.idea/workspace.xml

@@ -4,8 +4,43 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: docs">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: funding">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/scripts/create-tool.mjs" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/create-tool.mjs" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Hero.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Hero.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Navbar/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Navbar/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolHeader.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolHeader.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolLayout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolLayout.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/config/uiConfig.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/uiConfig.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/home/Categories.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/Categories.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/compress-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/compress-png/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/convert-jgp-to-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/convert-jgp-to-png/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/find-most-popular/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/find-most-popular/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/find-unique/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/find-unique/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/group/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/group/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/reverse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/reverse/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/rotate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/rotate/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/shuffle/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/shuffle/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/sort/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/sort/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/unwrap/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/unwrap/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/generate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/generate/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/sum/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/sum/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/join/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/join/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/split/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/split/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/to-morse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/to-morse/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/video/gif/change-speed/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/video/gif/change-speed/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/tools/defineTool.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/defineTool.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -76,7 +111,7 @@
     &quot;git-widget-placeholder&quot;: &quot;main&quot;,
     &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
     &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
-    &quot;last_opened_file_path&quot;: &quot;C:/Users/Ibrahima/IdeaProjects/omni-tools/src/assets&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/Ibrahima/IdeaProjects/omni-tools/.github&quot;,
     &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
     &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
     &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
@@ -109,11 +144,11 @@
   </component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\.github" />
       <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\src\assets" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\assets" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\string" />
-      <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\string\split" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\src\pages\tools" />
@@ -255,14 +290,8 @@
       <workItem from="1740318886545" duration="856000" />
       <workItem from="1740348963270" duration="388000" />
       <workItem from="1740399426653" duration="627000" />
-    </task>
+      <workItem from="1740459961271" duration="66000" />
-    <task id="LOCAL-00061" summary="feat: make responsive">
+      <workItem from="1740460036909" duration="4124000" />
-      <option name="closed" value="true" />
-      <created>1719358195260</created>
-      <option name="number" value="00061" />
-      <option name="presentableId" value="LOCAL-00061" />
-      <option name="project" value="LOCAL" />
-      <updated>1719358195260</updated>
     </task>
     <task id="LOCAL-00062" summary="feat: make tool responsive">
       <option name="closed" value="true" />
@@ -648,7 +677,15 @@
       <option name="project" value="LOCAL" />
       <updated>1740324274955</updated>
     </task>
-    <option name="localTasksCounter" value="110" />
+    <task id="LOCAL-00110" summary="feat: funding">
+      <option name="closed" value="true" />
+      <created>1740460017596</created>
+      <option name="number" value="00110" />
+      <option name="presentableId" value="LOCAL-00110" />
+      <option name="project" value="LOCAL" />
+      <updated>1740460017596</updated>
+    </task>
+    <option name="localTasksCounter" value="111" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -680,7 +717,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="ci: run e2e tests" />
     <MESSAGE value="fix: ci" />
     <MESSAGE value="chore: jimp types" />
     <MESSAGE value="fix: package.json" />
@@ -705,7 +741,8 @@
     <MESSAGE value="feat: compress png" />
     <MESSAGE value="fix: compress png" />
     <MESSAGE value="fix: docs" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: docs" />
+    <MESSAGE value="feat: funding" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: funding" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

README.md

@@ -1,5 +1,4 @@
-<p align="center"><img src="src/assets/logo.png" width="80"></p>
+<p align="center"><img src="src/assets/logo.png" width="150"></p>
-<h1 align="center">OmniTools</h1>
 
 [//]: # ([![Docker Pulls]&#40;https://img.shields.io/docker/pulls/iib0011/omni-tools&#41;]&#40;https://hub.docker.com/r/iib0011/omni-tools&#41;)
 
@@ -100,7 +99,7 @@ npm run test
 npm run test:e2e
 ```
 
-[//]: # (<img src="https://api.star-history.com/svg?repos=iib0011/omni-tools&type=Date">)
+<img src="https://api.star-history.com/svg?repos=iib0011/omni-tools&type=Date">
 
 ## 🤝 Looking to contribute?
 

package-lock.json

@@ -37,6 +37,7 @@
       "devDependencies": {
         "@commitlint/cli": "^19.3.0",
         "@commitlint/config-conventional": "^19.2.2",
+        "@iconify/react": "^5.2.0",
         "@testing-library/jest-dom": "^6.4.5",
         "@testing-library/react": "^14.3.1",
         "@types/color": "^3.0.6",
@@ -1472,6 +1473,29 @@
       "deprecated": "Use @eslint/object-schema instead",
       "dev": true
     },
+    "node_modules/@iconify/react": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@iconify/react/-/react-5.2.0.tgz",
+      "integrity": "sha512-7Sdjrqq3fkkQNks9SY3adGC37NQTHsBJL2PRKlQd455PoDi9s+Es9AUTY+vGLFOYs5yO9w9yCE42pmxCwG26WA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",

package.json

@@ -54,6 +54,7 @@
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@iconify/react": "^5.2.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^14.3.1",
     "@types/color": "^3.0.6",

scripts/create-tool.mjs

@@ -92,12 +92,11 @@ createToolFile(
   `
 import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
-// import image from '@assets/text.png';
 
 export const tool = defineTool('${type}', {
   name: '${toolNameTitleCase}',
   path: '${toolName}',
-  // image,
+  icon: '',
   description: '',
   shortDescription: '',
   keywords: ['${toolName.split('-').join("', '")}'],

src/components/Hero.tsx

@@ -75,7 +75,8 @@ export default function Hero() {
               ...params.InputProps,
               endAdornment: <SearchIcon />,
               sx: {
-                borderRadius: 4
+                borderRadius: 4,
+                backgroundColor: 'white'
               }
             }}
             onChange={(event) => handleInputChange(event, event.target.value)}
@@ -114,6 +115,7 @@ export default function Hero() {
                 borderRadius: 3,
                 borderColor: 'grey',
                 borderStyle: 'solid',
+                backgroundColor: 'white',
                 cursor: 'pointer',
                 '&:hover': { backgroundColor: '#FAFAFD' }
               }}

src/components/Navbar/index.tsx

@@ -50,9 +50,18 @@ const Navbar: React.FC = () => {
   return (
     <AppBar
       position="static"
-      style={{ backgroundColor: 'white', color: 'black' }}
+      style={{
+        backgroundColor: 'white',
+        color: 'black'
+      }}
     >
-      <Toolbar sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+      <Toolbar
+        sx={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          boxShadow: '0px 2px 2px #C8C9CE'
+        }}
+      >
         <img
           onClick={() => navigate('/')}
           style={{ cursor: 'pointer' }}

src/components/ToolHeader.tsx

@@ -3,11 +3,13 @@ import Typography from '@mui/material/Typography';
 import ToolBreadcrumb from './ToolBreadcrumb';
 import { capitalizeFirstLetter } from '../utils/string';
 import Grid from '@mui/material/Grid';
+import { Icon, IconifyIcon } from '@iconify/react';
+import { categoriesColors } from '../config/uiConfig';
 
 interface ToolHeaderProps {
   title: string;
   description: string;
-  image?: string;
+  icon?: IconifyIcon;
   type: string;
 }
 
@@ -15,17 +17,32 @@ function ToolLinks() {
   return (
     <Grid container spacing={2} mt={1}>
       <Grid item md={12} lg={4}>
-        <Button fullWidth variant="outlined" href="#tool">
+        <Button
+          sx={{ backgroundColor: 'white' }}
+          fullWidth
+          variant="outlined"
+          href="#tool"
+        >
           Use This Tool
         </Button>
       </Grid>
       <Grid item md={12} lg={4}>
-        <Button fullWidth variant="outlined" href="#examples">
+        <Button
+          sx={{ backgroundColor: 'white' }}
+          fullWidth
+          variant="outlined"
+          href="#examples"
+        >
           See Examples
         </Button>
       </Grid>
       <Grid item md={12} lg={4}>
-        <Button fullWidth variant="outlined" href="#tour">
+        <Button
+          sx={{ backgroundColor: 'white' }}
+          fullWidth
+          variant="outlined"
+          href="#tour"
+        >
           Learn How to Use
         </Button>
       </Grid>
@@ -34,7 +51,7 @@ function ToolLinks() {
 }
 
 export default function ToolHeader({
-  image,
+  icon,
   title,
   description,
   type
@@ -60,10 +77,18 @@ export default function ToolHeader({
           <ToolLinks />
         </Grid>
 
-        {image && (
+        {icon && (
           <Grid item xs={12} md={4}>
             <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-              <img width={'250'} src={image} />
+              <Icon
+                icon={icon}
+                fontSize={'250'}
+                color={
+                  categoriesColors[
+                    Math.floor(Math.random() * categoriesColors.length)
+                  ]
+                }
+              />
             </Box>
           </Grid>
         )}

src/components/ToolLayout.tsx

@@ -6,17 +6,18 @@ import Separator from './Separator';
 import AllTools from './allTools/AllTools';
 import { getToolsByCategory } from '@tools/index';
 import { capitalizeFirstLetter } from '../utils/string';
+import { IconifyIcon } from '@iconify/react';
 
 export default function ToolLayout({
   children,
   title,
   description,
-  image,
+  icon,
   type
 }: {
   title: string;
   description: string;
-  image?: string;
+  icon?: IconifyIcon | string;
   type: string;
   children: ReactNode;
 }) {
@@ -36,6 +37,7 @@ export default function ToolLayout({
       display={'flex'}
       flexDirection={'column'}
       alignItems={'center'}
+      sx={{ backgroundColor: '#F5F5FA' }}
     >
       <Helmet>
         <title>{`${title} - Omni Tools`}</title>
@@ -44,7 +46,7 @@ export default function ToolLayout({
         <ToolHeader
           title={title}
           description={description}
-          image={image}
+          icon={icon}
           type={type}
         />
         {children}

src/components/input/ToolFileInput.tsx

@@ -83,7 +83,8 @@ export default function ToolFileInput({
           height: globalInputHeight,
           border: preview ? 0 : 1,
           borderRadius: 2,
-          boxShadow: '5'
+          boxShadow: '5',
+          bgcolor: 'white'
         }}
       >
         {preview ? (

src/components/input/ToolTextInput.tsx

@@ -50,7 +50,14 @@ export default function ToolTextInput({
         fullWidth
         multiline
         rows={10}
-        inputProps={{ 'data-testid': 'text-input' }}
+        sx={{
+          '&.MuiTextField-root': {
+            backgroundColor: 'white'
+          }
+        }}
+        inputProps={{
+          'data-testid': 'text-input'
+        }}
       />
       <InputFooter handleCopy={handleCopy} handleImport={handleImportClick} />
       <input

src/components/result/ToolFileResult.tsx

@@ -67,7 +67,8 @@ export default function ToolFileResult({
           height: globalInputHeight,
           border: preview ? 0 : 1,
           borderRadius: 2,
-          boxShadow: '5'
+          boxShadow: '5',
+          bgcolor: 'white'
         }}
       >
         {preview && (

src/components/result/ToolTextResult.tsx

@@ -41,6 +41,11 @@ export default function ToolTextResult({
         value={replaceSpecialCharacters(value)}
         fullWidth
         multiline
+        sx={{
+          '&.MuiTextField-root': {
+            backgroundColor: 'white'
+          }
+        }}
         rows={10}
         inputProps={{ 'data-testid': 'text-result' }}
       />

src/config/uiConfig.ts

@@ -1,2 +1,8 @@
 export const globalInputHeight = 300;
 export const globalDescriptionFontSize = 12;
+export const categoriesColors: string[] = [
+  '#8FBC5D',
+  '#3CB6E2',
+  '#FFD400',
+  '#AB6993'
+];

src/pages/home/index.tsx

@@ -5,7 +5,7 @@ import Categories from './Categories';
 export default function Home() {
   return (
     <Box
-      padding={{ xs: 1, md: 3, lg: 5 }}
+      padding={{ xs: 1, md: 3, lg: 5, backgroundColor: '#F5F5FA' }}
       display={'flex'}
       flexDirection={'column'}
       alignItems={'center'}

src/pages/tools-by-category/index.tsx

@@ -5,14 +5,15 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
 import { getToolsByCategory } from '../../tools';
 import Hero from 'components/Hero';
 import { capitalizeFirstLetter } from '../../utils/string';
-import toolsPng from '@assets/tools.png';
+import { Icon } from '@iconify/react';
+import { categoriesColors } from 'config/uiConfig';
 
 export default function Home() {
   const navigate = useNavigate();
   const theme = useTheme();
   const { categoryName } = useParams();
   return (
-    <Box>
+    <Box sx={{ backgroundColor: '#F5F5FA' }}>
       <Box
         padding={{ xs: 1, md: 3, lg: 5 }}
         display={'flex'}
@@ -32,10 +33,12 @@ export default function Home() {
         <Grid container spacing={2} mt={2}>
           {getToolsByCategory()
             .find(({ type }) => type === categoryName)
-            ?.tools?.map((tool) => (
+            ?.tools?.map((tool, index) => (
               <Grid item xs={12} md={6} lg={4} key={tool.path}>
                 <Stack
                   sx={{
+                    backgroundColor: 'white',
+                    boxShadow: '5px 4px 2px #E9E9ED',
                     cursor: 'pointer',
                     '&:hover': {
                       backgroundColor: theme.palette.background.default // Change this to your desired hover color
@@ -45,10 +48,14 @@ export default function Home() {
                   direction={'row'}
                   spacing={2}
                   padding={2}
-                  border={1}
+                  border={`1px solid ${theme.palette.background.default}`}
                   borderRadius={2}
                 >
-                  <img width={100} src={tool.image ?? toolsPng} />
+                  <Icon
+                    icon={tool.icon ?? 'ph:compass-tool-thin'}
+                    fontSize={'100px'}
+                    color={categoriesColors[index % categoriesColors.length]}
+                  />
                   <Box>
                     <Link to={'/' + tool.path}>{tool.name}</Link>
                     <Typography sx={{ mt: 2 }}>

src/pages/tools/image/png/change-colors-in-png/meta.ts

@@ -1,11 +1,10 @@
 import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
-import image from '@assets/image.png';
 
 export const tool = defineTool('png', {
   name: 'Change colors in png',
   path: 'change-colors-in-png',
-  image,
+  icon: 'cil:color-fill',
   description:
     "World's simplest online Portable Network Graphics (PNG) color changer. Just import your PNG image in the editor on the left, select which colors to change, and you'll instantly get a new PNG with the new colors on the right. Free, quick, and very powerful. Import a PNG – replace its colors.",
   shortDescription: 'Quickly swap colors in a PNG image',

src/pages/tools/image/png/compress-png/meta.ts

@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('png', {
   name: 'Compress png',
   path: 'compress-png',
-  // image,
+  icon: 'material-symbols-light:compress',
   description:
     'This is a program that compresses PNG pictures. As soon as you paste your PNG picture in the input area, the program will compress it and show the result in the output area. In the options, you can adjust the compression level, as well as find the old and new picture file sizes.',
   shortDescription: 'Quicly compress a PNG',

src/pages/tools/image/png/convert-jgp-to-png/meta.ts

@@ -1,11 +1,10 @@
 import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
-import image from '@assets/image.png';
 
 export const tool = defineTool('png', {
   name: 'Convert JPG to PNG',
   path: 'convert-jgp-to-png',
-  image,
+  icon: 'ph:file-jpg-thin',
   description:
     'Quickly convert your JPG images to PNG. Just import your PNG image in the editor on the left',
   shortDescription: 'Quickly convert your JPG images to PNG',

src/pages/tools/image/png/create-transparent/meta.ts

@@ -1,11 +1,10 @@
 import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
-import image from '@assets/image.png';
 
 export const tool = defineTool('png', {
   name: 'Create transparent PNG',
   path: 'create-transparent',
-  image,
+  icon: 'mdi:circle-transparent',
   shortDescription: 'Quickly make a PNG image transparent',
   description:
     "World's simplest online Portable Network Graphics transparency maker. Just import your PNG image in the editor on the left and you will instantly get a transparent PNG on the right. Free, quick, and very powerful. Import a PNG – get a transparent PNG.",

src/pages/tools/list/find-most-popular/meta.ts

@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Find most popular',
   path: 'find-most-popular',
-  // image,
+  icon: 'material-symbols-light:query-stats',
   description: '',
   shortDescription: '',
   keywords: ['find', 'most', 'popular'],

src/pages/tools/list/find-unique/meta.ts

@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Find unique',
   path: 'find-unique',
-  // image,
+  icon: 'mynaui:one',
   description: '',
   shortDescription: '',
   keywords: ['find', 'unique'],

src/pages/tools/list/group/meta.ts

@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Group',
   path: 'group',
-  // image,
+  icon: 'pajamas:group',
   description: '',
   shortDescription: '',
   keywords: ['group'],

src/pages/tools/list/reverse/meta.ts

@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Reverse',
   path: 'reverse',
-  // image,
+  icon: 'proicons:reverse',
   description: '',
   shortDescription: '',
   keywords: ['reverse'],

src/pages/tools/list/rotate/meta.ts

@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Rotate',
   path: 'rotate',
-  // image,
+  icon: 'material-symbols-light:rotate-right',
   description: '',
   shortDescription: '',
   keywords: ['rotate'],

src/pages/tools/list/shuffle/meta.ts

@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Shuffle',
   path: 'shuffle',
-  // image,
+  icon: 'material-symbols-light:shuffle',
   description: '',
   shortDescription: '',
   keywords: ['shuffle'],

src/pages/tools/list/sort/meta.ts

@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Sort',
   path: 'sort',
-  // image,
+  icon: 'basil:sort-outline',
   description:
     'This is a super simple browser-based application that sorts items in a list and arranges them in increasing or decreasing order. You can sort the items alphabetically, numerically, or by their length. You can also remove duplicate and empty items, as well as trim individual items that have whitespace around them. You can use any separator character to separate the input list items or alternatively use a regular expression to separate them. Additionally, you can create a new delimiter for the sorted output list.',
   shortDescription: 'Quickly sort a list',

src/pages/tools/list/unwrap/meta.ts

@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('list', {
   name: 'Unwrap',
   path: 'unwrap',
-  // image,
+  icon: 'mdi:unwrap',
   description: '',
   shortDescription: '',
   keywords: ['unwrap'],

src/pages/tools/number/generate/meta.ts

@@ -6,7 +6,7 @@ export const tool = defineTool('number', {
   name: 'Generate numbers',
   path: 'generate',
   shortDescription: 'Quickly calculate a list of integers in your browser',
-  // image,
+  icon: 'lsicon:number-filled',
   description:
     'Quickly calculate a list of integers in your browser. To get your list, just specify the first integer, change value and total count in the options below, and this utility will generate that many integers',
   keywords: ['generate'],

src/pages/tools/number/sum/meta.ts

@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('number', {
   name: 'Number Sum Calculator',
   path: 'sum',
-  // image,
+  icon: 'fluent:autosum-20-regular',
   description:
     'Quickly calculate the sum of numbers in your browser. To get your sum, just enter your list of numbers in the input field, adjust the separator between the numbers in the options below, and this utility will add up all these numbers.',
   shortDescription: 'Quickly sum numbers',

src/pages/tools/string/join/meta.ts

@@ -1,11 +1,10 @@
 import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
-import image from '@assets/text.png';
 
 export const tool = defineTool('string', {
   path: 'join',
   name: 'Text Joiner',
-  image,
+  icon: 'tabler:arrows-join',
   description:
     "World's Simplest Text Tool World's simplest browser-based utility for joining text. Load your text in the input form on the left and you'll automatically get merged text on the right. Powerful, free, and fast. Load text – get joined lines",
   shortDescription: 'Quickly merge texts',

src/pages/tools/string/split/meta.ts

@@ -5,7 +5,7 @@ import image from '@assets/text.png';
 export const tool = defineTool('string', {
   path: 'split',
   name: 'Text splitter',
-  image,
+  icon: 'material-symbols-light:arrow-split',
   description:
     "World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks.",
   shortDescription: 'Quickly split a text',

src/pages/tools/string/to-morse/meta.ts

@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('string', {
   name: 'String To morse',
   path: 'to-morse',
-  // image,
+  icon: 'arcticons:morse',
   description:
     "World's simplest browser-based utility for converting text to Morse code. Load your text in the input form on the left and you'll instantly get Morse code in the output area. Powerful, free, and fast. Load text – get Morse code.",
   shortDescription: 'Quickly encode text to morse',

src/pages/tools/video/gif/change-speed/meta.ts

@@ -5,7 +5,7 @@ import { lazy } from 'react';
 export const tool = defineTool('gif', {
   name: 'Change speed',
   path: 'change-speed',
-  // image,
+  icon: 'material-symbols-light:speed-outline',
   description:
     'This online utility lets you change the speed of a GIF animation. You can speed it up or slow it down. You can set the same constant delay between all frames or change the delays of individual frames. You can also play both the input and output GIFs at the same time and compare their speeds',
   shortDescription: 'Quickly change GIF speed',

src/tools/defineTool.tsx

@@ -1,11 +1,12 @@
 import ToolLayout from '../components/ToolLayout';
 import React, { JSXElementConstructor, LazyExoticComponent } from 'react';
+import { IconifyIcon } from '@iconify/react';
 
 interface ToolOptions {
   path: string;
   component: LazyExoticComponent<JSXElementConstructor<NonNullable<unknown>>>;
   keywords: string[];
-  image?: string;
+  icon?: IconifyIcon | string;
   name: string;
   description: string;
   shortDescription: string;
@@ -19,7 +20,7 @@ export interface DefinedTool {
   name: string;
   description: string;
   shortDescription: string;
-  image?: string;
+  icon?: IconifyIcon | string;
   keywords: string[];
   component: () => JSX.Element;
 }
@@ -29,7 +30,7 @@ export const defineTool = (
   options: ToolOptions
 ): DefinedTool => {
   const {
-    image,
+    icon,
     path,
     name,
     description,
@@ -42,7 +43,7 @@ export const defineTool = (
     type: basePath,
     path: `${basePath}/${path}`,
     name,
-    image,
+    icon,
     description,
     shortDescription,
     keywords,
@@ -51,7 +52,7 @@ export const defineTool = (
         <ToolLayout
           title={name}
           description={description}
-          image={image}
+          icon={icon}
           type={basePath}
         >
           <Component />