Merge pull request #42 from oktaysenkan/feat/qwik-integration

feat(qwik): implement qwik package

.changeset/shy-jars-camp.md

@@ -0,0 +1,88 @@
+---
+"@monicon/qwik-app": patch
+"@monicon/qwik": patch
+"@monicon/babel-plugin": patch
+"@monicon/core": patch
+"@monicon/esbuild": patch
+"@monicon/icon-loader": patch
+"@monicon/metro": patch
+"@monicon/native": patch
+"@monicon/nuxt": patch
+"@monicon/react": patch
+"@monicon/rollup": patch
+"@monicon/rspack": patch
+"@monicon/svelte": patch
+"@monicon/typescript-config": patch
+"@monicon/vite": patch
+"@monicon/vue": patch
+"@monicon/webpack": patch
+---
+
+# Qwik Support
+
+Monicon now supports Qwik, making it easy to use icons in Qwik applications. You can follow the installation steps to quickly integrate it into your project. Enjoy the same versatile icon sets, now optimized for the speed and efficiency of Qwik.
+
+## Install
+
+To get started, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command to install the dependencies.
+
+```sh
+npm i @monicon/qwik @monicon/vite
+```
+
+Now you should install the development dependency `@iconify/json` for the icon sets. This package provides a comprehensive collection of icons that can be easily integrated into your project.
+
+```sh
+npm i -D @iconify/json
+
+# or specific icon sets
+npm i -D @iconify-json/mdi @iconify-json/feather
+```
+
+## Configure Vite
+
+Now that the dependencies are installed, you’ll need to configure Vite to use Monicon.
+
+```js filename="vite.config.ts"
+import { defineConfig } from "vite";
+import monicon from "@monicon/vite";
+
+export default defineConfig({
+  plugins: [
+    monicon({
+      icons: [
+        "mdi:home",
+        "feather:activity",
+        "logos:active-campaign",
+        "lucide:badge-check",
+      ],
+      // Load all icons from the listed collections
+      collections: ["radix-icons"],
+    }),
+  ],
+});
+```
+
+## Usage
+
+You can now use Monicon in your React components. Here’s an example of how to use Monicon in a React component.
+
+```tsx filename="src/routes/index.tsx"
+import { component$ } from "@builder.io/qwik";
+import { Monicon } from "@monicon/qwik";
+
+export default component$(() => {
+  return (
+    <main>
+      <Monicon name="mdi:home" />
+      <Monicon name="logos:active-campaign" size={32} />
+      <Monicon name="feather:activity" color="red" />
+      <Monicon name="lucide:badge-check" size={24} strokeWidth={4} />
+    </main>
+  );
+}
+```
+
+## Next Steps
+
+You’ve successfully set up Monicon with Qwik! You can now explore more icon sets and customize your usage further.

apps/docs/pages/_app.tsx

@@ -0,0 +1,5 @@
+function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
+
+export default App;

apps/docs/pages/installation/_meta.tsx

