Skip to content

Commit 11dcbc2

Browse files
userquinuserquin
authoredDec 3, 2023
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
·
v22.1.0v0.18.1
1 parent 5022512 commit 11dcbc2

File tree

4 files changed

+34
-19
lines changed

4 files changed

+34
-19
lines changed
 

‎README.md

+9
Original file line numberDiff line numberDiff line change
@@ -580,6 +580,15 @@ npm i -D @svgx/core
580580
Icons({ compiler: 'qwik' })
581581
```
582582

583+
Alternatively, you can use `jsx` compiler, requires peer dependency `@svgr/core` and its plugin `@svgr/plugin-jsx`:
584+
```bash
585+
npm i -D @svgr/core @svgr/plugin-jsx
586+
```
587+
588+
```ts
589+
Icons({ compiler: 'jsx', jsx: 'qwik' })
590+
```
591+
583592
Type Declarations
584593

585594
<!-- eslint-skip -->

‎examples/README.md

+19-17
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
# Examples
22

3-
| Example | Source | Playground |
4-
|-------------------------|---------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------|
5-
| `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) |
6-
| `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) |
7-
| `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) |
8-
| `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) |
9-
| `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) |
10-
| `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) |
11-
| `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) |
12-
| `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) |
13-
| `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) |
14-
| `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) |
15-
| `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) |
16-
| `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) |
17-
| `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) |
18-
| `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) |
19-
| `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) |
3+
**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`)
4+
5+
| Example | Source | Playground |
6+
|-------------------------|---------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
7+
| `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) |
8+
| `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) |
9+
| `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) |
10+
| `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) |
11+
| `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) |
12+
| `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) |
13+
| `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) |
14+
| `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) |
15+
| `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) |
16+
| `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) |
17+
| `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) |
18+
| `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) |
19+
| `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) |
20+
| `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) |
21+
| `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) |

‎examples/vite-qwik/.stackblitz.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,18 @@ import { promises as fsPromises } from 'node:fs'
33
updatePackageJson()
44

55
async function updatePackageJson() {
6-
const filename = './package.json'
6+
let filename = './package.json'
77
try {
88
const contents = await fsPromises.readFile(filename, 'utf-8')
99
const updatedContent = contents
1010
.replace('workspace:*', 'latest')
1111
.replace('"eslint": "8.48.0",', '"eslint": "8.45.0",')
1212
.replace('"eslint-plugin-qwik": "1.2.10",', '"eslint-plugin-qwik": "1.2.11",')
13+
.replace('"@svgx/core": "^1.0.1",', '"@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0",')
1314
await fsPromises.writeFile(filename, updatedContent)
15+
filename = './vite.config.ts'
16+
const viteConfigTs = await fsPromises.readFile(filename, 'utf-8')
17+
await fsPromises.writeFile(filename, viteConfigTs.replace('compiler: \'qwik\',', 'compiler: \'jsx\', jsx: \'qwik\','))
1418
}
1519
catch (err) {
1620
console.error(err)

‎src/types.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export interface Options {
7272
*
7373
* @default (detect automatically, fallback to 'react')
7474
*/
75-
jsx?: 'react' | 'preact'
75+
jsx?: 'react' | 'preact' | 'qwik'
7676

7777
/**
7878
* Config for Web Components compiler

0 commit comments

Comments
 (0)
Please sign in to comment.