feat: add Qwik JSX compiler (#318)

* feat: add Qwik JSX compiler * chore: update SB script and vite config file * docs: add note about running qwik in SB * docs: update qwik note
unplugin · Dec 3, 2023 · 11dcbc2 · 11dcbc2
1 parent 5022512
commit 11dcbc2
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -580,6 +580,15 @@ npm i -D @svgx/core
 Icons({ compiler: 'qwik' })
 ```
 
+Alternatively, you can use `jsx` compiler, requires peer dependency `@svgr/core` and its plugin `@svgr/plugin-jsx`:
+```bash
+npm i -D @svgr/core @svgr/plugin-jsx
+```
+
+```ts
+Icons({ compiler: 'jsx', jsx: 'qwik' })
+```
+
 Type Declarations
 
 <!-- eslint-skip -->

diff --git a/examples/README.md b/examples/README.md
@@ -1,19 +1,21 @@
 # Examples
 
-| Example | Source | Playground |
-|-------------------------|---------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------|
-| `Astro` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/astro) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/astro) |
-| `Next` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/next) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/next) |
-| `Nuxt 3` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/nuxt3) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/nuxt3) |
-| `SvelteKit` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/sveltekit) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/sveltekit) |
-| `Preact (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-preact) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-preact) |
-| `Qwik (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-qwik) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-qwik) |
-| `React (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-react) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-react) |
-| `Solid (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-solid) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-solid) |
-| `Svelte (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-svelte) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-svelte) |
-| `VanillaJS (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vanilla) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vanilla) |
-| `Vue2 (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vue2) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vue2) |
-| `Vue3 (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vue3) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vue3) |
-| `Vue3 legacy (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vue3-legacy) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vue3-legacy) |
-| `Web Components (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-web-components) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-web-components) |
-| `Vue2 (Vue CLI)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vue-cli-vue2) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vue-cli-vue2) |
+**NOTE**: Qwik (Vite) example running on StackBlitz will switch to `compiler: 'jsx'` and `jsx: 'qwik'`, replacing `@svgx/core` with `@svgr/core` and `@svgr/plugin-jsx`)
+
+| Example | Source | Playground |
+|-------------------------|---------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `Astro` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/astro) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/astro) |
+| `Next` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/next) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/next) |
+| `Nuxt 3` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/nuxt3) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/nuxt3) |
+| `SvelteKit` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/sveltekit) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/sveltekit) |
+| `Preact (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-preact) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-preact) |
+| `Qwik (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-qwik) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-qwik) |
+| `React (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-react) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-react) |
+| `Solid (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-solid) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-solid) |
+| `Svelte (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-svelte) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-svelte) |
+| `VanillaJS (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vanilla) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vanilla) |
+| `Vue2 (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vue2) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vue2) |
+| `Vue3 (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vue3) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vue3) |
+| `Vue3 legacy (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vue3-legacy) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vue3-legacy) |
+| `Web Components (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-web-components) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-web-components) |
+| `Vue2 (Vue CLI)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vue-cli-vue2) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vue-cli-vue2) |
diff --git a/examples/vite-qwik/.stackblitz.js b/examples/vite-qwik/.stackblitz.js
@@ -3,14 +3,18 @@ import { promises as fsPromises } from 'node:fs'
 updatePackageJson()
 
 async function updatePackageJson() {
- const filename = './package.json'
+ let filename = './package.json'
  try {
  const contents = await fsPromises.readFile(filename, 'utf-8')
  const updatedContent = contents
  .replace('workspace:*', 'latest')
  .replace('"eslint": "8.48.0",', '"eslint": "8.45.0",')
  .replace('"eslint-plugin-qwik": "1.2.10",', '"eslint-plugin-qwik": "1.2.11",')
+ .replace('"@svgx/core": "^1.0.1",', '"@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0",')
  await fsPromises.writeFile(filename, updatedContent)
+ filename = './vite.config.ts'
+ const viteConfigTs = await fsPromises.readFile(filename, 'utf-8')
+ await fsPromises.writeFile(filename, viteConfigTs.replace('compiler: \'qwik\',', 'compiler: \'jsx\', jsx: \'qwik\','))
  }
  catch (err) {
  console.error(err)

diff --git a/src/types.ts b/src/types.ts
@@ -72,7 +72,7 @@ export interface Options {
  *
  * @default (detect automatically, fallback to 'react')
  */
- jsx?: 'react' | 'preact'
+ jsx?: 'react' | 'preact' | 'qwik'
 
  /**
  * Config for Web Components compiler