@@ -2,6 +2,7 @@ export default {
   react: "React",
   nextjs: "Next.js",
   remix: "Remix",
+  qwik: "Qwik",
   "react-native": "React Native",
   vue: "Vue",
   nuxt: "Nuxt",

apps/docs/pages/installation/qwik.mdx

@@ -0,0 +1,82 @@
+import { Steps, Callout } from "nextra/components";
+
+# Install Monicon with Qwik
+
+Setting up Monicon with Qwik is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your Qwik project.
+
+<Steps>
+
+## Install
+
+To get started, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command to install the dependencies.
+
+```sh npm2yarn
+npm i @monicon/qwik @monicon/vite
+```
+
+Now you should install the development dependency `@iconify/json` for the icon sets. This package provides a comprehensive collection of icons that can be easily integrated into your project.
+
+```sh npm2yarn
+npm i -D @iconify/json
+
+# or specific icon sets
+npm i -D @iconify-json/mdi @iconify-json/feather
+```
+
+## Configure Vite
+
+Now that the dependencies are installed, you’ll need to configure Vite to use Monicon.
+
+```js filename="vite.config.ts"
+import { defineConfig } from "vite";
+import monicon from "@monicon/vite";
+
+export default defineConfig({
+  plugins: [
+    monicon({
+      icons: [
+        "mdi:home",
+        "feather:activity",
+        "logos:active-campaign",
+        "lucide:badge-check",
+      ],
+      // Load all icons from the listed collections
+      collections: ["radix-icons"],
+    }),
+  ],
+});
+```
+
+<Callout>
+The `icons` array in the `monicon` plugin configuration specifies the icon sets you want to use in your project. You can add more icon sets as needed.
+
+For a complete list of available icon sets, refer to the [Icones](https://icones.js.org/) website.
+
+</Callout>
+
+## Usage
+
+You can now use Monicon in your React components. Here’s an example of how to use Monicon in a React component.
+
+```tsx filename="src/routes/index.tsx"
+import { component$ } from "@builder.io/qwik";
+import { Monicon } from "@monicon/qwik";
+
+
+export default component$(() => {
+  return (
+    <main>
+      <Monicon name="mdi:home" />
+      <Monicon name="logos:active-campaign" size={32} />
+      <Monicon name="feather:activity" color="red" />
+      <Monicon name="lucide:badge-check" size={24} strokeWidth={4} />
+    </main>
+  );
+}
+```
+
+## Next Steps
+
+You’ve successfully set up Monicon with Qwik! You can now explore more icon sets and customize your usage further.
+
+</Steps>

apps/qwik-app/.eslintignore

@@ -0,0 +1,38 @@
+**/*.log
+**/.DS_Store
+*.
+.vscode/settings.json
+.history
+.yarn
+bazel-*
+bazel-bin
+bazel-out
+bazel-qwik
+bazel-testlogs
+dist
+dist-dev
+lib
+lib-types
+etc
+external
+node_modules
+temp
+tsc-out
+tsdoc-metadata.json
+target
+output
+rollup.config.js
+build
+.cache
+.vscode
+.rollup.cache
+dist
+tsconfig.tsbuildinfo
+vite.config.ts
+*.spec.tsx
+*.spec.ts
+.netlify
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+server

apps/qwik-app/.eslintrc.cjs

@@ -0,0 +1,42 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:qwik/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ["./tsconfig.json"],
+    ecmaVersion: 2021,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ["@typescript-eslint"],
+  rules: {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-this-alias": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "prefer-spread": "off",
+    "no-case-declarations": "off",
+    "no-console": "off",
+    "@typescript-eslint/no-unused-vars": ["error"],
+    "@typescript-eslint/consistent-type-imports": "warn",
+    "@typescript-eslint/no-unnecessary-condition": "warn",
+  },
+};

apps/qwik-app/.gitignore

@@ -0,0 +1,42 @@
+# Build
+/dist
+/lib
+/lib-types
+/server
+
+# Development
+node_modules
+.env
+*.local
+
+# Cache
+.cache
+.mf
+.rollup.cache
+tsconfig.tsbuildinfo
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor
+.vscode/*
+!.vscode/launch.json
+!.vscode/*.code-snippets
+
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Yarn
+.yarn/*
+!.yarn/releases

apps/qwik-app/.prettierignore

@@ -0,0 +1,37 @@
+**/*.log
+**/.DS_Store
+*.
+.vscode/settings.json
+.history
+.yarn
+bazel-*
+bazel-bin
+bazel-out
+bazel-qwik
+bazel-testlogs
+dist
+dist-dev
+lib
+lib-types
+etc
+external
+node_modules
+temp
+tsc-out
+tsdoc-metadata.json
+target
+output
+rollup.config.js
+build
+.cache
+.vscode
+.rollup.cache
+tsconfig.tsbuildinfo
+vite.config.ts
+*.spec.tsx
+*.spec.ts
+.netlify
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+server