feat: add Prettier configuration and ignore files; introduce new icon components and update TypeScript settings for improved development experience

Author: mrbadri

.prettierignore

@@ -0,0 +1,14 @@
+# Ignore Handlebars template files
+*.hbs
+
+# Build output directories
+dist/
+build/
+
+# Dependencies
+node_modules/
+
+# Cache directories
+.cache/
+.next/
+

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true
+}

apps/docs/pages/getting-started/usage.mdx

@@ -11,7 +11,7 @@ Fetch icons from your Figma file:
 npm run icon:fetch
 
 # Or directly with the CLI
-npx iconsync fetch
+npx @iconsync/core fetch
 ```
 
 This will download SVG icons from your configured Figma file and store them in a local cache.
@@ -25,7 +25,7 @@ Generate React components from the fetched icons:
 npm run icon:generate
 
 # Or directly with the CLI
-npx iconsync generator
+npx @iconsync/core generator
 ```
 
 This will create React components in the output directory specified in your configuration.
@@ -36,18 +36,13 @@ Import and use the generated icon components in your React application:
 
 ```jsx
 // Import the generated icon component
-import { ArrowRight } from '../components/icons';
+import { ArrowRight } from "../components/icons";
 
 export default function IconExample() {
   return (
     <div>
       {/* Use the icon component */}
-      <ArrowRight 
-        width={24} 
-        height={24} 
-        color="blue" 
-        title="Go to next page" 
-      />
+      <ArrowRight width={24} height={24} color="blue" title="Go to next page" />
     </div>
   );
 }
@@ -65,4 +60,4 @@ npm run icon:cache:stats
 npm run icon:cache:clear
 ```
 
-Clearing the cache can be useful when you want to ensure you're fetching the latest icons from Figma.
+Clearing the cache can be useful when you want to ensure you're fetching the latest icons from Figma.

apps/docs/pages/icons.mdx

@@ -41,7 +41,7 @@ After setting up your configuration file, you can fetch icons from Figma:
 
 ```bash
 # Using the CLI directly
-npx iconsync fetch
+npx @iconsync/core fetch
 
 # Or using a package.json script
 npm run icon:fetch
@@ -53,7 +53,7 @@ After fetching icons, you can generate React components:
 
 ```bash
 # Using the CLI directly
-npx iconsync generator
+npx @iconsync/core generator
 
 # Or using a package.json script
 npm run icon:generate
@@ -64,18 +64,18 @@ npm run icon:generate
 Once your icon components are generated, you can import and use them in your React application:
 
 ```jsx
-import { ArrowRight } from './components/icons';
+import { ArrowRight } from "./components/icons";
 
 export default function IconExample() {
   return (
-    <ArrowRight 
-      width={24} 
-      height={24} 
-      color="currentColor" 
-      title="Arrow Right Icon" 
+    <ArrowRight
+      width={24}
+      height={24}
+      color="currentColor"
+      title="Arrow Right Icon"
     />
   );
 }
 ```
 
-The exact props available will depend on your generator configuration.
+The exact props available will depend on your generator configuration.

apps/docs/tsconfig.json

@@ -1,8 +1,14 @@
 {
   "extends": "@iconsync/tsconfig/nextjs.json",
   "compilerOptions": {
-    "jsx": "react"
+    "jsx": "preserve"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }