magick-icons 0.1.251 → 0.1.254

package/README.md

@@ -0,0 +1,116 @@
+# Magick Icons
+
+SVG React icon components with TypeScript support.
+
+## Installation
+
+```bash
+npm install magick-icons
+# or
+pnpm add magick-icons
+# or
+yarn add magick-icons
+```
+
+## Usage
+
+```tsx
+import { ChatFullScreen, Finance } from 'magick-icons';
+
+function App() {
+  return (
+    <div>
+      <ChatFullScreen size={24} className="text-blue-500" />
+      <Finance size={32} color="red" />
+    </div>
+  );
+}
+```
+
+## Available Icons
+
+- `ChatFullScreen`
+- `Finance`
+
+## Props
+
+All icons accept standard SVG props plus:
+
+```tsx
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string; // Default: 24
+}
+```
+
+## Examples
+
+### Basic Usage
+```tsx
+<ChatFullScreen />
+```
+
+### Custom Size
+```tsx
+<ChatFullScreen size={48} />
+<ChatFullScreen size="2rem" />
+```
+
+### Custom Styling
+```tsx
+<ChatFullScreen
+  className="text-blue-500 hover:text-blue-700"
+  style={{ cursor: 'pointer' }}
+/>
+```
+
+### With Props
+```tsx
+<Finance
+  size={32}
+  color="currentColor"
+  onClick={() => console.log('clicked')}
+  aria-label="Finance icon"
+/>
+```
+
+## TypeScript
+
+Full TypeScript support with prop types:
+
+```tsx
+import { ChatFullScreen, ChatFullScreenProps } from 'magick-icons';
+
+const props: ChatFullScreenProps = {
+  size: 24,
+  className: "icon",
+};
+
+<ChatFullScreen {...props} />
+```
+
+## IDE Autocomplete
+
+### VS Code
+Enable auto-imports in settings:
+- `typescript.suggest.autoImports`: true
+- `javascript.suggest.autoImports`: true
+
+Then type `<ChatFullScreen` and accept the suggestion to auto-import.
+
+### Manual Import
+Type the import first for autocomplete:
+```tsx
+import { ChatFullScreen } from 'magick-icons';
+// Now typing <Chat will autocomplete
+```
+
+## Updating
+
+To get the latest icons:
+```bash
+pnpm add magick-icons@latest
+```
+
+## License
+
+MIT